Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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': '☀',
- 'Partly sunny': '⛅',
- 'Overcast': '☁',
- 'Rain': '☔',
- '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();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement