From efe56a5f2989f58e0da12477d978cc0691f62035 Mon Sep 17 00:00:00 2001
From: Nico Melone <nico.a.melone@gmail.com>
Date: Wed, 22 Jan 2025 12:34:03 -0600
Subject: [PATCH] added a wind direction arrow

---
 static/css/styles.css  | 18 ++++++++++++++++++
 templates/weather.html | 14 +++++++++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/static/css/styles.css b/static/css/styles.css
index 943fd7a..880897d 100644
--- a/static/css/styles.css
+++ b/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 */
+}
diff --git a/templates/weather.html b/templates/weather.html
index 0c455c8..dc75c25 100644
--- a/templates/weather.html
+++ b/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 %}
\ No newline at end of file