From e680d32e32ed042ccefdd79dd7f98cd2e0211a59 Mon Sep 17 00:00:00 2001
From: John Bowdre <john@bowdre.net>
Date: Wed, 1 May 2024 21:15:51 -0500
Subject: [PATCH] api retrieval improvements

- get musicthread from pastebin instead of direct
- don't execute scripts until page is fully loaded
- only execute script if matching element id is on page
---
 musicthread.html |  21 ++--
 tempest.html     | 238 ++++++++++++++++++++++---------------------
 web_head.html    | 257 ++++++++++++++++++++++++-----------------------
 3 files changed, 269 insertions(+), 247 deletions(-)
diff --git a/musicthread.html b/musicthread.html
index 0d9810b..4390405 100644
--- a/musicthread.html
+++ b/musicthread.html
@@ -6,19 +6,24 @@
     <title>MusicThread  Test</title>
     <script>
       // retrieves latest link from a musicthread thread and displays it on the page
-      const musicthread = 'https://musicthread.app/api/v0/thread/2aVjZUocjk96LELFbV5JvJjm14v';
-      fetch(musicthread)
-        .then(res => res.json())
-        .then(function(res){
-          let nowPlaying = res.links[0];
-          document.getElementById('now-playing').innerHTML = "<a href='" + nowPlaying.page_url + "'>" + nowPlaying.title + "</a> by " + nowPlaying.artist;
-        });
+      document.addEventListener("DOMContentLoaded", function() {
+        const musicthread = "https://jbowdre.paste.lol/musicthread.json/raw";
+        const nowPlayingElement = document.getElementById("now-playing");
+        if (nowPlayingElement) {
+          fetch(musicthread)
+            .then(res => res.json())
+            .then(function(res){
+              let nowPlaying = res;
+              nowPlayingElement.innerHTML = "<a href='" + nowPlaying.page_url + "'>" + nowPlaying.title + "</a> by " + nowPlaying.artist;
+            });
+        }
+      });
     </script>
   </head>
   <body>
     <h1>Now Playing</h1>
     <ul>
-      <li><span id="now-playing"> <i class='fa-solid fa-headphones'></i></span></li>
+      <li><span id="now-playing"></span> <i class='fa-solid fa-headphones'></i></li>
     </ul>
   </body>
 </html>
\ No newline at end of file
diff --git a/tempest.html b/tempest.html
index c79c351..0cd099a 100644
--- a/tempest.html
+++ b/tempest.html
@@ -5,125 +5,131 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous">
     <title>Weather Test</title>
     <script>
-      const wx_endpoint = 'https://paste.jbowdre.lol/tempest.json/raw';
-      // get ready to calculate relative time
-      const units = {
-        year  : 24 * 60 * 60 * 1000 * 365,
-        month : 24 * 60 * 60 * 1000 * 365/12,
-        day   : 24 * 60 * 60 * 1000,
-        hour  : 60 * 60 * 1000,
-        minute: 60 * 1000,
-        second: 1000
-      }
-      let rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
-      let getRelativeTime = (d1, d2 = new Date()) => {
-        let elapsed = d1 - d2
-        for (var u in units)
-          if (Math.abs(elapsed) > units[u] || u === 'second')
-            return rtf.format(Math.round(elapsed/units[u]), u)
-      }
+    // get weather data from pastebin
+    document.addEventListener("DOMContentLoaded", function() {
+      const hasWeather = document.getElementById('conditions');
+      if (hasWeather) {
+        const wx_endpoint = 'https://paste.jbowdre.lol/tempest.json/raw';
+        // get ready to calculate relative time
+        const units = {
+          year  : 24 * 60 * 60 * 1000 * 365,
+          month : 24 * 60 * 60 * 1000 * 365/12,
+          day   : 24 * 60 * 60 * 1000,
+          hour  : 60 * 60 * 1000,
+          minute: 60 * 1000,
+          second: 1000
+        }
+        let rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
+        let getRelativeTime = (d1, d2 = new Date()) => {
+          let elapsed = d1 - d2
+          for (var u in units)
+            if (Math.abs(elapsed) > units[u] || u === 'second')
+              return rtf.format(Math.round(elapsed/units[u]), u)
+        }
 
-      // set up temperature and rain ranges
-      const tempRanges = [
-        { upper: 32, label: 'cold' },
-        { upper: 60, label: 'cool' },
-        { upper: 80, label: 'warm' },
-        { upper: Infinity, label: 'hot' }
-      ];
-      const rainRanges = [
-        { upper: 0.02, label: 'none' },
-        { upper: 0.2, label: 'light' },
-        { upper: 1.4, label: 'moderate' },
-        { upper: Infinity, label: 'heavy' }
-      ]
+        // set up temperature and rain ranges
+        const tempRanges = [
+          { upper: 32, label: 'cold' },
+          { upper: 60, label: 'cool' },
+          { upper: 80, label: 'warm' },
+          { upper: Infinity, label: 'hot' }
+        ];
+        const rainRanges = [
+          { upper: 0.02, label: 'none' },
+          { upper: 0.2, label: 'light' },
+          { upper: 1.4, label: 'moderate' },
+          { upper: Infinity, label: 'heavy' }
+        ]
 
-      // maps for selecting icons
-      const CLASS_MAP_PRESS = {
-        'steady': 'fa-solid fa-arrow-right-long',
-        'rising': 'fa-solid fa-arrow-trend-up',
-        'falling': 'fa-solid fa-arrow-trend-down'
+        // maps for selecting icons
+        const CLASS_MAP_PRESS = {
+          'steady': 'fa-solid fa-arrow-right-long',
+          'rising': 'fa-solid fa-arrow-trend-up',
+          'falling': 'fa-solid fa-arrow-trend-down'
+        }
+        const CLASS_MAP_RAIN = {
+          'none': 'fa-solid fa-droplet-slash',
+          'light': 'fa-solid fa-glass-water-droplet',
+          'moderate': 'fa-solid fa-glass-water',
+          'heavy': 'fa-solid fa-bucket'
+        }
+        const CLASS_MAP_TEMP = {
+          'hot': 'fa-solid fa-thermometer-full',
+          'warm': 'fa-solid fa-thermometer-half',
+          'cool': 'fa-solid fa-thermometer-quarter',
+          'cold': 'fa-solid fa-thermometer-empty'
+        }
+        const CLASS_MAP_WX = {
+          'clear-day': 'fa-solid fa-sun',
+          'clear-night': 'fa-solid fa-moon',
+          'cloudy': 'fa-solid fa-cloud',
+          'foggy': 'fa-solid fa-cloud-showers-smog',
+          'partly-cloudy-day': 'fa-solid fa-cloud-sun',
+          'partly-cloudy-night': 'fa-solid fa-cloud-moon',
+          'possibly-rainy-day': 'fa-solid fa-cloud-sun-rain',
+          'possibly-rainy-night': 'fa-solid fa-cloud-moon-rain',
+          'possibly-sleet-day': 'fa-solid fa-cloud-meatball',
+          'possibly-sleet-night': 'fa-solid fa-cloud-moon-rain',
+          'possibly-snow-day': 'fa-solid fa-snowflake',
+          'possibly-snow-night': 'fa-solid fa-snowflake',
+          'possibly-thunderstorm-day': 'fa-solid fa-cloud-bolt',
+          'possibly-thunderstorm-night': 'fa-solid fa-cloud-bolt',
+          'rainy': 'fa-solid fa-cloud-showers-heavy',
+          'sleet': 'fa-solid fa-cloud-rain',
+          'snow': 'fa-solid fa-snowflake',
+          'thunderstorm': 'fa-solid fa-cloud-bolt',
+          'windy': 'fa-solid fa-wind',
+        }
+
+        // fetch data from pastebin
+        fetch(wx_endpoint)
+          .then(res => res.json())
+          .then(function(res){
+
+            // calculate age of last update
+            let updateTime = res.time;
+            updateTime = parseInt(updateTime);
+            updateTime = updateTime*1000;
+            updateTime = new Date(updateTime);
+            let updateAge = getRelativeTime(updateTime);
+
+            // parse data
+            let conditions = (res.conditions).toLowerCase();
+            let tempDiff = Math.abs(res.temperature - res.feels_like);
+            let temp = `${res.temperature}°f (${(((res.temperature - 32) * 5) / 9).toFixed(1)}°c)`;
+            if (tempDiff >= 5) {
+              temp += `, feels ${res.feels_like}°f (${(((res.feels_like - 32) *5) / 9).toFixed(1)}°c)`;
+            }
+            let tempLabel = (tempRanges.find(range => res.feels_like < range.upper)).label;
+            let humidity = `${res.humidity}% humidity`;
+            let wind = `${res.wind_gust}mph (${(res.wind_gust*1.609344).toFixed(1)}kph) from ${(res.wind_direction).toLowerCase()}`;
+            let rainLabel = (rainRanges.find(range => res.rain_today < range.upper)).label;
+            let rainToday;
+            if (res.rain_today === 0) {
+              rainToday = 'no rain today';
+            } else {
+              rainToday = `${res.rain_today}" rain today`;
+            }
+            let pressureTrend = res.pressure_trend;
+            let pressure = `${res.pressure}inhg and ${pressureTrend}`;
+            let icon = res.icon;
+
+            // display data
+            document.getElementById('time').innerHTML = updateAge;
+            document.getElementById('conditions').innerHTML = conditions;
+            document.getElementById('temp').innerHTML = temp;
+            document.getElementById('humidity').innerHTML = humidity;
+            document.getElementById('wind').innerHTML = wind;
+            document.getElementById('rainToday').innerHTML = rainToday;
+            document.getElementById('pressure').innerHTML = pressure;
+            // update icons
+            document.getElementsByClassName('fa-cloud-sun-rain')[0].classList = CLASS_MAP_WX[icon];
+            document.getElementsByClassName('fa-temperature-half')[0].classList = CLASS_MAP_TEMP[tempLabel];
+            document.getElementsByClassName('fa-droplet-slash')[0].classList = CLASS_MAP_RAIN[rainLabel];
+            document.getElementsByClassName('fa-arrow-right-long')[0].classList = CLASS_MAP_PRESS[pressureTrend];
+          });
       }
-      const CLASS_MAP_RAIN = {
-        'none': 'fa-solid fa-droplet-slash',
-        'light': 'fa-solid fa-glass-water-droplet',
-        'moderate': 'fa-solid fa-glass-water',
-        'heavy': 'fa-solid fa-bucket'
-      }
-      const CLASS_MAP_TEMP = {
-        'hot': 'fa-solid fa-thermometer-full',
-        'warm': 'fa-solid fa-thermometer-half',
-        'cool': 'fa-solid fa-thermometer-quarter',
-        'cold': 'fa-solid fa-thermometer-empty'
-      }
-      const CLASS_MAP_WX = {
-        'clear-day': 'fa-solid fa-sun',
-        'clear-night': 'fa-solid fa-moon',
-        'cloudy': 'fa-solid fa-cloud',
-        'foggy': 'fa-solid fa-cloud-showers-smog',
-        'partly-cloudy-day': 'fa-solid fa-cloud-sun',
-        'partly-cloudy-night': 'fa-solid fa-cloud-moon',
-        'possibly-rainy-day': 'fa-solid fa-cloud-sun-rain',
-        'possibly-rainy-night': 'fa-solid fa-cloud-moon-rain',
-        'possibly-sleet-day': 'fa-solid fa-cloud-meatball',
-        'possibly-sleet-night': 'fa-solid fa-cloud-moon-rain',
-        'possibly-snow-day': 'fa-solid fa-snowflake',
-        'possibly-snow-night': 'fa-solid fa-snowflake',
-        'possibly-thunderstorm-day': 'fa-solid fa-cloud-bolt',
-        'possibly-thunderstorm-night': 'fa-solid fa-cloud-bolt',
-        'rainy': 'fa-solid fa-cloud-showers-heavy',
-        'sleet': 'fa-solid fa-cloud-rain',
-        'snow': 'fa-solid fa-snowflake',
-        'thunderstorm': 'fa-solid fa-cloud-bolt',
-        'windy': 'fa-solid fa-wind',
-      }
-
-      // fetch data from pastebin
-      fetch(wx_endpoint)
-        .then(res => res.json())
-        .then(function(res){
-
-          // calculate age of last update
-          let updateTime = res.time;
-          updateTime = parseInt(updateTime);
-          updateTime = updateTime*1000;
-          updateTime = new Date(updateTime);
-          let updateAge = getRelativeTime(updateTime);
-
-          // parse data
-          let conditions = (res.conditions).toLowerCase();
-          let tempDiff = Math.abs(res.temperature - res.feels_like);
-          let temp = `${res.temperature}°f (${(((res.temperature - 32) * 5) / 9).toFixed(1)}°c)`;
-          if (tempDiff >= 5) {
-            temp += `, feels ${res.feels_like}°f (${(((res.feels_like - 32) *5) / 9).toFixed(1)}°c)`;
-          }
-          let tempLabel = (tempRanges.find(range => res.feels_like < range.upper)).label;
-          let humidity = `${res.humidity}% humidity`;
-          let wind = `${res.wind_gust}mph (${(res.wind_gust*1.609344).toFixed(1)}kph) from ${(res.wind_direction).toLowerCase()}`;
-          let rainLabel = (rainRanges.find(range => res.rain_today < range.upper)).label;
-          let rainToday;
-          if (res.rain_today === 0) {
-            rainToday = 'no rain today';
-          } else {
-            rainToday = `${res.rain_today}" rain today`;
-          }
-          let pressureTrend = res.pressure_trend;
-          let pressure = `${res.pressure}inhg and ${pressureTrend}`;
-          let icon = res.icon;
-
-          // display data
-          document.getElementById('time').innerHTML = updateAge;
-          document.getElementById('conditions').innerHTML = conditions;
-          document.getElementById('temp').innerHTML = temp;
-          document.getElementById('humidity').innerHTML = humidity;
-          document.getElementById('wind').innerHTML = wind;
-          document.getElementById('rainToday').innerHTML = rainToday;
-          document.getElementById('pressure').innerHTML = pressure;
-          // update icons
-          document.getElementsByClassName('fa-cloud-sun-rain')[0].classList = CLASS_MAP_WX[icon];
-          document.getElementsByClassName('fa-temperature-half')[0].classList = CLASS_MAP_TEMP[tempLabel];
-          document.getElementsByClassName('fa-droplet-slash')[0].classList = CLASS_MAP_RAIN[rainLabel];
-          document.getElementsByClassName('fa-arrow-right-long')[0].classList = CLASS_MAP_PRESS[pressureTrend];
-        });
+    });
     </script>
   </head>
   <body>
diff --git a/web_head.html b/web_head.html
index 688bcda..ceaa74f 100644
--- a/web_head.html
+++ b/web_head.html
@@ -1,134 +1,145 @@
 <link rel="me" title="proven.lol" href="https://proven.lol/4cc26c">
 <script src="https://tinylytics.app/embed/QUH6xcnWKYeUUYaMkDKd.js?kudos=👋" defer></script>
 <script>
-const wx_endpoint = 'https://paste.jbowdre.lol/tempest.json/raw';
-// get ready to calculate relative time
-const units = {
-  year  : 24 * 60 * 60 * 1000 * 365,
-  month : 24 * 60 * 60 * 1000 * 365/12,
-  day   : 24 * 60 * 60 * 1000,
-  hour  : 60 * 60 * 1000,
-  minute: 60 * 1000,
-  second: 1000
-}
-let rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
-let getRelativeTime = (d1, d2 = new Date()) => {
-  let elapsed = d1 - d2
-  for (var u in units)
-    if (Math.abs(elapsed) > units[u] || u === 'second')
-      return rtf.format(Math.round(elapsed/units[u]), u)
-}
-
-// set up temperature and rain ranges
-const tempRanges = [
-  { upper: 32, label: 'cold' },
-  { upper: 60, label: 'cool' },
-  { upper: 80, label: 'warm' },
-  { upper: Infinity, label: 'hot' }
-];
-const rainRanges = [
-  { upper: 0.02, label: 'none' },
-  { upper: 0.2, label: 'light' },
-  { upper: 1.4, label: 'moderate' },
-  { upper: Infinity, label: 'heavy' }
-]
-
-// maps for selecting icons
-const CLASS_MAP_PRESS = {
-  'steady': 'fa-solid fa-arrow-right-long',
-  'rising': 'fa-solid fa-arrow-trend-up',
-  'falling': 'fa-solid fa-arrow-trend-down'
-}
-const CLASS_MAP_RAIN = {
-  'none': 'fa-solid fa-droplet-slash',
-  'light': 'fa-solid fa-glass-water-droplet',
-  'moderate': 'fa-solid fa-glass-water',
-  'heavy': 'fa-solid fa-bucket'
-}
-const CLASS_MAP_TEMP = {
-  'hot': 'fa-solid fa-thermometer-full',
-  'warm': 'fa-solid fa-thermometer-half',
-  'cool': 'fa-solid fa-thermometer-quarter',
-  'cold': 'fa-solid fa-thermometer-empty'
-}
-const CLASS_MAP_WX = {
-  'clear-day': 'fa-solid fa-sun',
-  'clear-night': 'fa-solid fa-moon',
-  'cloudy': 'fa-solid fa-cloud',
-  'foggy': 'fa-solid fa-cloud-showers-smog',
-  'partly-cloudy-day': 'fa-solid fa-cloud-sun',
-  'partly-cloudy-night': 'fa-solid fa-cloud-moon',
-  'possibly-rainy-day': 'fa-solid fa-cloud-sun-rain',
-  'possibly-rainy-night': 'fa-solid fa-cloud-moon-rain',
-  'possibly-sleet-day': 'fa-solid fa-cloud-meatball',
-  'possibly-sleet-night': 'fa-solid fa-cloud-moon-rain',
-  'possibly-snow-day': 'fa-solid fa-snowflake',
-  'possibly-snow-night': 'fa-solid fa-snowflake',
-  'possibly-thunderstorm-day': 'fa-solid fa-cloud-bolt',
-  'possibly-thunderstorm-night': 'fa-solid fa-cloud-bolt',
-  'rainy': 'fa-solid fa-cloud-showers-heavy',
-  'sleet': 'fa-solid fa-cloud-rain',
-  'snow': 'fa-solid fa-snowflake',
-  'thunderstorm': 'fa-solid fa-cloud-bolt',
-  'windy': 'fa-solid fa-wind',
-}
-
-// fetch data from pastebin
-fetch(wx_endpoint)
-  .then(res => res.json())
-  .then(function(res){
-
-    // calculate age of last update
-    let updateTime = res.time;
-    updateTime = parseInt(updateTime);
-    updateTime = updateTime*1000;
-    updateTime = new Date(updateTime);
-    let updateAge = getRelativeTime(updateTime);
-
-    // parse data
-    let conditions = (res.conditions).toLowerCase();
-    let tempDiff = Math.abs(res.temperature - res.feels_like);
-    let temp = `${res.temperature}°f (${(((res.temperature - 32) * 5) / 9).toFixed(1)}°c)`;
-    if (tempDiff >= 5) {
-      temp += `, feels ${res.feels_like}°f (${(((res.feels_like - 32) *5) / 9).toFixed(1)}°c)`;
+// get weather data from pastebin
+document.addEventListener("DOMContentLoaded", function() {
+  const hasWeather = document.getElementById('conditions');
+  if (hasWeather) {
+    const wx_endpoint = 'https://paste.jbowdre.lol/tempest.json/raw';
+    // get ready to calculate relative time
+    const units = {
+      year  : 24 * 60 * 60 * 1000 * 365,
+      month : 24 * 60 * 60 * 1000 * 365/12,
+      day   : 24 * 60 * 60 * 1000,
+      hour  : 60 * 60 * 1000,
+      minute: 60 * 1000,
+      second: 1000
     }
-    let tempLabel = (tempRanges.find(range => res.feels_like < range.upper)).label;
-    let humidity = `${res.humidity}% humidity`;
-    let wind = `${res.wind_gust}mph (${(res.wind_gust*1.609344).toFixed(1)}kph) from ${(res.wind_direction).toLowerCase()}`;
-    let rainLabel = (rainRanges.find(range => res.rain_today < range.upper)).label;
-    let rainToday;
-    if (res.rain_today === 0) {
-      rainToday = 'no rain today';
-    } else {
-      rainToday = `${res.rain_today}" rain today`;
+    let rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
+    let getRelativeTime = (d1, d2 = new Date()) => {
+      let elapsed = d1 - d2
+      for (var u in units)
+        if (Math.abs(elapsed) > units[u] || u === 'second')
+          return rtf.format(Math.round(elapsed/units[u]), u)
     }
-    let pressureTrend = res.pressure_trend;
-    let pressure = `${res.pressure}inhg and ${pressureTrend}`;
-    let icon = res.icon;
 
-    // display data
-    document.getElementById('time').innerHTML = updateAge;
-    document.getElementById('conditions').innerHTML = conditions;
-    document.getElementById('temp').innerHTML = temp;
-    document.getElementById('humidity').innerHTML = humidity;
-    document.getElementById('wind').innerHTML = wind;
-    document.getElementById('rainToday').innerHTML = rainToday;
-    document.getElementById('pressure').innerHTML = pressure;
-    // update icons
-    document.getElementsByClassName('fa-cloud-sun-rain')[0].classList = CLASS_MAP_WX[icon];
-    document.getElementsByClassName('fa-temperature-half')[0].classList = CLASS_MAP_TEMP[tempLabel];
-    document.getElementsByClassName('fa-droplet-slash')[0].classList = CLASS_MAP_RAIN[rainLabel];
-    document.getElementsByClassName('fa-arrow-right-long')[0].classList = CLASS_MAP_PRESS[pressureTrend];
-  });
+    // set up temperature and rain ranges
+    const tempRanges = [
+      { upper: 32, label: 'cold' },
+      { upper: 60, label: 'cool' },
+      { upper: 80, label: 'warm' },
+      { upper: Infinity, label: 'hot' }
+    ];
+    const rainRanges = [
+      { upper: 0.02, label: 'none' },
+      { upper: 0.2, label: 'light' },
+      { upper: 1.4, label: 'moderate' },
+      { upper: Infinity, label: 'heavy' }
+    ]
+
+    // maps for selecting icons
+    const CLASS_MAP_PRESS = {
+      'steady': 'fa-solid fa-arrow-right-long',
+      'rising': 'fa-solid fa-arrow-trend-up',
+      'falling': 'fa-solid fa-arrow-trend-down'
+    }
+    const CLASS_MAP_RAIN = {
+      'none': 'fa-solid fa-droplet-slash',
+      'light': 'fa-solid fa-glass-water-droplet',
+      'moderate': 'fa-solid fa-glass-water',
+      'heavy': 'fa-solid fa-bucket'
+    }
+    const CLASS_MAP_TEMP = {
+      'hot': 'fa-solid fa-thermometer-full',
+      'warm': 'fa-solid fa-thermometer-half',
+      'cool': 'fa-solid fa-thermometer-quarter',
+      'cold': 'fa-solid fa-thermometer-empty'
+    }
+    const CLASS_MAP_WX = {
+      'clear-day': 'fa-solid fa-sun',
+      'clear-night': 'fa-solid fa-moon',
+      'cloudy': 'fa-solid fa-cloud',
+      'foggy': 'fa-solid fa-cloud-showers-smog',
+      'partly-cloudy-day': 'fa-solid fa-cloud-sun',
+      'partly-cloudy-night': 'fa-solid fa-cloud-moon',
+      'possibly-rainy-day': 'fa-solid fa-cloud-sun-rain',
+      'possibly-rainy-night': 'fa-solid fa-cloud-moon-rain',
+      'possibly-sleet-day': 'fa-solid fa-cloud-meatball',
+      'possibly-sleet-night': 'fa-solid fa-cloud-moon-rain',
+      'possibly-snow-day': 'fa-solid fa-snowflake',
+      'possibly-snow-night': 'fa-solid fa-snowflake',
+      'possibly-thunderstorm-day': 'fa-solid fa-cloud-bolt',
+      'possibly-thunderstorm-night': 'fa-solid fa-cloud-bolt',
+      'rainy': 'fa-solid fa-cloud-showers-heavy',
+      'sleet': 'fa-solid fa-cloud-rain',
+      'snow': 'fa-solid fa-snowflake',
+      'thunderstorm': 'fa-solid fa-cloud-bolt',
+      'windy': 'fa-solid fa-wind',
+    }
+
+    // fetch data from pastebin
+    fetch(wx_endpoint)
+      .then(res => res.json())
+      .then(function(res){
+
+        // calculate age of last update
+        let updateTime = res.time;
+        updateTime = parseInt(updateTime);
+        updateTime = updateTime*1000;
+        updateTime = new Date(updateTime);
+        let updateAge = getRelativeTime(updateTime);
+
+        // parse data
+        let conditions = (res.conditions).toLowerCase();
+        let tempDiff = Math.abs(res.temperature - res.feels_like);
+        let temp = `${res.temperature}°f (${(((res.temperature - 32) * 5) / 9).toFixed(1)}°c)`;
+        if (tempDiff >= 5) {
+          temp += `, feels ${res.feels_like}°f (${(((res.feels_like - 32) *5) / 9).toFixed(1)}°c)`;
+        }
+        let tempLabel = (tempRanges.find(range => res.feels_like < range.upper)).label;
+        let humidity = `${res.humidity}% humidity`;
+        let wind = `${res.wind_gust}mph (${(res.wind_gust*1.609344).toFixed(1)}kph) from ${(res.wind_direction).toLowerCase()}`;
+        let rainLabel = (rainRanges.find(range => res.rain_today < range.upper)).label;
+        let rainToday;
+        if (res.rain_today === 0) {
+          rainToday = 'no rain today';
+        } else {
+          rainToday = `${res.rain_today}" rain today`;
+        }
+        let pressureTrend = res.pressure_trend;
+        let pressure = `${res.pressure}inhg and ${pressureTrend}`;
+        let icon = res.icon;
+
+        // display data
+        document.getElementById('time').innerHTML = updateAge;
+        document.getElementById('conditions').innerHTML = conditions;
+        document.getElementById('temp').innerHTML = temp;
+        document.getElementById('humidity').innerHTML = humidity;
+        document.getElementById('wind').innerHTML = wind;
+        document.getElementById('rainToday').innerHTML = rainToday;
+        document.getElementById('pressure').innerHTML = pressure;
+        // update icons
+        document.getElementsByClassName('fa-cloud-sun-rain')[0].classList = CLASS_MAP_WX[icon];
+        document.getElementsByClassName('fa-temperature-half')[0].classList = CLASS_MAP_TEMP[tempLabel];
+        document.getElementsByClassName('fa-droplet-slash')[0].classList = CLASS_MAP_RAIN[rainLabel];
+        document.getElementsByClassName('fa-arrow-right-long')[0].classList = CLASS_MAP_PRESS[pressureTrend];
+      });
+  }
+});
 </script>
 <script>
 // retrieves latest link from a musicthread thread and displays it on the page
-const musicthread = 'https://musicthread.app/api/v0/thread/2aVjZUocjk96LELFbV5JvJjm14v';
-fetch(musicthread)
-  .then(res => res.json())
-  .then(function(res){
-    let nowPlaying = res.links[0];
-    document.getElementById('now-playing').innerHTML = "<a href='" + nowPlaying.page_url + "'>" + nowPlaying.title + "</a> by " + nowPlaying.artist;
-  });
+document.addEventListener("DOMContentLoaded", function() {
+  const musicthread = 'https://musicthread.app/api/v0/thread/2aVjZUocjk96LELFbV5JvJjm14v';
+  const nowPlayingElement = document.getElementById('now-playing');
+  if (nowPlayingElement) {
+    fetch(musicthread)
+      .then(res => res.json())
+      .then(function(res){
+        let nowPlaying = res.links[0];
+        nowPlayingElement.innerHTML = "<a href='" + nowPlaying.page_url + "'>" + nowPlaying.title + "</a> by " + nowPlaying.artist;
+      });
+  }
+});
 </script>
 
