function attachEvents() {
    const getWeathBtn = document.querySelector('#submit');
    const userInput = document.querySelector('#location');
    const forecastDiv = document.querySelector('#forecast');

    const currentDiv = document.querySelector('#current')
    const upcomingDiv = document.querySelector('#upcoming')

    let symbolDict = {
        'Sunny': '&#x2600',
        'Partly sunny': '&#x26C5',
        'Overcast': '&#x2601',
        'Rain': '&#x2614',
        'Degrees': '°'
    }

    const urlLocations = `http://localhost:3030/jsonstore/forecaster/locations`;

    getWeathBtn.addEventListener('click', getWeatherHandler)
    async function getWeatherHandler(e){
        e.preventDefault()
        try{

        const response = await fetch(urlLocations);
        if (!response.ok){
            throw new Error();
        }
        const data = await response.json();
        let wantedCity = data.find(obj => obj.name == userInput.value);
        if(wantedCity == undefined) throw new Error()
        document.querySelector('#forecast').style.display = "block";
        let code  = wantedCity.code;
        const currentLocUrl = `http://localhost:3030/jsonstore/forecaster/today/${code}`;

        let currentResponse = await fetch(currentLocUrl);
        let currentData = await currentResponse.json();

        let symbol = symbolDict[currentData.forecast.condition];

        let divForecasts = document.createElement('div');
        divForecasts.classList.add("forecasts");


        let symbolSpan = document.createElement('span');
        symbolSpan.setAttribute('class', 'condition symbol');
        symbolSpan.innerHTML = symbol;

        let spanCondition = document.createElement('span');
        spanCondition.setAttribute('class', 'condition');
        let span1 = document.createElement('span');
        span1.setAttribute('class', 'forecast-data');
        span1.innerHTML = currentData.name;
        spanCondition.appendChild(span1);

        let span2 = document.createElement('span');
        span2.setAttribute('class', 'forecast-data');
        span2.innerHTML = `${currentData.forecast.low}${symbolDict['Degrees']}/${currentData.forecast.high}${symbolDict['Degrees']}`;
        spanCondition.appendChild(span2);

        let span3 = document.createElement('span');
        span3.setAttribute('class', 'forecast-data');
        span3.innerHTML = currentData.forecast.condition;
        spanCondition.appendChild(span3)

        divForecasts.appendChild(symbolSpan);
        divForecasts.appendChild(spanCondition);
        currentDiv.appendChild(divForecasts);


        const upcomingLocUrl = `http://localhost:3030/jsonstore/forecaster/upcoming/${code}`;

        let threeDaysResponse = await fetch(upcomingLocUrl);
        let threeDaysData = await threeDaysResponse.json();

        let divForecasts2 = document.createElement('div');
        divForecasts2.classList.add("forecast-info");

        threeDaysData.forecast.forEach((dataElem) =>{

            let symbol = symbolDict[dataElem.condition];
            let symbolSpan = document.createElement('span');
            symbolSpan.setAttribute('class', 'symbol');
            symbolSpan.innerHTML = symbol;

            let spanCondition = document.createElement('span');
            spanCondition.setAttribute('class', 'upcoming');

            spanCondition.appendChild(symbolSpan);

            let span2 = document.createElement('span');
            span2.setAttribute('class', 'forecast-data');
            span2.innerHTML = `${dataElem.low}${symbolDict['Degrees']}/${dataElem.high}${symbolDict['Degrees']}`;
            spanCondition.appendChild(span2);

            let span3 = document.createElement('span');
            span3.setAttribute('class', 'forecast-data');
            span3.innerHTML = dataElem.condition;
            spanCondition.appendChild(span3)

           // spanCondition.appendChild(symbolSpan);
            divForecasts2.appendChild(spanCondition);
            upcomingDiv.appendChild(divForecasts2);
        })

    }catch(err){
      //  document.querySelector('#forecast').style.display = "block";
        forecastDiv.innerHTML = 'Error';

    }
}

}

attachEvents();