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