Injected HTML forecast Html with Javascript

Shemene · Nov 24, 2023 · 77d01fa · 77d01fa
1 parent a81a1c1
commit 77d01fa
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -54,21 +54,10 @@ <h1 id="city" class="weather-app-city"></h1>
             <div class="weather-app-unit">°C</div>
           </div>
         </div>
-        <div class="weather-forecast">
+        <div class="weather-forecast" id="forecast">
           <div class="row">
             <div class="col-2">
-              <div class="weather-forecast-date">Tue</div>
-
-              <img
-                src="http://shecodes-assets.s3.amazonaws.com/api/weather/icons/clear-sky-day.png"
-                alt=""
-                width="36"
-              />
-              <div class="weather-forecast-temperatures">
-                <span class="weather-forecast-temperature-max">18°</span
-                ><span class="weather-forecast-temperature-min">12°</span>
-              </div>
-            </div>
+
           </div>
         </div>
       </main>

diff --git a/script.js b/script.js
@@ -59,3 +59,18 @@ let searchFormElement = document.querySelector("#search-form");
 searchFormElement.addEventListener("submit", handleSearchSubmit);
 
 searchCity("Cape Town");
+
+let forecast = document.querySelector("#forecast");
+
+forecast.innerHTML = `<div class="weather-forecast-date">Tue</div>
+
+              <img
+                src="http://shecodes-assets.s3.amazonaws.com/api/weather/icons/clear-sky-day.png"
+                alt=""
+                width="36"
+              />
+              <div class="weather-forecast-temperatures">
+                <span class="weather-forecast-temperature-max">18°</span
+                ><span class="weather-forecast-temperature-min">12°</span>
+              </div> 
+            </div>`;