index.js

const apiKey  = '7c4cb46df9fbfcc242ff7d8ecb258ac3';
const locButton = document.querySelector('.loc-button');
const todayInfo = document.querySelector('.today-info');
const todayWeatherIcon = document.querySelector('.today-weather i');
const todayTemp = document.querySelector('.weather-temp');
const daysList =  document.querySelector('.days-list');

// Mappping of weather condition codes to icon class names(Depending on Opemweather API response)
const weatherIconMap = {
    '01d' : 'sun',
    '01n' : 'moon',
    '02d' : 'sun',
    '02n' : 'moon',
    '03d' : 'cloud',
    '03n' : 'cloud',
    '04d' : 'cloud',
    '04n' : 'cloud',
    '09d' : 'cloud-rain',
    '09n' : 'cloud-rain',
    '10d' : 'cloud-rain',
    '10n' : 'cloud-rain',
    '11d' : 'cloud-lightning',
    '11n' : 'cloud-lightning',
    '13d' : 'cloud-snow',
    '13n' : 'cloud-snow',
    '50d' : 'water',
    '50n' :'water',
};

function fetchWeatherData(location){
    //Construct the APi url with the location and api key
    const apiUrl = `https://api.openweathermap.org/data/2.5/forecast?q=${location}&appid=${apiKey}&units=metric`;

    //Fetch weather data from api 
    fetch(apiUrl).then(response => response.json()).then(data => {
        //Update today info
        const todayWeather = data.list[0].weather[0].description;
        const todayTemperature = `${Math.round(data.list[0].main.temp)}°C`;
        const todayWeatherIconCode = data.list[0].weather[0].icon;

        todayInfo.querySelector('h2').textContent = new Date().toLocaleDateString('en', {weekday: 'long'});
        todayInfo.querySelector('span').textContent = new Date().toLocaleDateString('en', {day: 'numeric', month: 'long', year: 'numeric'});
        todayWeatherIcon.className = `bx bx-${weatherIconMap[todayWeatherIconCode]}`;
        todayTemp.textContent = todayTemperature;

        // Update location and weather description in the "lef-information" section
        const locationElement = document.querySelector('today-info > div > span');
        locationElement.textContent = `${data.city.name}, ${data.city.country}`;
       
        const weatherDescriptionElement  = document.querySelector('.today-weather > h3');
        weatherDescriptionElement.textContent = todayWeather;

        //Update todays information  in the "day-info" section
        const todayPrecipitation = `${data.list[0].pop}%`;
        const todayHumidity = `${data.list[0].main.humidity}%`;    
        const todayWindSpeed = `${data.list[0].wind.speed} km/h`;

        const dayInfocontainer = document.querySelector('.day-info');
        dayInfocontainer.innerHTML = `
        
        <div>
            <span class="name">PRECIPTITATION</span>
            <span class="number">${todayPrecipitation}</span>
       </div>
       <div>
            <span class="name">HUMIDITY</span>
            <span class="number">${todayHumidity}</span>
      </div>
      <div>
      <span class="name">WIND SPEED</span>
      <span class="number">${todayWindSpeed}</span>
      </div>
 
       ` ;
       
      // Update next 4 days weather     
      const today = new Date();
      const nextDaysData = data.list.slice(1);

      const uniqueDays = new Set();
      let count = 0;
      daysList.innerHTML = '';
      for(const dayData of nextDaysData){
        const forecastDate = new Date(dayData.dt_txt);
        const dayAbbreviation = forecastDate.toLocaleDateString('en', {weekday: 'short'});
        const dayTemp = `${Math.round(dayData.main.temp)}°C`;
        const iconCode = dayData.weather[0].icon;

        //Ensure the day isnt duplicate and today 
        if(!uniqueDays.has(dayAbbreviation) && forecastDate.getDate() !== today.getDate()){uniqueDays.add(dayAbbreviation);
        daysList.innerHTML += `
        
        <li>
            <i class= 'bx bx-${weatherIconMap[iconCode]}'></i>
            <span>${dayAbbreviation}</span>
            <span class="day-temp">${dayTemp}</span>
        </li>

        `;
        count ++;
    }


        // Stop after getting 4 distinct days
        if (count === 4) break;
      }  
    }).catch(error => {
        alert(`Error fetching weather data: ${error}(Api Error)`);
    });
    }

    // Fetching weather data on documents load for default location (Poland)
    document.addEventListener(`DOMContentLoaded`, () => {
        const defaultLocation = 'Poland';
        fetchWeatherData(defaultLocation);
    });

    locButton.addEventListener('click', () => {
        const location = prompt('Enter a location :'); 
        if(!location) return;

        fetchWeatherData(location);

    });