Hava Durumu Widget'ı

Bu projede, JavaScript kullanarak bir hava durumu widget'ı geliştireceğiz. Widget, kullanıcının aradığı şehir için güncel hava durumu bilgilerini ve kısa vadeli tahminleri gösterecek. Bu proje, harici API'lerle çalışma, veri işleme, DOM manipülasyonu ve CSS ile modern bir kullanıcı arayüzü oluşturma becerilerinizi geliştirmenize yardımcı olacak.

Proje Detayları

Önemli Not: Bu projede kullanılacak OpenWeatherMap API gibi harici API'ler genellikle bir API anahtarı (API Key) gerektirir. OpenWeatherMap API için buradan ücretsiz bir API anahtarı almanız gerekecektir. Aldığınız anahtarı JavaScript kodunuzda belirtilen yere eklemelisiniz.

Adım Adım Geliştirme

Bu bölümde, hava durumu widget'ını adım adım nasıl geliştirebileceğinizi öğreneceksiniz. Her adımda, ilgili kod parçalarını ve açıklamalarını bulacaksınız.

Adım 1: Proje Yapısını Oluşturma

İlk olarak, projemiz için gerekli dosyaları oluşturalım:

  • index.html - Ana HTML dosyası
  • style.css - CSS stil dosyası
  • script.js - JavaScript kod dosyası
index.html
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hava Durumu Widget</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="container">
        <div class="weather-widget">
            <div class="weather-header">
                <div class="weather-search">
                    <input type="text" placeholder="Şehir ara..." id="cityInput">
                    <button id="searchBtn"><i class="fas fa-search"></i></button>
                </div>
                <div class="location-info">
                    <div class="location-name" id="locationName">Konum Yükleniyor...</div>
                    <div class="location-date" id="locationDate"></div>
                </div>
            </div>
            
            <div class="weather-body" id="weatherBody">
                <div class="loading" id="loading">
                    <i class="fas fa-spinner fa-spin"></i>
                    <p>Hava durumu bilgileri yükleniyor...</p>
                </div>
                
                <div class="weather-content" id="weatherContent" style="display: none;">
                    <div class="weather-icon">
                        <img src="" alt="Hava Durumu İkonu" id="weatherIcon">
                    </div>
                    <div class="temperature" id="temperature"></div>
                    <div class="weather-description" id="weatherDescription"></div>
                    
                    <div class="weather-details">
                        <div class="weather-detail">
                            <div class="detail-label">Nem</div>
                            <div class="detail-value" id="humidity"></div>
                        </div>
                        <div class="weather-detail">
                            <div class="detail-label">Rüzgar</div>
                            <div class="detail-value" id="wind"></div>
                        </div>
                        <div class="weather-detail">
                            <div class="detail-label">Basınç</div>
                            <div class="detail-value" id="pressure"></div>
                        </div>
                    </div>
                </div>
                
                <div class="error-message" id="errorMessage" style="display: none;">
                    <i class="fas fa-exclamation-circle"></i>
                    <p>Hava durumu bilgileri alınamadı. Lütfen geçerli bir şehir adı girin.</p>
                </div>
            </div>
            
            <div class="weather-forecast" id="weatherForecast" style="display: none;">
                <div class="forecast-title">5 Günlük Tahmin</div>
                <div class="forecast-items" id="forecastItems">
                    <!-- Tahmin öğeleri buraya dinamik olarak eklenecek -->
                </div>
            </div>
            
            <div class="weather-footer">
                <p>Veriler <a href="https://openweathermap.org/" target="_blank">OpenWeatherMap</a> tarafından sağlanmaktadır</p>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>
style.css
/* Genel Stiller */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f0f2f5;
    color: #333;
    line-height: 1.6;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

/* Hava Durumu Widget Stilleri */
.weather-widget {
    width: 350px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    background-color: #fff;
}

.weather-header {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    padding: 20px;
    text-align: center;
    position: relative;
}

.weather-search {
    display: flex;
    margin-bottom: 15px;
}

.weather-search input {
    flex: 1;
    padding: 10px 15px;
    border: none;
    border-radius: 25px 0 0 25px;
    outline: none;
    font-size: 0.9rem;
}

.weather-search button {
    background-color: white;
    border: none;
    border-radius: 0 25px 25px 0;
    padding: 0 15px;
    cursor: pointer;
    color: #4facfe;
}

.location-info {
    margin-bottom: 10px;
}

.location-name {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.location-date {
    font-size: 0.9rem;
    opacity: 0.9;
}

.weather-body {
    padding: 20px;
    text-align: center;
}

.loading, .error-message {
    padding: 30px 0;
    color: #666;
}

.loading i, .error-message i {
    font-size: 2rem;
    margin-bottom: 10px;
    display: block;
}

.error-message {
    color: #e53935;
}

.weather-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
}

.weather-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.temperature {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.weather-description {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 20px;
    text-transform: capitalize;
}

.weather-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.weather-detail {
    text-align: center;
}

.detail-label {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 5px;
}

.detail-value {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
}

.weather-forecast {
    background-color: #f9f9f9;
    padding: 20px;
    border-top: 1px solid #eee;
}

.forecast-title {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 15px;
    text-align: center;
}

.forecast-items {
    display: flex;
    justify-content: space-between;
    overflow-x: auto;
    padding-bottom: 10px;
}

.forecast-item {
    flex: 0 0 auto;
    width: 60px;
    text-align: center;
    padding: 10px 5px;
}

.forecast-day {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 5px;
}

.forecast-icon {
    width: 30px;
    height: 30px;
    margin: 0 auto 5px;
}

.forecast-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.forecast-temp {
    font-size: 0.9rem;
    font-weight: bold;
    color: #333;
}

.weather-footer {
    padding: 15px;
    text-align: center;
    font-size: 0.8rem;
    color: #888;
    border-top: 1px solid #eee;
}

.weather-footer a {
    color: #4facfe;
    text-decoration: none;
}

.weather-footer a:hover {
    text-decoration: underline;
}

/* Animasyonlar */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.weather-content, .weather-forecast {
    animation: fadeIn 0.5s ease-out;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.weather-icon {
    animation: pulse 2s infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading i {
    animation: spin 1s linear infinite;
}

/* Kaydırma Çubuğu Stilleri */
.forecast-items::-webkit-scrollbar {
    height: 5px;
}

.forecast-items::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

.forecast-items::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 5px;
}

.forecast-items::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* Responsive Tasarım */
@media (max-width: 480px) {
    .weather-widget {
        width: 100%;
        border-radius: 10px;
    }
    
    .temperature {
        font-size: 2.5rem;
    }
    
    .weather-description {
        font-size: 1rem;
    }
    
    .weather-details {
        grid-template-columns: repeat(2, 1fr);
    }
}

Adım 2: JavaScript Kodunu Yazma

Şimdi, uygulamanın işlevselliğini sağlayacak JavaScript kodunu yazalım:

script.js
// DOM elementlerini seçme
const cityInput = document.getElementById('cityInput');
const searchBtn = document.getElementById('searchBtn');
const locationName = document.getElementById('locationName');
const locationDate = document.getElementById('locationDate');
const loading = document.getElementById('loading');
const weatherContent = document.getElementById('weatherContent');
const errorMessage = document.getElementById('errorMessage');
const weatherIcon = document.getElementById('weatherIcon');
const temperature = document.getElementById('temperature');
const weatherDescription = document.getElementById('weatherDescription');
const humidity = document.getElementById('humidity');
const wind = document.getElementById('wind');
const pressure = document.getElementById('pressure');
const weatherForecast = document.getElementById('weatherForecast');
const forecastItems = document.getElementById('forecastItems');

// API Bilgileri
const API_KEY = 'YOUR_OPENWEATHERMAP_API_KEY'; // Kendi API anahtarınızı buraya girin
const WEATHER_API_URL = 'https://api.openweathermap.org/data/2.5/weather';
const FORECAST_API_URL = 'https://api.openweathermap.org/data/2.5/forecast';
const ICON_URL = 'https://openweathermap.org/img/wn/';

// Sayfa yüklendiğinde
document.addEventListener('DOMContentLoaded', () => {
    // Güncel tarihi göster
    updateDate();
    
    // Kullanıcının konumunu al
    getUserLocation();
    
    // Arama butonu tıklama olayı
    searchBtn.addEventListener('click', () => {
        const city = cityInput.value.trim();
        if (city) {
            getWeatherData(city);
        }
    });
    
    // Enter tuşu ile arama
    cityInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            const city = cityInput.value.trim();
            if (city) {
                getWeatherData(city);
            }
        }
    });
});

// Güncel tarihi güncelleme fonksiyonu
function updateDate() {
    const now = new Date();
    const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
    locationDate.textContent = now.toLocaleDateString('tr-TR', options);
}

// Kullanıcının konumunu alma fonksiyonu
function getUserLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            (position) => {
                const lat = position.coords.latitude;
                const lon = position.coords.longitude;
                getWeatherDataByCoords(lat, lon);
            },
            (error) => {
                console.error('Konum alınamadı:', error);
                // Varsayılan şehir olarak İstanbul'u göster
                getWeatherData('Istanbul');
            }
        );
    } else {
        console.error('Tarayıcınız Geolocation API\'sini desteklemiyor.');
        // Varsayılan şehir olarak İstanbul'u göster
        getWeatherData('Istanbul');
    }
}

// Koordinatlara göre hava durumu verilerini alma fonksiyonu
async function getWeatherDataByCoords(lat, lon) {
    showLoading();
    
    try {
        // Güncel hava durumu verilerini al
        const weatherResponse = await fetch(`${WEATHER_API_URL}?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric&lang=tr`);
        const weatherData = await weatherResponse.json();
        
        // Tahmin verilerini al
        const forecastResponse = await fetch(`${FORECAST_API_URL}?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric&lang=tr`);
        const forecastData = await forecastResponse.json();
        
        // Verileri göster
        displayWeatherData(weatherData);
        displayForecastData(forecastData);
    } catch (error) {
        console.error('Hava durumu verileri alınamadı:', error);
        showError();
    }
}

// Şehir adına göre hava durumu verilerini alma fonksiyonu
async function getWeatherData(city) {
    showLoading();
    
    try {
        // Güncel hava durumu verilerini al
        const weatherResponse = await fetch(`${WEATHER_API_URL}?q=${city}&appid=${API_KEY}&units=metric&lang=tr`);
        const weatherData = await weatherResponse.json();
        
        if (weatherData.cod === '404') {
            throw new Error('Şehir bulunamadı');
        }
        
        // Tahmin verilerini al
        const forecastResponse = await fetch(`${FORECAST_API_URL}?q=${city}&appid=${API_KEY}&units=metric&lang=tr`);
        const forecastData = await forecastResponse.json();
        
        // Verileri göster
        displayWeatherData(weatherData);
        displayForecastData(forecastData);
    } catch (error) {
        console.error('Hava durumu verileri alınamadı:', error);
        showError();
    }
}

// Hava durumu verilerini gösterme fonksiyonu
function displayWeatherData(data) {
    // Konum bilgisini güncelle
    locationName.textContent = `${data.name}, ${data.sys.country}`;
    
    // Hava durumu ikonunu güncelle
    weatherIcon.src = `${ICON_URL}${data.weather[0].icon}@2x.png`;
    weatherIcon.alt = data.weather[0].description;
    
    // Sıcaklık ve açıklamayı güncelle
    temperature.textContent = `${Math.round(data.main.temp)}°C`;
    weatherDescription.textContent = data.weather[0].description;
    
    // Detayları güncelle
    humidity.textContent = `${data.main.humidity}%`;
    wind.textContent = `${Math.round(data.wind.speed)} km/s`;
    pressure.textContent = `${data.main.pressure} hPa`;
    
    // İçeriği göster
    hideLoading();
    showWeatherContent();
}

// Tahmin verilerini gösterme fonksiyonu
function displayForecastData(data) {
    // Tahmin öğelerini temizle
    forecastItems.innerHTML = '';
    
    // Günlük tahminleri oluştur (her 8 veri 1 gün, günde 3 saatlik 8 tahmin var)
    const dailyData = data.list.filter((item, index) => index % 8 === 0);
    
    // Haftanın günleri
    const days = ['Paz', 'Pzt', 'Sal', 'Çar', 'Per', 'Cum', 'Cmt'];
    
    // Her gün için tahmin öğesi oluştur
    dailyData.forEach((day) => {
        const date = new Date(day.dt * 1000);
        const dayName = days[date.getDay()];
        const iconCode = day.weather[0].icon;
        const temp = Math.round(day.main.temp);
        
        const forecastItem = document.createElement('div');
        forecastItem.className = 'forecast-item';
        forecastItem.innerHTML = `
            ${dayName}
            
                
            
            ${temp}°
        `;
        
        forecastItems.appendChild(forecastItem);
    });
    
    // Tahmin bölümünü göster
    weatherForecast.style.display = 'block';
}

// Yükleme göstergesini gösterme fonksiyonu
function showLoading() {
    loading.style.display = 'block';
    weatherContent.style.display = 'none';
    errorMessage.style.display = 'none';
    weatherForecast.style.display = 'none';
}

// Yükleme göstergesini gizleme fonksiyonu
function hideLoading() {
    loading.style.display = 'none';
}

// Hava durumu içeriğini gösterme fonksiyonu
function showWeatherContent() {
    weatherContent.style.display = 'block';
    errorMessage.style.display = 'none';
}

// Hata mesajını gösterme fonksiyonu
function showError() {
    errorMessage.style.display = 'block';
    weatherContent.style.display = 'none';
    weatherForecast.style.display = 'none';
}

Adım 3: Uygulamayı Test Etme

Şimdi uygulamanızı test etme zamanı! Aşağıdaki adımları izleyin:

  1. JavaScript kodundaki YOUR_OPENWEATHERMAP_API_KEY kısmını kendi OpenWeatherMap API anahtarınızla değiştirin.
  2. Tüm dosyaları (index.html, style.css, script.js) aynı klasöre kaydedin.
  3. HTML dosyasını bir web tarayıcısında açın.
  4. Tarayıcı konum erişimi istediğinde izin verin veya reddedin (reddettiğinizde varsayılan olarak İstanbul'un hava durumu gösterilecektir).
  5. Arama kutusuna bir şehir adı girin (örneğin, "Ankara", "London") ve arama butonuna tıklayın veya Enter tuşuna basın.
  6. Hava durumu bilgilerinin ve 5 günlük tahminlerin doğru yüklendiğini doğrulayın.
  7. Geçersiz bir şehir adı girerek hata mesajının doğru gösterildiğini test edin.

İpucu: Tarayıcınızın geliştirici araçlarını (genellikle F12 tuşu ile açılır) kullanarak API isteklerini ve yanıtlarını inceleyebilir, JavaScript hatalarını ayıklayabilirsiniz.

Projeyi Geliştirme

Temel hava durumu widget'ını başarıyla oluşturduktan sonra, aşağıdaki özelliklerle projenizi geliştirebilirsiniz:

1. Sıcaklık Birimi Değiştirme

Kullanıcıların Celsius ve Fahrenheit arasında geçiş yapabilmesini sağlayan bir birim değiştirme düğmesi ekleyin:

temperature-unit.js
// HTML'e birim değiştirme düğmesi ekleyin
// <div class="unit-toggle">
//     <button id="celsiusBtn" class="active">°C</button>
//     <button id="fahrenheitBtn">°F</button>
// </div>

// DOM elementlerini seç
const celsiusBtn = document.getElementById('celsiusBtn');
const fahrenheitBtn = document.getElementById('fahrenheitBtn');

// Değişkenler
let isCelsius = true;
let currentTemp = 0;
let forecastTemps = [];

// Olay dinleyicileri
celsiusBtn.addEventListener('click', () => setTemperatureUnit(true));
fahrenheitBtn.addEventListener('click', () => setTemperatureUnit(false));

// Sıcaklık birimini ayarlama fonksiyonu
function setTemperatureUnit(celsius) {
    if (celsius === isCelsius) return;
    
    isCelsius = celsius;
    
    // Buton stillerini güncelle
    if (isCelsius) {
        celsiusBtn.classList.add('active');
        fahrenheitBtn.classList.remove('active');
    } else {
        celsiusBtn.classList.remove('active');
        fahrenheitBtn.classList.add('active');
    }
    
    // Sıcaklık gösterimini güncelle
    updateTemperatureDisplay();
}

// Sıcaklık gösterimini güncelleme fonksiyonu
function updateTemperatureDisplay() {
    // Ana sıcaklık
    if (isCelsius) {
        temperature.textContent = `${Math.round(currentTemp)}°C`;
    } else {
        const fahrenheit = (currentTemp * 9/5) + 32;
        temperature.textContent = `${Math.round(fahrenheit)}°F`;
    }
    
    // Tahmin sıcaklıkları
    const forecastElements = document.querySelectorAll('.forecast-temp');
    forecastElements.forEach((element, index) => {
        if (index < forecastTemps.length) {
            if (isCelsius) {
                element.textContent = `${Math.round(forecastTemps[index])}°`;
            } else {
                const fahrenheit = (forecastTemps[index] * 9/5) + 32;
                element.textContent = `${Math.round(fahrenheit)}°`;
            }
        }
    });
}

// Hava durumu verilerini gösterme fonksiyonunu güncelle
function displayWeatherData(data) {
    // ... mevcut kod ...
    
    // Sıcaklığı kaydet
    currentTemp = data.main.temp;
    
    // Sıcaklık gösterimini güncelle
    if (isCelsius) {
        temperature.textContent = `${Math.round(currentTemp)}°C`;
    } else {
        const fahrenheit = (currentTemp * 9/5) + 32;
        temperature.textContent = `${Math.round(fahrenheit)}°F`;
    }
    
    // ... mevcut kod ...
}

// Tahmin verilerini gösterme fonksiyonunu güncelle
function displayForecastData(data) {
    // ... mevcut kod ...
    
    // Tahmin sıcaklıklarını kaydet
    forecastTemps = dailyData.map(day => day.main.temp);
    
    // ... mevcut kod ...
}

2. Hava Durumuna Göre Arkaplan Değiştirme

Hava durumuna göre widget'ın arkaplan rengini veya görselini değiştirin:

dynamic-background.js
// Hava durumu kodlarına göre arkaplan renkleri
const backgroundColors = {
    // Güneşli
    '01d': 'linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%)',
    '01n': 'linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%)',
    
    // Parçalı bulutlu
    '02d': 'linear-gradient(135deg, #5c9bd1 0%, #a1c4fd 100%)',
    '02n': 'linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%)',
    
    // Bulutlu
    '03d': 'linear-gradient(135deg, #8e9eab 0%, #eef2f3 100%)',
    '03n': 'linear-gradient(135deg, #4b6cb7 0%, #182848 100%)',
    '04d': 'linear-gradient(135deg, #8e9eab 0%, #eef2f3 100%)',
    '04n': 'linear-gradient(135deg, #4b6cb7 0%, #182848 100%)',
    
    // Yağmurlu
    '09d': 'linear-gradient(135deg, #616161 0%, #9bc5c3 100%)',
    '09n': 'linear-gradient(135deg, #616161 0%, #9bc5c3 100%)',
    '10d': 'linear-gradient(135deg, #616161 0%, #9bc5c3 100%)',
    '10n': 'linear-gradient(135deg, #616161 0%, #9bc5c3 100%)',
    
    // Gök gürültülü
    '11d': 'linear-gradient(135deg, #4b79a1 0%, #283e51 100%)',
    '11n': 'linear-gradient(135deg, #4b79a1 0%, #283e51 100%)',
    
    // Karlı
    '13d': 'linear-gradient(135deg, #e6dada 0%, #274046 100%)',
    '13n': 'linear-gradient(135deg, #e6dada 0%, #274046 100%)',
    
    // Sisli
    '50d': 'linear-gradient(135deg, #d7d2cc 0%, #304352 100%)',
    '50n': 'linear-gradient(135deg, #d7d2cc 0%, #304352 100%)'
};

// Hava durumu verilerini gösterme fonksiyonunu güncelle
function displayWeatherData(data) {
    // ... mevcut kod ...
    
    // Hava durumu ikonunu güncelle
    const iconCode = data.weather[0].icon;
    weatherIcon.src = `${ICON_URL}${iconCode}@2x.png`;
    weatherIcon.alt = data.weather[0].description;
    
    // Arkaplanı güncelle
    updateBackground(iconCode);
    
    // ... mevcut kod ...
}

// Arkaplanı güncelleme fonksiyonu
function updateBackground(iconCode) {
    const weatherHeader = document.querySelector('.weather-header');
    
    // İkon koduna göre arkaplan rengini ayarla
    if (backgroundColors[iconCode]) {
        weatherHeader.style.background = backgroundColors[iconCode];
    } else {
        // Varsayılan arkaplan
        weatherHeader.style.background = 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)';
    }
}

3. Saatlik Tahmin Ekleme

5 günlük tahminlere ek olarak, günün saatlik tahminlerini gösteren bir bölüm ekleyin:

hourly-forecast.js
// HTML'e saatlik tahmin bölümü ekleyin
// <div class="weather-hourly" id="weatherHourly" style="display: none;">
//     <div class="hourly-title">Saatlik Tahmin</div>
//     <div class="hourly-items" id="hourlyItems">
//         <!-- Saatlik tahmin öğeleri buraya dinamik olarak eklenecek -->
//     </div>
// </div>

// DOM elementlerini seç
const weatherHourly = document.getElementById('weatherHourly');
const hourlyItems = document.getElementById('hourlyItems');

// Şehir adına göre hava durumu verilerini alma fonksiyonunu güncelle
async function getWeatherData(city) {
    showLoading();
    
    try {
        // ... mevcut kod ...
        
        // Saatlik tahmin verilerini al (OpenWeatherMap One Call API)
        const lat = weatherData.coord.lat;
        const lon = weatherData.coord.lon;
        const hourlyResponse = await fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&exclude=minutely,alerts&appid=${API_KEY}&units=metric&lang=tr`);
        const hourlyData = await hourlyResponse.json();
        
        // Verileri göster
        displayWeatherData(weatherData);
        displayForecastData(forecastData);
        displayHourlyData(hourlyData);
    } catch (error) {
        console.error('Hava durumu verileri alınamadı:', error);
        showError();
    }
}

// Saatlik tahmin verilerini gösterme fonksiyonu
function displayHourlyData(data) {
    // Saatlik tahmin öğelerini temizle
    hourlyItems.innerHTML = '';
    
    // Sonraki 24 saatlik veriyi al (3 saatlik aralıklarla)
    const hourlyData = data.hourly.slice(0, 8);
    
    // Her saat için tahmin öğesi oluştur
    hourlyData.forEach((hour) => {
        const date = new Date(hour.dt * 1000);
        const hourText = date.getHours() + ':00';
        const iconCode = hour.weather[0].icon;
        const temp = Math.round(hour.temp);
        
        const hourlyItem = document.createElement('div');
        hourlyItem.className = 'hourly-item';
        hourlyItem.innerHTML = `
            ${hourText}
            
                
            
            ${temp}°
        `;
        
        hourlyItems.appendChild(hourlyItem);
    });
    
    // Saatlik tahmin bölümünü göster
    weatherHourly.style.display = 'block';
}

// Yükleme göstergesini gösterme fonksiyonunu güncelle
function showLoading() {
    loading.style.display = 'block';
    weatherContent.style.display = 'none';
    errorMessage.style.display = 'none';
    weatherForecast.style.display = 'none';
    weatherHourly.style.display = 'none';
}

Geliştirme Zorlukları

Hava durumu widget'ınızı daha da geliştirmek için aşağıdaki zorlukları deneyebilirsiniz:

  1. Çoklu Konum Kaydetme: Kullanıcıların birden fazla konum ekleyebilmesini ve aralarında geçiş yapabilmesini sağlayın.
  2. Hava Durumu Haritası: OpenWeatherMap'in harita katmanlarını kullanarak hava durumu haritası ekleyin.
  3. Hava Durumu Bildirimleri: Kullanıcıların belirli hava koşulları için bildirim alabilmesini sağlayın (örneğin, yağmur yağacağında).
  4. Hava Kalitesi İndeksi: Hava kalitesi verilerini ekleyin ve görselleştirin.
  5. Güneş Doğuş/Batış Zamanları: Güneşin doğuş ve batış zamanlarını gösteren bir grafik ekleyin.

Sonuç ve Öğrenilen Dersler

Bu projede, JavaScript kullanarak bir hava durumu widget'ı geliştirdik. Bu süreçte şunları öğrendik:

  • Hava durumu API'lerini kullanarak veri çekmeyi
  • Fetch API ve async/await ile eşzamansız işlemleri yönetmeyi
  • JSON verilerini ayrıştırmayı ve işlemeyi
  • API'den gelen verileri kullanarak dinamik bir kullanıcı arayüzü oluşturmayı
  • Arama fonksiyonu ve sonuçları gösterme işlevselliği geliştirmeyi
  • Hata yönetimi ve yükleme durumlarını kullanıcıya göstermeyi
  • CSS ile modern ve duyarlı bir widget tasarlamayı
  • Geolocation API kullanarak kullanıcının konumunu almayı

Bu proje, harici API'lerle çalışma ve modern JavaScript tekniklerini kullanarak dinamik web uygulamaları oluşturma konusunda önemli bir pratik deneyim sunmuştur. Öğrendiğiniz beceriler, çeşitli web servisleriyle entegre olan daha karmaşık uygulamalar geliştirmenize olanak tanır.