5.16.4

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "ws4kp",
-	"version": "5.16.2",
+	"version": "5.16.4",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "ws4kp",
-			"version": "5.16.2",
+			"version": "5.16.4",
 			"license": "MIT",
 			"dependencies": {
 				"ejs": "^3.1.5",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ws4kp",
-	"version": "5.16.2",
+	"version": "5.16.4",
 	"description": "Welcome to the WeatherStar 4000+ project page!",
 	"main": "index.mjs",
 	"type": "module",

server/scripts/modules/hourly.mjs

@@ -76,9 +76,9 @@ class Hourly extends WeatherDisplay {
 			const temperature = data.temperature.toString().padStart(3);
 			const feelsLike = data.apparentTemperature.toString().padStart(3);
 			fillValues.temp = temperature;
-			// only plot apparent temperature if there is a difference
-			// if (temperature !== feelsLike) line.querySelector('.like').innerHTML = feelsLike;
-			if (temperature !== feelsLike) fillValues.like = feelsLike;
+
+			// apparent temperature is color coded if different from actual temperature (after fill is applied)
+			fillValues.like = feelsLike;
 
 			// wind
 			let wind = 'Calm';
@@ -91,7 +91,17 @@ class Hourly extends WeatherDisplay {
 			// image
 			fillValues.icon = { type: 'img', src: data.icon };
 
-			return this.fillTemplate('hourly-row', fillValues);
+			const filledRow = this.fillTemplate('hourly-row', fillValues);
+
+			// alter the color of the feels like column to reflect wind chill or heat index
+			if (feelsLike < temperature) {
+				filledRow.querySelector('.like').classList.add('wind-chill');
+			}
+			if (feelsLike > temperature) {
+				filledRow.querySelector('.like').classList.add('heat-index');
+			}
+
+			return filledRow;
 		});
 
 		list.append(...lines);

server/scripts/modules/settings.mjs

@@ -22,7 +22,7 @@ const init = () => {
 		['us', 'US'],
 		['si', 'Metric'],
 	]);
-	settings.refreshTime = new Setting('refreshTime', 'Refresh Time', 'select', 30_000, null, false, [
+	settings.refreshTime = new Setting('refreshTime', 'Refresh Time', 'select', 600_000, null, false, [
 		[30_000, 'TESTING'],
 		[300_000, '5 minutes'],
 		[600_000, '10 minutes'],

server/scripts/modules/utils/setting.mjs

@@ -181,7 +181,7 @@ class Setting {
 
 	selectHighlight(newValue) {
 		// set the dropdown to the provided value
-		this.element.querySelectorAll('option').forEach((elem) => {
+		this?.element?.querySelectorAll('option')?.forEach?.((elem) => {
 			elem.selected = (newValue?.toFixed?.(2) === elem.value) || (newValue === elem.value);
 		});
 	}

server/styles/scss/_hourly.scss

@@ -82,6 +82,14 @@
 
 				.like {
 					left: 425px;
+
+					&.heat-index {
+						color: #e00;
+					}
+
+					&.wind-chill {
+						color: c.$extended-low;
+					}
 				}
 
 				.wind {