feat: add the forecast of the next days

index.html

@@ -60,7 +60,10 @@ <h2 id="temperature"></h2>
               </div>
 
             </div>
-            <div class="d-flex justify-content-end align-items-start">
+            <div class="col">
+              <div class="weather-forecast d-flex gap-3" id="forecast">
+
+              </div>
             </div>
           </div>
         </div>

script.js

@@ -20,10 +20,61 @@ function formatDate(timestamp) {
   return `${day} ${hour}:${minutes}`;
 }
 
+function formatForecastDay(timestamp) {
+  let date = new Date(timestamp * 1000);
+  let day = date.getDay();
+  let days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+  return days[day];
+}
+
+function displayForecast(response) {
+  let forecast = response.data.daily;
+  let forecastElement = document.querySelector("#forecast");
+
+  let forecastHTML = `<div class="row">`;
+  forecast.forEach(function (forecastDay, index) {
+    if (index < 7) {
+      forecastHTML =
+        forecastHTML +
+        `
+                  <div class="col">
+                    <div class="weather-forecast-date">
+                      ${formatForecastDay(forecastDay.dt)}
+                    </div>
+                    <img class="forecast-icon" src="https://openweathermap.org/img/wn/${
+                      forecastDay.weather[0].icon
+                    }@2x.png" alt="">
+                    <div class="weather-forecast-temp">
+                      <span class="weather-forecast-temp-max">${Math.round(
+                        forecastDay.temp.max
+                      )}°</span>
+                      <span class="weather-forecast-temp-min">${Math.round(
+                        forecastDay.temp.min
+                      )}°</span>
+                    </div>
+                  </div>
+                </div>`;
+    }
+  });
+
+  forecastHTML = forecastHTML + `</div>`;
+  forecastElement.innerHTML = forecastHTML;
+}
+
 // create img element to use with temperature icon
 let weatherIcon = document.createElement("img");
 weatherIcon.classList.add("weather-icon");
 
+function getForecast(coordinates) {
+  console.log(coordinates);
+  let apiKey = "502dc8f7ae36e57af1974e18d16a86f8";
+
+  let apiURl = `https://api.openweathermap.org/data/2.5/onecall?lat=${coordinates.lat}&lon=${coordinates.lon}&appid=${apiKey}&units=metric`;
+  console.log(apiURl);
+  axios.get(apiURl).then(displayForecast);
+}
+
 // get temperature by searching for a city
 function showTemp(response) {
   celsiusTemp = response.data.main.temp;
@@ -42,15 +93,20 @@ function showTemp(response) {
   let wind = (document.querySelector(".wind").innerHTML = `${Math.round(
     response.data.wind.speed
   )} km/h`);
-  let date = document.querySelector("#date").innerHTML = formatDate(response.data.dt * 1000);
+  let date = (document.querySelector("#date").innerHTML = formatDate(
+    response.data.dt * 1000
+  ));
 
   // append img element and set icon image
   let weatherImg = document.querySelector(".weather-img").append(weatherIcon);
 
   weatherIcon.setAttribute(
     "src",
-    `https://openweathermap.org/img/wn/${response.data.weather[0].icon}@2x.png`);
-    weatherIcon.setAttribute("alt", response.data.weather[0].description);
+    `https://openweathermap.org/img/wn/${response.data.weather[0].icon}@2x.png`
+  );
+  weatherIcon.setAttribute("alt", response.data.weather[0].description);
+
+  getForecast(response.data.coord);
 }
 
 function search(city) {
@@ -69,22 +125,23 @@ function handleSubmit(event) {
 function showFahrenheitTemp(event) {
   event.preventDefault();
   let fahrenheitTemp = Math.round((celsiusTemp * 9) / 5 + 32);
-  let temperature = (document.querySelector("#temperature").innerHTML = fahrenheitTemp);
+  let temperature = (document.querySelector("#temperature").innerHTML =
+    fahrenheitTemp);
   celsius.classList.remove("active");
   fahrenheit.classList.add("active");
   console.log(celsiusTemp);
 }
 
 function showCelsiusTemp(event) {
   event.preventDefault();
-  console.log(celsiusTemp)
-  let temperature = (document.querySelector("#temperature").innerHTML = Math.round(celsiusTemp));
+  console.log(celsiusTemp);
+  let temperature = (document.querySelector("#temperature").innerHTML =
+    Math.round(celsiusTemp));
   fahrenheit.classList.remove("active");
   celsius.classList.add("active");
   console.log(celsiusTemp);
 }
 
-
 // get user's current location temperature
 function getLocation(position) {
   let apiKey = "b782a5a0cba928a80029c0fd1ea418bd";
@@ -101,7 +158,6 @@ let currentLocal = document
   .querySelector("#current-btn")
   .addEventListener("click", getPosition);
 
-
 let form = document
   .querySelector(".search-form")
   .addEventListener("submit", handleSubmit);

style.css

@@ -26,9 +26,9 @@ body {
 }
 
 .weather-app {
-  background: #faf3ef;
+  background: #fffdfc;
   color: #615f5e;
-  max-width: 700px;
+    max-width: 700px;
   padding: 20px;
 }
 
@@ -58,9 +58,9 @@ li {
   font-size: 16px;
 }
 
-img {
-  height: 70px;
-  width: 70px;
+.weather-icon {
+  height: 80px;
+  width: 80px;
 }
 
 .current-date {
@@ -139,4 +139,28 @@ footer a {
 .units .active {
   cursor: default;
   color: #615f5e;
+}
+
+.weather-forecast {
+  margin-top: 30px;
+  text-align: center;
+  color: #363535;
+}
+
+.forecast-icon {
+  width: 60px;
+  height: 60px;
+}
+
+.weather-forecast-date {
+  font-size: 1.6rem;
+  opacity: 0.7;
+}
+
+.weather-forecast-temp-min {
+  opacity: 0.5;
+}
+
+.weather-forecast-temp {
+  font-size: 1.3rem;
 }