Add a wind direction arrow.

index.css

@@ -153,7 +153,7 @@ body{
   align-items:stretch;
 }
 
-.weatherInfo p{
+.weatherItem{
   margin:0;
   padding:6px 9px;             /* slightly tighter */
   border-radius:14px;

index.html

@@ -16,10 +16,13 @@
                 <div class="weather">
                     <div id="currentWeather" class="weatherBlock">
                         <div class="weatherInfo">
-                            <p id="temp"></p>
-                            <p id="feels"></p>
-                            <p id="wind"></p>
-                            <p id="humidity"></p>
+                            <p id="temp" class="weatherItem"></p>
+                            <p id="feels" class="weatherItem"></p>
+                            <div id="wind" class="weatherItem">
+                                <p></p>
+                                <svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" color="#000000"><path d="M12 21L12 3M12 3L20.5 11.5M12 3L3.5 11.5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+                            </div>
+                            <p id="humidity" class="weatherItem"></p>
                         </div>
                     </div>
                 </div>

index.js

@@ -42,20 +42,26 @@ const getWeather = ()=>{
     })
         .then(r=>r.json())
         .then((response)=>{
-            const tempDisplay = `Temperature: ${response.current.temp_f}\u00B0F`;
+            console.log(response);
+            const tempDisplay = `${response.current.temp_f}\u00B0F`;
             document.getElementById("temp").textContent = tempDisplay;
 
-            const feelsLike = `Feels Like: ${response.current.feelslike_f}\u00B0F`;
+            const feelsLike = `Feels Like ${response.current.feelslike_f}\u00B0F`;
             document.getElementById("feels").textContent = feelsLike;
 
             const currentWeatherImage = document.getElementById("conditionLogo");
             currentWeatherImage.src = `https:${response.current.condition.icon}`;
             currentWeatherImage.alt = response.current.condition.text;
 
-            const currentWind = `Wind: ${response.current.wind_mph}mph ${response.current.wind_dir}`;
-            document.getElementById("wind").textContent = currentWind;
+            const currentWind = `Winds ${response.current.wind_mph}mph ${response.current.wind_dir}`;
+            const currentElem = document.querySelector("#wind p");
+            const newElem = document.createElement("p");
+            newElem.textContent = currentWind;
+            currentElem.replaceWith(newElem);
 
-            const humidity = `Humidity: ${response.current.humidity}%`;
+            document.querySelector("#wind svg").style.transform = `rotate(${response.current.wind_degree}deg)`;
+
+            const humidity = `${response.current.humidity}% humidity`;
             document.getElementById("humidity").textContent = humidity;
 
             renderForecast(response.forecast.forecastday);