Add files via upload

Fixed Previous forecast elements in the 'forecast-container' are not cleared when fetching newer ones. #5
kshitizrohilla · Jul 17, 2024 · 7f93c0a · 7f93c0a
1 parent fe0e824
commit 7f93c0a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 16 deletions.
diff --git 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
@@ -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;