Advertisement
bebo231312312321

Untitled

Jun 26th, 2023
146
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function attachEvents() {
  2.     const [location, submitBtn, foreCast, currentWeather, upcomingWeather] =
  3.         ["#location", "#submit", "#forecast", '#current', '#upcoming'].map(selector => document.querySelector(selector))
  4.     const urlLocation = `http://localhost:3030/jsonstore/forecaster/locations`
  5.  
  6.     submitBtn.addEventListener('click', onLoad)
  7.     const symbols = {
  8.         'Sunny': '&#x2600', // ☀
  9.         'Partly sunny': '&#x26C5',
  10.         'Overcast': '&#x2601', // ☁
  11.         'Rain': '&#x2614', // ☂
  12.         'Degrees': '&#176',
  13.     }
  14.     function onLoad() {
  15.         fetch(urlLocation)
  16.             .then(response => { return response.json() })
  17.             .then(data => {
  18.                 let findLocation = data.find(x => x.name === location.value)
  19.                 if (findLocation == undefined) throw new Error();
  20.                 foreCast.style.display = 'block'
  21.  
  22.                 let code = findLocation.code
  23.                 const urlToday = `http://localhost:3030/jsonstore/forecaster/today/${code}`
  24.                 const threeDaysUrl = `http://localhost:3030/jsonstore/forecaster/upcoming/${code}`
  25.                 fetch(urlToday)
  26.                     .then(response => response.json())
  27.                     .then(dataToday => {
  28.                         const forestDiv = createElement('div', '', 'forecasts')
  29.                         let spnSymbol = createElement('span', '', ('condition', 'symbol'), symbols[dataToday.forecast.condition]);
  30.                         const conditionSpan = createElement('span', '', 'condition');
  31.                         const span1 = createElement('span', dataToday.name, 'forecast-data');
  32.                         const span2 = createElement('span', '', 'forecast-data', `${dataToday.forecast.low}°/${dataToday.forecast.high}°`)
  33.                         const span3 = createElement('span', dataToday.forecast.condition, 'forecast-data');
  34.                         append(conditionSpan, span1, span2, span3);
  35.                         append(forestDiv, spnSymbol, conditionSpan);
  36.                         append(currentWeather, forestDiv);
  37.  
  38.                         fetch(threeDaysUrl)
  39.                             .then(response => response.json())
  40.                             .then(dataLine => {
  41.  
  42.                                 const divInfo = createElement('div', '', 'forecast-info')
  43.                                 dataLine.forecast.forEach(el => {
  44.  
  45.                                     const upComingSpan = createElement('span', '', 'upcoming')
  46.                                     let spanSymbol = createElement('span', '', 'symbol', symbols[el.condition])
  47.                                     let span1 = createElement('span', '', 'forecast-data', `${el.low}°/${el.high}°`)
  48.                                     let span2 = createElement('span', el.condition, 'forecast-data');
  49.  
  50.  
  51.                                     append(upComingSpan, spanSymbol, span1, span2)
  52.                                     append(divInfo, upComingSpan)
  53.                                     return divInfo
  54.                                 });
  55.                                 append(upcomingWeather, divInfo)
  56.                             })
  57.  
  58.                     })
  59.  
  60.             })
  61.             .catch((e) => foreCast.textContent = "Error")
  62.     }
  63.     function createElement(type, content, className, weatherSymbol) {
  64.         let element = document.createElement(type);
  65.         content ? element.textContent = content : '';
  66.         className ? element.classList.add(className) : '';
  67.         // idName ? element.id = idName : '';
  68.         if (weatherSymbol) {
  69.             element.innerHTML = weatherSymbol;
  70.         }
  71.         return element;
  72.     }
  73.     function append(parent, ...elements) {
  74.         elements.map((el) => parent.appendChild(el));
  75.     }
  76. }
  77.  
  78. attachEvents();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement