main.js

let container = document.querySelector('.container'),
searchCity = document.querySelector('.searchcity'),
btnSearch = document.querySelector('.btn-search'),
cityLocation = document.querySelector('.city'),
dateTxt = document.querySelector('.date-txt'),
cloud = document.querySelector('.cloud'),
temperature = document.querySelector('.temp'),
weather = document.querySelector('.weather'),
humdityDegree = document.querySelector('.hum-degree'),
windDegree = document.querySelector('.wind-degree'),
forecastSection = document.querySelector('.forecast-section');

let sectionFound = document.querySelector('.section-found'),
sectionSearch = document.querySelector('.section-search'),
sectionNotFound = document.querySelector('.not-found-search');

btnSearch.onclick = function() {
    if (searchCity.value.trim() !== "") {
        updateWeather(searchCity.value);
        searchCity.value = "";
    }
}

searchCity.onkeydown = function(e) {
    if (e.key === 'Enter' && searchCity.value.trim() !== "") {
        updateWeather(searchCity.value);
        searchCity.value = "";
    }
}

const apiKey = '4db3dac04d6dce8c7b6cab87350baf9d';

async function getFetchData(endPoint,city) {
    const apiUrl = `https://api.openweathermap.org/data/2.5/${endPoint}?q=${city}&appid=${apiKey}&units=metric`;
    let response = await fetch(apiUrl);
    return response.json();
}

function getCurrentDate() {
    let currentDate = new Date();
    let newDate = {
        weekday: 'short',
        day: '2-digit',
        month: 'short'
    }
    return currentDate.toLocaleDateString('en-GB', newDate);
}

function getImage(id) {
    if (id >= 200 && id <= 232) return "thunderstorm.svg";
    else if (id >= 300 && id <= 321) return "drizzle.svg";
    else if (id >= 500 && id <= 521) return "rain.svg";
    else if (id >= 600 && id <= 622) return "snow.svg";
    else if (id === 800) return "clear.svg";
    else if (id >= 801 && id <= 804) return "clouds.svg";
    else return "atmosphere.svg";
}

function updateTheme(mainWeather) {
    // إزالة أي كلاس قديم
    document.body.classList.remove('weather-clear', 'weather-rain', 'weather-clouds', 'weather-drizzle', 'weather-thunderstorm', 'weather-atmosphere');
    
    // إضافة الكلاس الجديد بناءً على الحالة (تحويل للنص الصغير للتأكد من المطابقة)
    const weatherClass = `weather-${mainWeather.toLowerCase()}`;
    document.body.classList.add(weatherClass);
}

async function updateWeather(city) {
    let weatherData = await getFetchData('weather', city);

    if (weatherData.cod !== 200) {
    showSection(sectionNotFound);
        return;
    }
    const {
        name: country,
        main: {temp,humidity},
        weather: [{id,main}],
        wind: {speed}
    } = weatherData

    cityLocation.textContent = country;
    temperature.textContent = Math.round(temp) + "" + '°C';
    weather.textContent = main;
    humdityDegree.textContent = humidity + "%";
    windDegree.textContent = speed + "" + 'M/s';
    dateTxt.textContent = getCurrentDate();
    cloud.src = `assets/assets/weather/${getImage(id)}`;

    updateTheme(main)
    showSection(sectionFound);
    await updateForecast(city);
}

async function updateForecast(city) {
    let forecastData = await getFetchData('forecast', city);
    let timeTaken = '12:00:00';
    let todayDate = new Date().toISOString().split('T')[0];
    
    forecastSection.innerHTML = "";

    forecastData.list.forEach(item =>{
        if (item.dt_txt.includes(timeTaken) && !item.dt_txt.includes(todayDate)) {
            forecastItem(item);
        };
    })
}

function forecastItem(itemData) {
    const {
        dt_txt: date,
        main: {temp},
        weather: [{id}]
    } = itemData

    let foreDate = new Date(date);
    
    let newForeDate = {
        day: '2-digit',
        month: 'short'
    }
    let resultDate = foreDate.toLocaleDateString('en-GB', newForeDate);

    let forecastHtml = `
                <div class="forecast">
                    <div class="date-info">${resultDate}</div>
                    <img class="fore-cloud"  src="assets/assets/weather/${getImage(id)}" alt="">
                    <h5 class="fore-degree">${Math.round(temp)} °C</h5>
                </div>`;

    forecastSection.insertAdjacentHTML('beforeend', forecastHtml);

}

function showSection(section) {
    [sectionFound,sectionSearch,sectionNotFound].forEach(sec =>{
        sec.style.display = 'none';
    })
    section.style.display = 'block';
}