- added forecast weather icons

index.html

@@ -43,7 +43,7 @@ <h1 class="temperature" id="temp">
                 <h2 id="cityName"></h2>
                 <h3 id="weather"></h3>
             </div>
-            <div class="image-header">
+            <div class="current-weather-image" id="currentWeatherImage">
             </div>
         </div>
 
@@ -56,31 +56,7 @@ <h3 id="weather"></h3>
     </header>
     <main>
         <div class="weather-forecast-container" id="forecastContainer">
-            <!-- <div class="weather-day">
-                <p class="weekday0" id="0"></p>
-                <div class="forecast-image">S</div>
-                <p class="forecast-temperature" id="minMaxTemp0"></p>
-            </div>
-            <div class="weather-day">
-                <p class="weekday" id="1">Mo</p>
-                <div class="forecast-image">S</div>
-                <p class="forecast-temperature" id="minMaxTemp1"></p>
-            </div>
-            <div class="weather-day">
-                <p class="weekday" id="2">Mo</p>
-                <div class="forecast-image">S</div>
-                <p class="forecast-temperature" id="minMaxTemp2"></p>
-            </div>
-            <div class="weather-day" id="3">
-                <p class="weekday">Mo</p>
-                <div class="forecast-image">S</div>
-                <p class="forecast-temperature" id="minMaxTemp3"></p>
-            </div>
-            <div class="weather-day">
-                <p class="weekday">Mo</p>
-                <div class="forecast-image">S</div>
-                <p class="forecast-temperature" id="minMaxTemp4"></p>
-            </div> -->
+
         </div>
 
     </main>

script.js

@@ -11,12 +11,7 @@ const weather = document.getElementById('weather')
 const cityName = document.getElementById('cityName')
 const sunrise = document.getElementById('sunrise')
 const sunset = document.getElementById('sunset')
-// const minMaxTemp0 = document.getElementById('minMaxTemp0')
-// const minMaxTemp1 = document.getElementById('minMaxTemp1')
-// const minMaxTemp2 = document.getElementById('minMaxTemp2')
-// const minMaxTemp3 = document.getElementById('minMaxTemp3')
-// const minMaxTemp4 = document.getElementById('minMaxTemp4')
-// const weekday0 = document.getElementById('weekday0')
+const iconCurrent = document.getElementById('currentWeatherImage')
 
 
 // function to create new URL for forecast based on the users input
@@ -44,18 +39,26 @@ const convertUnixToTime = (unixTime, timeZone) => {
 const updateHTML = (data) => {
     console.log(data)
 
+    cityName.innerText = data.name
+    weather.innerText = data.weather[0].description
+
     // method to round the temperatures
     const roundedTemp = Math.round(data.main.temp)
+    temperature.innerText = `${roundedTemp}°C`
 
     // the local time for the specific city
     const sunriseTime = convertUnixToTime(data.sys.sunrise, data.timezone)
     const sunsetTime = convertUnixToTime(data.sys.sunset, data.timezone)
 
-    temperature.innerText = `${roundedTemp}°C`
-    weather.innerText = data.weather[0].description
-    cityName.innerText = data.name
     sunrise.innerText = sunriseTime
     sunset.innerText = sunsetTime
+
+    // Icon
+    const iconCode = data.weather[0].icon
+    const iconUrl = `http://openweathermap.org/img/wn/${iconCode}@2x.png`
+
+    iconCurrent.innerHTML = `<img class="icon-big" src="${iconUrl}" alt="Weather Icon">`
+
 }
 
 // to get the weather data for the current weather
@@ -86,7 +89,7 @@ const updateForecastHTML = (dataForecast) => {
 
     const forecasts = dataForecast.list
 
-    // filters the forecast for 3 PM each day
+    // filters the forecast for 12 AM (midnight) each day
     const filteredMinForecasts = forecasts.filter(minForecast => {
         const dateTime = new Date(minForecast.dt_txt)
         return dateTime.getHours() === 0
@@ -100,54 +103,32 @@ const updateForecastHTML = (dataForecast) => {
 
     let forecastHTML = ''
 
-    // Loop to get the weekdays 
-    for (let i = 0; i < 5; i++) {
+    // Loops
+    for (let i = 0; i < 4; i++) {
         const minTemp = Math.round(filteredMinForecasts[i].main.temp)
         const maxTemp = Math.round(filteredMaxForecasts[i].main.temp)
 
+        // Get the icon for the forecast
+        const iconCode = filteredMinForecasts[i].weather[0].icon
+        const iconUrl = `http://openweathermap.org/img/wn/${iconCode}@2x.png`;
+
         // get weekdays
         const dateTime = new Date(filteredMinForecasts[i].dt_txt)
         const dayOfWeek = weekdays[dateTime.getDay()]
 
         forecastHTML += `
         <div class="weather-day">
                 <p class="weekday">${dayOfWeek}</p>
-                <div class="forecast-image">S</div>
+                <div class="forecast-image">
+                <img class="forecast-icon "src="${iconUrl}" alt="Weather Icon">
+                </div>
                 <p class="forecast-temperature">${minTemp}° / ${maxTemp}°C</p>
             </div>
         `
     }
 
     forecastContainer.innerHTML = forecastHTML
 }
-//     
-
-//     minMaxTemp0.innerText = `${minTemp0}° / ${maxTemp0}°C`
-
-//     const minTemp1 = Math.round(filteredMinForecasts[1].main.temp)
-//     const maxTemp1 = Math.round(filteredMaxForecasts[1].main.temp)
-
-//     minMaxTemp1.innerText = `${minTemp1}° / ${maxTemp1}°C`
-
-//     const minTemp2 = Math.round(filteredMinForecasts[2].main.temp)
-//     const maxTemp2 = Math.round(filteredMaxForecasts[2].main.temp)
-
-//     minMaxTemp2.innerText = `${minTemp2}° / ${maxTemp2}°C`
-
-//     const minTemp3 = Math.round(filteredMinForecasts[3].main.temp)
-//     const maxTemp3 = Math.round(filteredMaxForecasts[3].main.temp)
-
-//     minMaxTemp3.innerText = `${minTemp3}° / ${maxTemp3}°C`
-
-//     const minTemp4 = Math.round(filteredMinForecasts[4].main.temp)
-//     const maxTemp4 = Math.round(filteredMaxForecasts[4].main.temp)
-
-//     minMaxTemp4.innerText = `${minTemp4}° / ${maxTemp4}°C`
-
-
-//     const dayOfWeek = new Date(date).toLocaleDateString('en-GB', { weekday: 'short' })
-// }
-
 
 
 // to get the forecast weather data

style.css

@@ -102,15 +102,18 @@ h3 {
     line-height: 25.78px;
 }
 
-.image-header {
+.current-weather-image {
     width: 161.15px;
     height: 152.03px;
-    border: solid white;
     margin-top: 4.99px;
     margin-left: 226.92px;
     position: relative;
 }
 
+.icon-big {
+    width: 100%;
+}
+
 .sunrise-sunset {
     display: flex;
     width: 342px;
@@ -136,7 +139,6 @@ main {
     max-width: 800px;
     min-height: 250px;
     margin-top: 80px;
-    border: 1px solid #707070;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -150,7 +152,18 @@ main {
     justify-content: space-around;
     align-items: center;
     border-radius: 30px;
-    border: solid black;
+}
+
+.weather-day:hover {
+    background-color: #a39e9e;
+}
+
+.forecast-image {
+    width: 50px;
+}
+
+.forecast-icon {
+    width: 100%;
 }
 
 .weekday,