Advertisement
cecko

Untitled

Jun 26th, 2023
679
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function attachEvents() {
  2.  
  3.     let location = document.getElementById('location');
  4.     let submitBtn = document.getElementById('submit');
  5.     let forecast = document.getElementById('forecast');
  6.     let current = document.getElementById(`current`);
  7.  
  8.     let url = 'http://localhost:3030/jsonstore/forecaster/locations';
  9.  
  10.  
  11.     submitBtn.addEventListener('click', async function () {
  12.         let locationName = location.value;
  13.         const response = await fetch(url);
  14.         let data = await response.json();
  15.         console.log(data[0]);
  16.         let curCity = data.filter((x) => x.name === locationName);
  17.         console.log(curCity)
  18.         let curCityCode = curCity[0].code;
  19.  
  20.         let todayUrl = `http://localhost:3030/jsonstore/forecaster/today/${curCityCode}`
  21.         let todayResponse = await fetch(todayUrl);
  22.         let todayData = await todayResponse.json();
  23.  
  24.         let currentSymbol = "";
  25.         if (todayData.forecast.condition === "Sunny") {
  26.             currentSymbol = `☀`;
  27.         } else if (todayData.forecast.condition === "Partly sunny") {
  28.             currentSymbol = `⛅`;
  29.         } else if (todayData.forecast.condition === "Overcast") {
  30.             currentSymbol = `☁`;
  31.         } else if (todayData.forecast.condition === "Rain") {
  32.             currentSymbol = `☔`;
  33.         }
  34.  
  35.         const div = createElement('div');
  36.         div.setAttribute('class', 'forecasts');
  37.         const conditionSymbol = createElement('span');
  38.         conditionSymbol.setAttribute('class', "condition");
  39.         conditionSymbol.setAttribute('class', 'symbol');
  40.         conditionSymbol.innerHTML = currentSymbol;
  41.         const condition = createElement('span');
  42.         condition.setAttribute('class', 'condition');
  43.         createElement('span', `${todayData.name}`, div).setAttribute('class', 'forecast-data');
  44.         createElement('span',`${todayData.forecast.low}` + `°`
  45.             + `/${todayData.forecast.high}`
  46.             + "°", div).setAttribute('class', 'forecast-data');
  47.         createElement('span', `${todayData.forecast.condition}`, div).setAttribute('class', 'forecast-data');
  48.         div.appendChild(conditionSymbol);
  49.         current.appendChild(div);
  50.  
  51.  
  52.         forecast.style.display = 'block';
  53.     })
  54.     function createElement(type, content, parent) {
  55.         const element = document.createElement(type);
  56.         element.innerHTML = content;
  57.         if (parent) {
  58.             parent.appendChild(element);
  59.         }
  60.         return element;
  61.     }
  62. }
  63.  
  64. attachEvents();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement