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 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) => {

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

                if (arrOfCities.includes(locationElement)) {

                    return response.json();

                } else {

                    throw new Error(`Invalid input!`);

                }

            })

            .then(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 => {

                                console.log(result);

                                function getConditionSymbol(condition) {

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


                                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');

                                if (locationElement === 'London') {

                                    citySpan.textContent = 'London, UK';

                                    tempSpan.textContent = `${result.forecast.low}/${result.forecast.high}`;

                                    conditionSpan.textContent = result.forecast.condition;

                                    dataSpan.appendChild(citySpan);

                                    dataSpan.appendChild(tempSpan);

                                    dataSpan.appendChild(conditionSpan);

                                    divForecasts.appendChild(dataSpan);

                                    console.log(dataSpan);

                                }


                            })

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

                        fetch(url3)

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

                            .then(result => {

                                // console.log(result);

                                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();