Advertisement
EntropyStarRover

03. Forecaster

Feb 25th, 2021
702
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function attachEvents() {
  2.     let submitBtn = document.getElementById("submit");
  3.     submitBtn.addEventListener("click", getLocationId);
  4.  
  5.     let locationInput = document.getElementById("location");
  6.  
  7.  
  8.     let locationObj = {};
  9.  
  10.     let forecastDiv = document.getElementById("forecast");
  11.  
  12.     let currentWeatherDiv = document.getElementById("current");
  13.     let upcomingWeatherDiv = document.getElementById("upcoming");
  14.  
  15.     var requestOptions = {
  16.         method: 'GET',
  17.         redirect: 'follow'
  18.     };
  19.  
  20.     function getLocationId() {
  21.         let loc = locationInput.value;
  22.         wipeDivs("forecasts");
  23.         wipeDivs("forecast-info")
  24.  
  25.         fetch("http://localhost:3030/jsonstore/forecaster/locations", requestOptions)
  26.             .then(response => response.text())
  27.             .then(r => JSON.parse(r))
  28.             .then(r => locationObj = r.find(l => l.name == loc))
  29.             .then(r => today(locationObj))
  30.             .then(r => forecoming(locationObj))
  31.  
  32.             .catch(error => invalidData());
  33.  
  34.     }
  35.  
  36.     function today(locationObj) {
  37.         forecastDiv.style.display = "block";
  38.         console.log(locationObj.name)
  39.  
  40.  
  41.         fetch(`http://localhost:3030/jsonstore/forecaster/today/${locationObj.code}`, requestOptions)
  42.             .then(response => response.text())
  43.             .then(result => JSON.parse(result))
  44.             .then(r => populateToday(r))
  45.             .catch(error => invalidData());
  46.  
  47.     }
  48.  
  49.     function forecoming(locationObj) {
  50.  
  51.  
  52.         fetch(`http://localhost:3030/jsonstore/forecaster/upcoming/${locationObj.code}`, requestOptions)
  53.             .then(response => response.text())
  54.             .then(result => JSON.parse(result))
  55.             .then(r => populateUpcoming(r))
  56.             .catch(error => invalidData());
  57.     }
  58.  
  59.     function populateToday(obj) {
  60.  
  61.         console.log(obj);
  62.         let wrapperDiv = document.createElement("div");
  63.         wrapperDiv.className = "forecasts";
  64.         let symbSpan = document.createElement("span");
  65.         symbSpan.className = "condition symbol"
  66.         symbSpan.textContent = chooseSymbol(obj.forecast.condition);
  67.  
  68.         conditionSpan = document.createElement("span");
  69.         conditionSpan.className = "condition";
  70.         let placeSpan = document.createElement("span");
  71.         placeSpan.className = "forecast-data";
  72.         placeSpan.textContent = obj.name;
  73.  
  74.         let tempSpan = document.createElement("span");
  75.         tempSpan.className = "forecast-data";
  76.         tempSpan.textContent = `${obj.forecast.high}°/${obj.forecast.low}°`;
  77.  
  78.         let typeSpan = document.createElement("span");
  79.         typeSpan.className = "forecast-data";
  80.         typeSpan.textContent = `${obj.forecast.condition}`;
  81.  
  82.         conditionSpan.appendChild(placeSpan);
  83.         conditionSpan.appendChild(tempSpan);
  84.         conditionSpan.appendChild(typeSpan)
  85.  
  86.         wrapperDiv.appendChild(symbSpan);
  87.         wrapperDiv.appendChild(conditionSpan);
  88.         currentWeatherDiv.appendChild(wrapperDiv)
  89.     }
  90.  
  91.  
  92.     function populateUpcoming(obj) {
  93.         let arr = obj.forecast;
  94.         console.log(arr)
  95.         let wrapperDiv = document.createElement("div");
  96.         wrapperDiv.className = "forecast-info";
  97.  
  98.         arr.forEach(d => {                    
  99.  
  100.             let upcomingSpan=document.createElement("span");
  101.             upcomingSpan.className="upcoming";
  102.             let symbSpan = document.createElement("span");
  103.             symbSpan.className = "condition symbol";
  104.             symbSpan.textContent = chooseSymbol(d.condition);
  105.  
  106.  
  107.             let tempSpan = document.createElement("span");
  108.             tempSpan.className = "forecast-data";
  109.             tempSpan.textContent = `${d.high}°/${d.low}°`;
  110.  
  111.             conditionSpan = document.createElement("span");
  112.             conditionSpan.className = "condition";
  113.             conditionSpan.textContent = d.condition;
  114.  
  115.  
  116.             upcomingSpan.appendChild(symbSpan);
  117.             upcomingSpan.appendChild(tempSpan);
  118.             upcomingSpan.appendChild(conditionSpan);
  119.             wrapperDiv.appendChild(upcomingSpan)
  120.          
  121.         })
  122.  
  123.         upcomingWeatherDiv.appendChild(wrapperDiv);
  124.  
  125.     }
  126.  
  127.     function chooseSymbol(str) {
  128.         let symb = "";
  129.  
  130.         switch (str) {
  131.             case "Sunny": symb = "☀"; break;
  132.             case "Partly sunny": symb = "⛅"; break;
  133.             case "Overcast": symb = "☁"; break;
  134.             case "Rain": symb = "☂"; break;
  135.  
  136.         }
  137.         return symb;
  138.     }
  139.  
  140.     function invalidData(){
  141.      let erDiv=document.createElement("div");    
  142.      erDiv.className="forecasts";
  143.      erDiv.textContent="Error";
  144.      currentWeatherDiv.appendChild(erDiv)
  145.     }
  146.  
  147.     function wipeDivs(divsClassName){
  148.         let divsToWipe=Array.from(document.getElementsByClassName(divsClassName));
  149.         divsToWipe.forEach(d=>d.remove())
  150.     }
  151. }
  152.  
  153. attachEvents();
Advertisement
RAW Paste Data Copied
Advertisement