Refactor forecast, add forecast styles

3 files changed, 41 insertions, 13 deletions

diff --git a/index.html b/index.html
index 70ae21e..1ee3622 100644
--- a/index.html
+++ b/index.html
@@ -77,14 +77,14 @@
             <image id="day3icon"></image>
         </tr>
         <tr>
-            <td id="day1high"></td>
-            <td id="day2high"></td>
-            <td id="day3high"></td>
+            <td id="day1high" class="high"></td>
+            <td id="day2high" class="high"></td>
+            <td id="day3high" class="high"></td>
         </tr>
         <tr>
-            <td id="day1low"></td>
-            <td id="day2low"></td>
-            <td id="day3low"></td>
+            <td id="day1low" class="low"></td>
+            <td id="day2low" class="low"></td>
+            <td id="day3low" class="low"></td>
         </tr>
         <tr>
             <td id="day1pop"></td>
diff --git a/styles.css b/styles.css
index 2a1c06d..5e278e8 100644
--- a/styles.css
+++ b/styles.css
@@ -77,17 +77,33 @@ button {
 }
 .forecast{
     color: #fff;
-    text-align: center;            
-    line-height: 50px;
     text-align: center;
+    border-collapse: collapse;
+    border: 1px solid white;
+    width: 100%;
 }
 .forecast th, .forecast td {
-    border: 1px solid white;
+    border-left: 1px solid white;
+    border-right: 1px solid white;
     margin: 0px;
+    padding: 0px 5px 0px 5px;
 }
+
+.high {
+    color: rgb(255, 64, 64)
+}
+
+.low {
+    color: rgb(45, 161, 255)
+}
+
 .forecast th {
+    border-bottom: 1px solid white;
+    padding: 5px;
     font-size: 28px;
+    background-color: #454545;
 }
 .forecast td {
+    padding: 3px;
     font-size: 16px;
 }
\ No newline at end of file
diff --git a/weather-manager.js b/weather-manager.js
index 941c8cc..602e584 100644
--- a/weather-manager.js
+++ b/weather-manager.js
@@ -26,12 +26,24 @@ function loadWeather() {
         }, "")
     }
 }
-if(!window.localStorage.weather){
+let fetchWeather = true;
+if(window.localStorage.weather_date){
+    let last_update = new Date(Date.parse(window.localStorage.weather_date))
+    let diff = new Date() - last_update;
+    // If one hour difference don't fetch
+    if(diff / (1000 * 60 * 60) < 1) { 
+        fetchWeather = false;
+    }
+}
+
+if(fetchWeather){
     fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${LAT}&lon=${LON}&APPID=${OPEN_WEATHER_API_KEY}&units=${WEATHER_UNITS}&exclude=hourly,minutely`)
         .then(response => response.json())
         .then(data => {
-            console.log(data)
+            window.localStorage.weather_date = new Date();
             window.localStorage.weather = JSON.stringify(data); 
+            loadWeather()
         });
-}            
-loadWeather()
\ No newline at end of file
+} else {
+    loadWeather()
+}