03. Forecaster

async function attachEvents() {
    const location = document.getElementById('location');
    const getBtn = document.getElementById('submit');

    const res = await fetch("http://localhost:3030/jsonstore/forecaster/locations");
    const data = await res.json();

    getBtn.addEventListener('click', getData);

    async function getData() {

        try {
        const code = data.filter(x => x.name == location.value)[0].code;
        const currentCondit = await fetch(`http://localhost:3030/jsonstore/forecaster/today/${code}`);
        const currentWeather = await currentCondit.json();

        const weatherData = {
            locationName: currentWeather.name,
            low: currentWeather.forecast.low,
            high: currentWeather.forecast.high,
            condition: currentWeather.forecast.condition
        }

        const threeDayCondit = await fetch(`http://localhost:3030/jsonstore/forecaster/upcoming/${code}`);
        const threeDayWeather = await threeDayCondit.json();

        const threeDayData = {
            locationName: currentWeather.name,
            firstDay: {
                low: threeDayWeather.forecast[0].low,
                high: threeDayWeather.forecast[0].high,
                condition: threeDayWeather.forecast[0].condition
            },
            secondDay: {
                low: threeDayWeather.forecast[1].low,
                high: threeDayWeather.forecast[1].high,
                condition: threeDayWeather.forecast[1].condition
            },
            thirdDay: {
                low: threeDayWeather.forecast[2].low,
                high: threeDayWeather.forecast[2].high,
                condition: threeDayWeather.forecast[2].condition
            },
        }

        const weatherSymbol = {
            "Sunny": '&#x2600',
            "Partly sunny": '&#x26C5',
            "Overcast": '&#x2601',
            "Rain": '&#x2614'
        }
        document.getElementById('forecast').style.display = 'block';

        const currentDayDiv = document.getElementById('current');
        const upcomingDaysDiv = document.getElementById('upcoming');

        const singleDayDiv = document.createElement('div');
        singleDayDiv.classList.add('forecasts');
        singleDayDiv.innerHTML = `
        <span class="condition symbol">${weatherSymbol[weatherData.condition]}</span>
        <span class="condition">
            <span class="forecast-data">${weatherData.locationName}</span>
            <span class="forecast-data">${weatherData.low}\&#176/${weatherData.high}\&#176</span>
            <span class="forecast-data">${weatherData.condition}</span>
        </span>
        `
        currentDayDiv.appendChild(singleDayDiv);

        const threeDayDiv = document.createElement('div');
        threeDayDiv.classList.add('forecast-info');
        threeDayDiv.innerHTML = `
        <span class="upcoming">
            <span class="symbol">${weatherSymbol[threeDayData.firstDay.condition]}</span>
            <span class="forecast-data">${threeDayData.firstDay.low}\&#176/${threeDayData.firstDay.high}\&#176</span>
            <span class="forecast-data">${threeDayData.firstDay.condition}</span>
        </span>
        <span class="upcoming">
            <span class="symbol">${weatherSymbol[threeDayData.secondDay.condition]}</span>
            <span class="forecast-data">${threeDayData.secondDay.low}\&#176/${threeDayData.secondDay.high}\&#176</span>
            <span class="forecast-data">${threeDayData.secondDay.condition}</span>
        </span>
        <span class="upcoming">
            <span class="symbol">${weatherSymbol[threeDayData.thirdDay.condition]}</span>
            <span class="forecast-data">${threeDayData.thirdDay.low}\&#176/${threeDayData.thirdDay.high}\&#176</span>
            <span class="forecast-data">${threeDayData.thirdDay.condition}</span>
        </span>
        `
            upcomingDaysDiv.appendChild(threeDayDiv);
        } catch (err) {
            document.getElementById('forecast').style.display = 'block';
            document.getElementById('forecast').innerHTML = 'Error';
        }
    }
}

attachEvents();