added a wind direction arrow

static/css/styles.css

@@ -20,3 +20,21 @@ nav a {
 main {
     padding: 20px;
 }
+
+.arrow {
+    width: 0;
+    height: 0;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 20px solid black;
+    margin: 20px auto;
+    transform-origin: center;
+    transition: transform 0.3s ease;
+    margin-left: 10px;
+}
+
+.wind-container {
+    display: flex; /* Align items horizontally */
+    align-items: center; /* Vertically center the arrow with the text */
+    gap: 10px; /* Add spacing between the items */
+}

templates/weather.html

@@ -4,5 +4,17 @@
     <h1>Current Weather</h1>
     <p>Temperature: {{ temperature }} {{ temperature_unit }} | {{(temperature * 9/5) + 32}}°F</p>
     <p>Wind Speed: {{ wind_speed }} {{ wind_speed_unit }}</p> 
-    <p>Wind Direction: {{ wind_direction }} {{ wind_direction_unit }}</p> 
+    <div class="wind-container">
+        <p>Wind Direction: {{ wind_direction }} {{ wind_direction_unit }}</p>
+        <div class="arrow" id="wind-arrow"></div> 
+    </div>
+    
+    <script>
+        // JavaScript to rotate the arrow dynamically
+        const windDirection = {{ wind_direction }};
+        const arrowElement = document.getElementById('wind-arrow');
+        
+        // Rotate the arrow based on wind direction
+        arrowElement.style.transform = `rotate(${windDirection}deg)`;
+    </script>
 {% endblock %}