diff --git a/musicthread.html b/musicthread.html
index 2318688..b63a828 100644
--- a/musicthread.html
+++ b/musicthread.html
@@ -5,9 +5,10 @@
     <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>MusicThread  Test</title>
   <script>
-    // replace theme-song placeholder text when the musicthread response comes in
-    document.addEventListener('DOMContentLoaded', function() {
-      const themeSongContainer = document.getElementById('theme-song');
+  // replace theme-song placeholder text when the musicthread response comes in
+  document.addEventListener('DOMContentLoaded', function() {
+    const themeSongContainer = document.getElementById('theme-song');
+    if (themeSongContainer) {
       const observer = new MutationObserver(function(mutations) {
         mutations.forEach(function(mutation) {
           if (mutation.type === 'childList' && themeSongContainer.childNodes.length > 2) {
@@ -17,7 +18,10 @@
         });
       });
       observer.observe(themeSongContainer, { childList: true });
-    });
+    } else {
+      console.Warn('Theme song container not found');
+    }
+  });
   </script>
   </head>
   <body>
diff --git a/tempest.html b/tempest.html
index 4597cb6..9586538 100644
--- a/tempest.html
+++ b/tempest.html
@@ -4,133 +4,7 @@
     <meta charset="utf-8">
     <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>
-    // 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' }
-        ]
-
-        // 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 src="weather.js"></script>
   </head>
   <body>
     <h1>Local Weather</h1>
@@ -142,5 +16,6 @@
       <li>Precipitation: <i class='fa-solid fa-droplet-slash'></i><span id="rainToday">Loading...</span></li>
       <li>Pressure: <i class='fa-solid fa-arrow-right-long'></i><span id="pressure">Loading...</span></li>
       <li><i>Last Update: <span id="time">Loading...</span></i></li>
+    </ul>
   </body>
 </html>
\ No newline at end of file
diff --git a/web_head.html b/web_head.html
index 217bb11..2b2ac1f 100644
--- a/web_head.html
+++ b/web_head.html
@@ -7,156 +7,28 @@
 <script>
 // implement typo
 document.addEventListener('DOMContentLoaded', function() {
-  let element = document.getElementById('typo');
-  let text = "I write code to make imaginary computers run code written by less imaginary developers";
-  typo(element, text);
-});
-</script>
-<script>
-// 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' }
-    ]
-
-    // 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];
-      });
-  }
+  let typoElement = document.getElementById('typo');
+  let typoText = "I write code to make imaginary computers run code written by less imaginary developers";
+  typo(typoElement, typoText);
 });
 </script>
+<script src="https://res.jbowdre.lol/js/weather.js" defer></script>
 <script>
   // replace theme-song placeholder text when the musicthread response comes in
   document.addEventListener('DOMContentLoaded', function() {
     const themeSongContainer = document.getElementById('theme-song');
-    const observer = new MutationObserver(function(mutations) {
-      mutations.forEach(function(mutation) {
-        if (mutation.type === 'childList' && themeSongContainer.childNodes.length > 2) {
-          themeSongContainer.removeChild(themeSongContainer.firstChild);
-          observer.disconnect();
-        }
+    if (themeSongContainer) {
+      const observer = new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutation) {
+          if (mutation.type === 'childList' && themeSongContainer.childNodes.length > 2) {
+            themeSongContainer.removeChild(themeSongContainer.firstChild);
+            observer.disconnect();
+          }
+        });
       });
-    });
-    observer.observe(themeSongContainer, { childList: true });
+      observer.observe(themeSongContainer, { childList: true });
+    } else {
+      console.Warn('Theme song container not found');
+    }
   });
-</script>
-
-
-
-
-
-
+</script>
\ No newline at end of file
