script.js

const elements = {
    city: document.querySelector('.location'),
    temp: document.querySelector('.weather-temp'),
    desc: document.querySelector('.weather-desc'),
    dayName: document.querySelector('.date-dayname'),
    date: document.querySelector('.date-day'),
    wind: document.querySelector('#wind-val'),
    humidity: document.querySelector('#humidity-val'),
    precip: document.querySelector('#precip-val'),
    icon: document.querySelector('.weather-icon'),
    weekList: document.querySelector('.week-list'),
    weatherSide: document.querySelector('.weather-side'),
    searchBtn: document.querySelector('.location-button')
};
let globalWeatherData = null;
document.addEventListener('DOMContentLoaded', () => {
    getWeather('Alanya');
});
elements.searchBtn.addEventListener('click', () => {
    const city = prompt("Şehir adı girin (Örn: Antalya, Berlin):");
    if (city) getWeather(city);
});

async function getWeather(city) {
    try {
        const geoRes = await fetch(`https://geocoding-api.open-meteo.com/v1/search?name=${city}&count=1&language=tr&format=json`);
        const geoData = await geoRes.json();
        if (!geoData.results) {
            alert("Şehir bulunamadı.");
            return;
        }
        const { latitude, longitude, name, country_code } = geoData.results[0];
        elements.city.innerHTML = `<i data-feather="map-pin"></i> ${name}, ${country_code}`;
        const weatherUrl = `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current=temperature_2m,relative_humidity_2m,weather_code,wind_speed_10m&daily=weather_code,temperature_2m_max,temperature_2m_min,precipitation_probability_max,wind_speed_10m_max,relative_humidity_2m_mean&timezone=auto`;
        const weatherRes = await fetch(weatherUrl);
        globalWeatherData = await weatherRes.json();
        updateUI(0);
        renderWeekList();
    } catch (error) {
        console.error("Hata:", error);
        alert("Veri alınamadı.");
    }
}

function updateUI(index) {
    if (!globalWeatherData) return;

    const daily = globalWeatherData.daily;
    const current = globalWeatherData.current;
    
    const dateObj = new Date(daily.time[index]);
    elements.dayName.textContent = dateObj.toLocaleDateString('tr-TR', { weekday: 'long' });
    elements.date.textContent = dateObj.toLocaleDateString('tr-TR', { day: 'numeric', month: 'short', year: 'numeric' });

    const weatherCode = daily.weather_code[index];
    const weatherInfo = getWeatherStatus(weatherCode);
    
    elements.desc.textContent = weatherInfo.desc;
    elements.icon.setAttribute('data-feather', weatherInfo.icon);

    changeBackground(weatherCode);

    if (index === 0) {
        elements.temp.textContent = `${Math.round(current.temperature_2m)}°C`;
        elements.wind.textContent = `${current.wind_speed_10m} km/s`;
        elements.humidity.textContent = `${current.relative_humidity_2m} %`;
        elements.precip.textContent = `${daily.precipitation_probability_max[0]} %`; 
    } else {
        elements.temp.textContent = `${Math.round(daily.temperature_2m_max[index])}°C`; 
        elements.wind.textContent = `${Math.round(daily.wind_speed_10m_max[index])} km/s`; 
        elements.humidity.textContent = `${Math.round(daily.relative_humidity_2m_mean[index])} %`; 
        elements.precip.textContent = `${daily.precipitation_probability_max[index]} %`; 
    }
    feather.replace();
}
function renderWeekList() {
    const daily = globalWeatherData.daily;
    elements.weekList.innerHTML = "";
    for (let i = 0; i < 4; i++) {
        const date = new Date(daily.time[i]);
        const dayName = date.toLocaleDateString('tr-TR', { weekday: 'short' }); 
        const temp = Math.round(daily.temperature_2m_max[i]);
        const info = getWeatherStatus(daily.weather_code[i]);

        const li = document.createElement('li');
        if (i === 0) li.classList.add('active'); 

        li.innerHTML = `
            <i data-feather="${info.icon}"></i>
            <span class="day-name">${dayName}</span>
            <span class="day-temp">${temp}°C</span>
        `;

        li.addEventListener('click', () => {
            document.querySelectorAll('.week-list li').forEach(el => el.classList.remove('active'));
            li.classList.add('active');
            updateUI(i);
        });
        elements.weekList.appendChild(li);
    }
    feather.replace();
}

function getWeatherStatus(code) {
    if (code === 0) return { desc: "Güneşli", icon: "sun" };
    if (code >= 1 && code <= 3) return { desc: "Parçalı Bulutlu", icon: "cloud" };
    if (code >= 45 && code <= 48) return { desc: "Sisli", icon: "align-justify" };
    if (code >= 51 && code <= 67) return { desc: "Yağmurlu", icon: "cloud-drizzle" };
    if (code >= 71 && code <= 77) return { desc: "Karlı", icon: "cloud-snow" };
    if (code >= 80 && code <= 82) return { desc: "Sağanak", icon: "cloud-rain" };
    if (code >= 95) return { desc: "Fırtına", icon: "cloud-lightning" };
    return { desc: "Bilinmiyor", icon: "help-circle" };
}

function changeBackground(code) {
    let url = "";
    if (code === 0) url = "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=800&q=80"; 
    else if (code >= 1 && code <= 3) url = "https://images.unsplash.com/photo-1534088568595-a066f410bcda?auto=format&fit=crop&w=800&q=80"; 
    else if (code >= 45 && code <= 48) url = "https://images.unsplash.com/photo-1485230905905-ec40e118134a?auto=format&fit=crop&w=800&q=80"; 
    else if ((code >= 51 && code <= 67) || (code >= 80 && code <= 82)) url = "https://images.unsplash.com/photo-1515694346937-94d85e41e6f0?auto=format&fit=crop&w=800&q=80"; 
    else if (code >= 71 && code <= 77) url = "https://images.unsplash.com/photo-1478265409131-1f65c88f965c?auto=format&fit=crop&w=800&q=80"; 
    else if (code >= 95) url = "https://images.unsplash.com/photo-1605727216801-e27ce1d0cc28?auto=format&fit=crop&w=800&q=80"; 
    else url = "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=800&q=80";

    elements.weatherSide.style.backgroundImage = `url('${url}')`;
}