function attachEvents() {


    let url = `http://localhost:3030/jsonstore/forecaster/locations`;

    let inputBtnElement = document.getElementById('submit');

    let divForecastElement = document.getElementById('forecast');

    inputBtnElement.addEventListener('click', (e) => {

        divForecastElement.style.display = 'none';

        let divUpcoming = document.getElementById('upcoming');


        let divContent = document.getElementById('content');

        let divForecasts = document.querySelectorAll('.forecasts');

        if (divContent.lastChild.textContent === 'Error: Invalid input!') {

            let h1Element = document.querySelector('.error');

            h1Element.remove();

        } else if (divForecasts.length !== 0) {

            divForecasts[0].remove();

        }

        let locationElement = document.getElementById('location').value;

        fetch(url)

            .then((response) => {

                console.log(response);

                let arrOfCities = ['London', 'New York', 'Barcelona'];

                if (arrOfCities.includes(locationElement)) {

                    return response.json();

                } else {

                    throw new Error(`Invalid input!`);

                }

            })

            .then(result => {

                console.log(result);

                result.forEach(obj => {

                    if (obj.name === locationElement) {

                        let url2 = `http://localhost:3030/jsonstore/forecaster/today/${obj.code}`;

                        fetch(url2)

                            .then(response => response.json())

                            .then(result => {

                                function getConditionSymbol(condition) {

                                    switch (condition) {
                                        case 'Sunny':
                                            return '&#x2600';
                                        case 'Partly sunny':
                                            return '&#x26C5';
                                        case 'Overcast':
                                            return '&#x2601';
                                        case 'Rain':
                                            return '&#x2614';
                                    }
                                }


                                let divCurrent = document.getElementById('current');

                                let divForecasts = document.createElement('div');

                                divForecasts.classList.add('forecasts');

                                let spanCondition = document.createElement('span');

                                spanCondition.classList.add('condition');

                                spanCondition.classList.add('symbol');

                                spanCondition.innerHTML = getConditionSymbol(result.forecast.condition);

                                divForecasts.appendChild(spanCondition);

                                divCurrent.appendChild(divForecasts);

                                let dataSpan = document.createElement('span');

                                let citySpan = document.createElement('span');

                                let tempSpan = document.createElement('span');

                                let conditionSpan = document.createElement('span');

                                dataSpan.classList.add('condition');

                                citySpan.classList.add('forecast-data');

                                tempSpan.classList.add('forecast-data');

                                conditionSpan.classList.add('forecast-data');

                                citySpan.textContent = result.name;

                                tempSpan.innerHTML = `${result.forecast.low}&#176/${result.forecast.high}&#176`;

                                conditionSpan.textContent = result.forecast.condition;

                                dataSpan.appendChild(citySpan);

                                dataSpan.appendChild(tempSpan);

                                dataSpan.appendChild(conditionSpan);

                                divForecasts.appendChild(dataSpan);

                            })

                        let url3 = `http://localhost:3030/jsonstore/forecaster/upcoming/${obj.code}`;

                        fetch(url3)

                            .then(response => response.json())

                            .then(result => {

                                function getConditionSymbol(condition) {

                                    switch (condition) {
                                        case 'Sunny':
                                            return '&#x2600';
                                        case 'Partly sunny':
                                            return '&#x26C5';
                                        case 'Overcast':
                                            return '&#x2601';
                                        case 'Rain':
                                            return '&#x2614';
                                    }
                                }


                                let divForecasts = document.createElement('div');

                                divForecasts.classList.add('forecasts-info');

                                let divUpcoming = document.getElementById('upcoming');

                                for (let obj of result.forecast) {

                                    console.log(obj);

                                    let spanUpcoming = document.createElement('span');

                                    spanUpcoming.classList.add('upcoming');

                                    let spanSymbol = document.createElement('span');

                                    spanSymbol.classList.add('symbol');

                                    spanSymbol.innerHTML = getConditionSymbol(obj.condition);

                                    let tempSpan = document.createElement('span');

                                    let conditionSpan = document.createElement('span');


                                    tempSpan.classList.add('forecast-data');

                                    conditionSpan.classList.add('forecast-data');

                                    tempSpan.innerHTML = `${obj.low}&#176/${obj.high}&#176`;

                                    conditionSpan.textContent = obj.condition;

                                    spanUpcoming.appendChild(spanSymbol);

                                    spanUpcoming.appendChild(tempSpan);

                                    spanUpcoming.appendChild(conditionSpan);

                                    divForecasts.appendChild(spanUpcoming);

                                }

                                divUpcoming.appendChild(divForecasts);

                                divForecastElement.style.display = 'inline-block';

                            })

                    }

                })


            })

            .catch(error => {

                let divContent = document.getElementById('content');

                let errorElement = document.createElement('h1');

                errorElement.classList.add('error');

                errorElement.textContent = error;

                divContent.appendChild(errorElement);

            })

    })

}



attachEvents();