From 7f93c0aace0a6a3e683310c8e407c6a9100d53a9 Mon Sep 17 00:00:00 2001
From: Kshitiz Rohilla <kshitiz13@gmail.com>
Date: Thu, 18 Jul 2024 03:07:50 +0530
Subject: [PATCH] Add files via upload

Fixed Previous forecast elements in the 'forecast-container' are not cleared when fetching newer ones. #5
---
 scripts/mobile.js | 19 +++++++++++--------
 scripts/script.js | 20 ++++++++++++--------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/scripts/mobile.js b/scripts/mobile.js
index f3e1ada..1c74c62 100644
--- a/scripts/mobile.js
+++ b/scripts/mobile.js
@@ -64,6 +64,9 @@ cityInputMobile.addEventListener("keyup", function (event) {
             .then(response => response.json())
             .then(data => {
               const forecastContainer = document.getElementById('forecast-container');
+
+              forecastContainer.innerHTML = '';
+
               const dailyForecasts = {};
               data.list.forEach(entry => {
                 const dateTime = new Date(entry.dt * 1000);
@@ -91,14 +94,14 @@ cityInputMobile.addEventListener("keyup", function (event) {
                 forecastCard.classList.add('daily-forecast-card');
 
                 forecastCard.innerHTML = `
-                <p class="daily-forecast-date">${day.date}</p>
-                <div class="daily-forecast-logo"><img class="imgs-as-icons" src="${day.icon}"></div>
-                <div class="max-min-temperature-daily-forecast">
-                    <span class="max-daily-forecast">${Math.round(day.maxTemp - 273.15)}<sup>o</sup>C</span>
-                    <span class="min-daily-forecast">${Math.round(day.minTemp - 273.15)}<sup>o</sup>C</span>
-                </div>
-                <p class="weather-type-daily-forecast">${day.weatherType}</p>
-            `;
+        <p class="daily-forecast-date">${day.date}</p>
+        <div class="daily-forecast-logo"><img class="imgs-as-icons" src="${day.icon}"></div>
+        <div class="max-min-temperature-daily-forecast">
+          <span class="max-daily-forecast">${Math.round(day.maxTemp - 273.15)}<sup>o</sup>C</span>
+          <span class="min-daily-forecast">${Math.round(day.minTemp - 273.15)}<sup>o</sup>C</span>
+        </div>
+        <p class="weather-type-daily-forecast">${day.weatherType}</p>
+      `;
 
                 forecastContainer.appendChild(forecastCard);
               });
diff --git a/scripts/script.js b/scripts/script.js
index d1e8cd3..4705c1c 100644
--- a/scripts/script.js
+++ b/scripts/script.js
@@ -91,6 +91,9 @@ cityInput.addEventListener("keyup", function (event) {
             .then(response => response.json())
             .then(data => {
               const forecastContainer = document.getElementById('forecast-container');
+
+              forecastContainer.innerHTML = '';
+
               const dailyForecasts = {};
               data.list.forEach(entry => {
                 const dateTime = new Date(entry.dt * 1000);
@@ -118,14 +121,14 @@ cityInput.addEventListener("keyup", function (event) {
                 forecastCard.classList.add('daily-forecast-card');
 
                 forecastCard.innerHTML = `
-                <p class="daily-forecast-date">${day.date}</p>
-                <div class="daily-forecast-logo"><img class="imgs-as-icons" src="${day.icon}"></div>
-                <div class="max-min-temperature-daily-forecast">
-                    <span class="max-daily-forecast">${Math.round(day.maxTemp - 273.15)}<sup>o</sup>C</span>
-                    <span class="min-daily-forecast">${Math.round(day.minTemp - 273.15)}<sup>o</sup>C</span>
-                </div>
-                <p class="weather-type-daily-forecast">${day.weatherType}</p>
-            `;
+        <p class="daily-forecast-date">${day.date}</p>
+        <div class="daily-forecast-logo"><img class="imgs-as-icons" src="${day.icon}"></div>
+        <div class="max-min-temperature-daily-forecast">
+          <span class="max-daily-forecast">${Math.round(day.maxTemp - 273.15)}<sup>o</sup>C</span>
+          <span class="min-daily-forecast">${Math.round(day.minTemp - 273.15)}<sup>o</sup>C</span>
+        </div>
+        <p class="weather-type-daily-forecast">${day.weatherType}</p>
+      `;
 
                 forecastContainer.appendChild(forecastCard);
               });
@@ -135,6 +138,7 @@ cityInput.addEventListener("keyup", function (event) {
             });
 
 
+
           document.getElementById("locationName").innerHTML = location;
           document.getElementById("temperatureValue").innerHTML = temperature + "<sup>o</sup>C";
           document.getElementById("weatherType").innerHTML = weatherType;