function attachEvents() {
    const locationElementRef = document.getElementById('location');
    const forecastElementRef = document.getElementById('forecast');
    const currentElementRef = document.getElementById('current');
    const upcomingElementRef = document.getElementById('upcoming');
    const submitBtnElementRef = document.getElementById('submit');
    submitBtnElementRef.addEventListener('click', onsubmitBtnClick);

    const htmlEntities = {
        Sunny: "☀",
        "Partly sunny": "⛅",
        Overcast: "☁",
        Rain: "☔",
        Degrees: "°"
    };

    async function onsubmitBtnClick() {
        try {
            const url = 'http://localhost:3030/jsonstore/forecaster/locations';
            let response = await fetch(url);
            let data = await response.json();
            let { code } = data.find(el => el.name === locationElementRef.value);
            forecastElementRef.style.display = 'block';
            await getCurrentDayForecast(code);
            await getUpcomingDaysForecast(code);
        } catch {
            forecastElementRef.style.display = 'block';
            forecastElementRef.textContent = 'Error';
        }
    }

    async function getCurrentDayForecast(code) {
        try {
            let currentDayUrl = `http://localhost:3030/jsonstore/forecaster/today/${code}`;
            let response = await fetch(currentDayUrl);
            let data = await response.json();

            currentElementRef.innerHTML = `<div class="label">Current conditions</div>
            <div class="forecasts">
            <span class="condition symbol">${htmlEntities[data.forecast.condition]}</span>
            <span class="condition">
             <span class="forecast-data">${data.name}</span>
             <span class="forecast-data">${data.forecast.low}${htmlEntities.Degrees}/${data.forecast.high}${htmlEntities.Degrees}</span>
             <span class="forecast-data">${data.forecast.condition}</span>
            </span>
            </div>`
        } catch {
            forecastElementRef.style.display = 'block';
            forecastElementRef.textContent = 'Error';
        }
    }

    async function getUpcomingDaysForecast(code) {
        try {
            let url = `http://localhost:3030/jsonstore/forecaster/upcoming/${code}`;
            let response = await fetch(url);
            let data = await response.json();

            upcomingElementRef.innerHTML = `<div class="label">Three-day forecast</div>
            <div class="forecast-info">
            <span class="upcoming">
             <span class="symbol">${htmlEntities[data.forecast[0].condition]}</span>
             <span class="forecast-data">${data.forecast[0].low}${htmlEntities.Degrees}/${data.forecast[0].high}${htmlEntities.Degrees}</span>
             <span class="forecast-data">${data.forecast[0].condition}</span>
            </span>
            <span class="upcoming">
             <span class="symbol">${htmlEntities[data.forecast[1].condition]}</span>
             <span class="forecast-data">${data.forecast[1].low}${htmlEntities.Degrees}/${data.forecast[1].high}${htmlEntities.Degrees}</span>
             <span class="forecast-data">${data.forecast[1].condition}</span>
           </span>
           <span class="upcoming">
            <span class="symbol">${htmlEntities[data.forecast[2].condition]}</span>
            <span class="forecast-data">${data.forecast[2].low}${htmlEntities.Degrees}/${data.forecast[2].high}${htmlEntities.Degrees}</span>
            <span class="forecast-data">${data.forecast[2].condition}</span>
          </span>
          </div>`
        } catch {
            forecastElementRef.style.display = 'block';
            forecastElementRef.textContent = 'Error';
        }
    }
}