Merge pull request #4 from JesseWx2011/main

Code Adjustments, Added Comments

README.md

@@ -4,17 +4,17 @@
     Contibutors:  
     No Other Contributors :/</div> 
   <div class="info">This uses an api made by Aeris Weather.</div>
-  <div class="info">This Project was last updated 7/4/24.</div>
+  <div class="info">This Project was last updated on July 5th, 2024.</div>
   <div class="info">To see the latest updates, go to "changelog.txt".</div>
 <img align="center" src="https://github-readme-stats.vercel.app/api?username=JesseWx2011&include_all_commits=true&count_private=true&show_icons=true&line_height=20&title_color=2B5BBD&icon_color=1124BB&text_color=A1A1A1&bg_color=0,000001,130F40" alt="my Github Stats"/>
 Go to <a href="https://drive.google.com/file/d/1Wft1JEjsMZ_UdUvqw4yiDK1jXy4fm_-/view">here</a> for a demo. 
 <h2 align="center">Any Questions? Create an issue on the "Issues" page.</h2>
 <h1>Previews, Taken as of v2.5 Build 1, Released July 3rd, 2024<h1>
 <div align="center">
-Apple iPad
+<div align="center">Apple iPad</div>
 <img src="iPad.png"></img>
-Apple iPhone (iPhone 14, 6.7")
+<div align="center">Apple iPhone (iPhone 14, 6.7")</div>
 <img src="iPhone.png"></img>
-Laptop (Windows PC)
+<div>Laptop (Windows PC)</div>
 <img src="Windows PC.png"></img>
 </div>

index.html

@@ -213,7 +213,6 @@ <h1 style="position: absolute; margin-top: 78px; margin-left: 550px;">Radar Unav
       </div>
       <div class="bottomnavbar" id="bottombar">
         <button onclick="lightningredirect()" class="lightningbutton" id="lightningbutton">Closest Lightning Strike</button>
-        <button onclick="hourlycity()" id="hourlybutton" class="linkbutton">Hourly Forecast</button>
         <button class="linkbutton" onclick="extendedforecast()" style="margin-left: 250px;">Full Forecast</button>
         <button onclick="spcoutlook()" id="spcbutton" class="linkbutton"
           style="margin-left: 220px; width: 110px;">Convective Outlook (USA Only)</button>
@@ -222,7 +221,6 @@ <h1 style="position: absolute; margin-top: 78px; margin-left: 550px;">Radar Unav
   </div>
   </div>
   </div>
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 
 </body>
 
@@ -296,16 +294,6 @@ <h1 style="position: absolute; margin-top: 78px; margin-left: 550px;">Radar Unav
   ChangeWidth()
   setInterval(getTime, 5000)
 </script>
-<script>
-  function hourlycity() {
-    const hbutton = document.getElementById("hourlybutton")
-    hbutton.addEventListener("click", function () {
-      location.replace(`./hourly.html?city=${city}`)
-    })
-  }
-  hourlycity();
-</script>
-
 <script>
   $(function () {
     $(document).keyup(function (e) {

js/lightning.js

@@ -14,7 +14,6 @@ async function litening() {
   const responsee = await fetch(alerts)
   const data = await responsee.json()
   const {response} = data
-  console.log(data)
   var locs = {
     lat: response[0].loc.lat,
     lon: response[0].loc.long

js/notification.js

@@ -1,4 +1,5 @@
 function notifyMe() {
+  // Request acess to show notifications
   if (!("Notification" in window)) {
   } else if (Notification.permission === "granted") {
   } else if (Notification.permission !== "denied") {
@@ -12,9 +13,9 @@ function notifyMe() {
      const responsee = await fetch(alerts)
      const data = await responsee.json()
      const {response} = data
-     console.log(data)
+
      var liteningaudio = "lightning.mp3"
-     if (response[0].relativeTo.distanceMI !== null) {
+     if (response[0]?.relativeTo?.distanceMI !== null) {
       document.getElementById("lightningbutton").style.display = "block"
         const notification =  new Notification("Lightning Alert:", {
              body: `Lightning struck ${response[0].relativeTo.distanceMI} miles (${response[0].relativeTo.distanceKM} km) ${response[0].relativeTo.bearingENG} of this Location in ${city}.`,
@@ -34,18 +35,23 @@ function notifyMe() {
 }
 notifyMe()
 alerts();
+// Get Alerts
 const wxalerts = `https://data.api.xweather.com/alerts/${city}?client_id=${client_id}&client_secret=${client_secret}`
 async function alerts() {
  const responsee = await fetch(wxalerts)
  const data = await responsee.json()
  const {response} = data;
- console.log(data)
-
+
+// JSON returns as ISO-8601
   alert = response[0].details.name
-  starttimeold = response[0].timestamps.beginsISO
-  endtimeold = response[0].timestamps.expiresISO
-  tz = response[0].profile.tz
- starttime = new Date(starttimeold).toLocaleString("en-US", {timeStyle: "short", timeZone: tz, });
+  starttimeold = response[0].timestamps.beginsISO // When Alert Started
+  endtimeold = response[0].timestamps.expiresISO // When Alert Expires
+  tz = response[0].profile.tz // Timezone
+  /* Convert it to a string we are more familiar with
+    Example: 2021-10-04T17:08:09.000Z
+    String Conversion: October 4th, 2021 17:08:09 UTC
+  */
+ starttime = new Date(starttimeold).toLocaleString("en-US", {timeStyle: "short", timeZone: tz, }); //
  endtime = new Date(endtimeold).toLocaleString("en-US", {timeStyle: "short", timeZone: tz, });
   console.log(starttime)
   if (alert !== null) {

js/scriptcc.js

@@ -27,7 +27,7 @@
       }
  state = response[0].place.state
  tempFarenheit = response[0].periods[0].tempF
-tempC = response[0].perioFds[0].tempC
+tempC = response[0].periods[0].tempC
       const rainr = (response[0].periods[0].precipRateIN ).toFixed(3)
       document.getElementById('cityname').innerHTML = `<div class="city">Deluge - Weather for ${response[0].place.name}, ${state}</div>`;
       document.getElementById('temp').innerHTML = `${tempFarenheit}°F (${tempC}°C)`;
@@ -44,11 +44,12 @@ tempC = response[0].perioFds[0].tempC
       document.getElementById('rainrvalue').innerHTML = `${rainr} in./hr`;
       document.getElementById('solarvalue').innerHTML = `${response[0].periods[0].solradWM2} watts/m²`;
       document.getElementById("windmetric").innerHTML = `${response[0].periods[0].windSpeedKPH} km/h</div>`;
-      document.getElementById("radarimage").innerHTML = `<img style="width: 617px;" src="https://maps.aerisapi.com/${client_id}_${client_secret}/flat-dk,water-depth,satellite,radar,alerts-warnings-outlines,counties,lightning-strikes-15m-icons,roads,interstates,rivers,admin-cities-dk/1280x878/${city},9/current.png"/>`
+    radar = document.getElementById("radarimage").innerHTML = `<img style="width: 617px;" src="https://maps.aerisapi.com/${client_id}_${client_secret}/flat-dk,water-depth,satellite,radar,alerts-warnings-outlines,counties,lightning-strikes-15m-icons,roads,interstates,rivers,admin-cities-dk/1280x878/${city},9/current.png"/>`      
+
+         document.getElementById("LoadingScreen").style.display = "none"
+         document.getElementById("weatherpage").style.display = "block" 
       document.getElementById("windgust").innerHTML  = `Gusts to ${response[0].periods[0].windGustMPH} mph`
 
-          document.getElementById("LoadingScreen").style.display = "none"
-      document.getElementById("weatherpage").style.display = "block"
 
       // Twitter Card
       // Function to get the UV Value
@@ -117,7 +118,7 @@ tempC = response[0].perioFds[0].tempC
       const data = await responsee.json();
       const {response} = data;
    // Placeholder for if no matches for the if statements. 
-    riskphrase = ""
+   riskphrase = ""
       var risktype = response[0].details.risk.name
       if (risktype === "general risk") {
          riskphrase = "Isolated Instances of Lightning."
@@ -133,6 +134,7 @@ tempC = response[0].perioFds[0].tempC
             riskphrase = "Dangerous Thunderstorms Likely."
          } 
 
+
    }
    severeweather() 
    severeweathertommorow()
@@ -328,19 +330,24 @@ tempC = response[0].perioFds[0].tempC
    getAlert();
    const alert_url = `https://api.aerisapi.com/alerts/${city}?client_id=${client_id}&client_secret=${client_secret}`;
    async function getAlert() {
-      const responsee = await fetch(alert_url);
-      const data = await responsee.json();
+      const results = await fetch(alert_url);
+      const data = await results.json();
       const { response } = data;
-      document.getElementById('alerts').innerHTML = `<div style="background-color: #${response[0].details.color};">Alert: ${response[0].details.name} in effect for ${response[0].place.name} ${response[0].place.state}.<a href="alertdetail.html?city=${city}">Click Here for more information on alerts</a></div>`
-if (response[0].details.emergency === true) {
-   document.getElementById("alerts").innerHTML = `<div style="background-color: #${response[0].details.color};">Alert: ${response[0].details.name} (EMERGENCY) in effect for ${response[0].place.name} ${response[0].place.state}.<a href="alertdetail.html?city=${city}">Click Here for more information on alerts</a></div>`
-}
-      if (response[1].details.name !== "undefined") {
-         alerts.innerHTML = `<div style="background-color: #${response[0].details.color};">Alert: ${response[0].details.name} in effect for ${response[0].place.name} ${response[0].place.state}.<a href="alertdetail.html?city=${city}">Click Here for more information on alerts</a></div><div style="background-color: #${response[1].details.color};">Alert: ${response[1].details.name} in effect for ${response[0].place.name} ${response[0].place.state}.</div>`
-      } else {
-         alerts.innerHTML = `<div style="background-color: #${response[0].details.color};">Alert: ${response[0].details.name} in effect for ${response[0].place.name} ${response[0].place.state}.<a href="alertdetail.html?city=${city}">Click Here for more information on alerts</a></div>`
+
+      alerts.innerHTML = "";
+
+      if (response?.length > 0) {
+         return;
+      }
+
+      const details = response[0].details;
+      const place = response[0].place;
+
+      if (details?.name) {
+         alerts.innerHTML = `<div style="background-color: #${details.color};">Alert: ${details.name} in effect for ${place.name} ${place.state}.<a href="alertdetail.html?city=${city}">Click Here for more information on alerts</a></div>`
       }
    }
+
    getAlert();
    setInterval(getAlert, 60000)
 

lightning.html

@@ -2,9 +2,9 @@
     <head>
         <title id="title">Deluge - Lightning Map</title>
         <meta charset="UTF-8">
-        <link rel="stylesheet" href="stylecurrentconditions.css" />
-        <script type="text/javascript" src="config.js"></script>
-        <script type="text/javascript" src="lightning.js"></script>
+        <link rel="stylesheet" href="./css/stylecurrentconditions.css" />
+        <script type="text/javascript" src="./js/config.js"></script>
+        <script type="text/javascript" src="./js/lightning.js"></script>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
         <meta name="authors" content="Jesse Hasty">
         <meta name='viewport' content='width=device-width; content='width = 425; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes; target-densitydpi=160dpi'>