minor ui changes'

script.js

@@ -2,51 +2,73 @@ const API_KEY = "9cc4edd6d8064a5b7d8fea55305f7c1d"
 const geocode_API_KEY = "5333f43e8a7a4553abee4745425cae8b"
 const geocode_API_URL = "https://api.opencagedata.com/geocode/v1/json"
 const API_URL = "https://api.openweathermap.org/data/2.5/"
+const ICON_URL = "https://openweathermap.org/img/wn/"
 
-let weather = {
-  fetchWeather: function (city) {
-    fetch(`${API_URL}weather?q=${city}&units=metric&appid=${API_KEY}`)
-      .then((response) => { // error part if it fails
-        if (!response.ok) {
-          alert("No weather found.");
-          throw new Error("No weather found.");
-        }
-        return response.json();
-      })
-      .then((data) => this.displayWeather(data));
-  },
-  displayWeather: function (data) {
-    const { name } = data;
-    const { icon, description } = data.weather[0];
-    const { temp, humidity } = data.main;
-    const { speed } = data.wind;
-    document.querySelector(".city").innerText = `Weather in ${name}`;
-    document.querySelector(".icon").src = `https://openweathermap.org/img/wn/${icon}.png`;
-    document.querySelector(".description").innerText = description;
-    document.querySelector(".temp").innerText = `${temp} °C`;
-    document.querySelector(".humidity").innerText = `Humidity: ${humidity}%`;
-    document.querySelector(".wind").innerText = `Wind speed: ${speed}km/h`;
-    document.querySelector(".weather").classList.remove("loading");
-    document.body.style.backgroundImage = `var(--${data.weather[0].main})`;
-    },
-  search: function () {
-    this.fetchWeather(document.querySelector(".search-bar").value);
-  }, 
-};
-
-let forcast = {
-  fetchForcast: function(latitude, longitude) {
-    fetch(`${API_URL}forcast?lat=${latitude}&lon${longitude}&apiid=${API_KEY}`)
+let forecast = {
+  fetchforecast: function(city) {
+    fetch(`${API_URL}forecast?q=${city}&units=metric&appid=${API_KEY}`)
       .then((responce) => {
         if (!responce.ok) {
-          alert("No forcast found");
-          throw new Error("No forcast found.");
+          alert("No forecast found");
+          throw new Error("No forecast found.");
         }
         return responce.json();
-      }).then((data) => this.displayForcast(data));
+      }).then((data) => this.displayforecast(data));
   },
-  displayForcast: function(data) {
-    
+  displayforecast: function(data) {
+    // Get latest weather data for each day
+    let days = [];
+    for (let i = 0; i < data.list.length; i++) {
+      let exists = false
+      for (let j = 0; j < days.length; j++) {
+        if (days[j].dt_txt.substr(0, 10) == data.list[i].dt_txt.substr(0, 10)) {
+          days[j] = data.list[i]
+          exists = true
+          break
+        }
+      }
+
+      if (!exists) days.push(data.list[i])
+    }
+
+    // Display todays data
+    document.querySelector(".city").innerText = `Weather in ${data.city.name}`;
+    document.querySelector(".icon").src = `${ICON_URL}${days[0].weather[0].icon}.png`;
+    document.querySelector(".description").innerText = days[0].weather[0].description;
+    document.querySelector(".temp").innerText = `${Math.round(days[0].main.temp)} °C`;
+    document.querySelector(".humidity").innerText = `Humidity: ${days[0].main.humidity}%`;
+    document.querySelector(".wind").innerText = `Wind speed: ${days[0].wind.speed}km/h`;
+    document.querySelector(".weather").classList.remove("loading");
+    document.body.style.backgroundImage = `var(--${days[0].weather[0].main})`;
+
+    // Display next 5 days data
+    const weekday = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
+    let d, day, forecastElem, forecastIcon, forecastDay, forecastTemp;
+    document.getElementById("week-list").innerHTML = "";
+    for (let i = 1; i < days.length; i++) {
+
+      d = new Date(days[i].dt_txt);
+      day = weekday[d.getDay()];
+  
+      // Construct element
+      forecastIcon = document.createElement("img");
+      forecastIcon.src = `${ICON_URL}${days[i].weather[0].icon}.png`;
+      forecastDay = document.createElement("span");
+      forecastDay.classList.add("day-name");
+      forecastDay.innerHTML = day;
+      forecastTemp = document.createElement("span");
+      forecastTemp.classList.add("day-temp");
+      forecastTemp.innerHTML = `${Math.round(days[i].main.temp)}°C`;
+      forecastElem = document.createElement("li");
+      forecastElem.appendChild(forecastIcon);
+      forecastElem.appendChild(forecastDay);
+      forecastElem.appendChild(forecastTemp);
+      
+      document.getElementById("week-list").appendChild(forecastElem);
+    }
+  },
+  search: function() {
+    this.fetchforecast(document.querySelector(".search-bar").value);
   }
 }
 
@@ -67,8 +89,7 @@ let geocode = {
       if (request.status == 200) {
         // Success!
         var data = JSON.parse(request.responseText);
-        weather.fetchWeather(data.results[0].components.city);
-        console.log(data.results[0].components.city)
+        forecast.fetchforecast(data.results[0].components.city);
       } else if (request.status <= 500) {
         // We reached our target server, but it returned an error
 
@@ -95,19 +116,19 @@ let geocode = {
       navigator.geolocation.getCurrentPosition(success, console.error);
     }
     else {
-      weather.fetchWeather("Surrey");
+      forecast.fetchforecast("Surrey");
     }
   }
 };
 
 document.querySelector(".search button").addEventListener("click", function () {
-  weather.search();
+  forecast.search();
 });
 
 document.querySelector(".search-bar")
 .addEventListener("keyup", function (event) {
   if (event.key == "Enter") {
-    weather.search();
+    forecast.search();
   }
 });