2024-02-09 03:46:09 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<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>
|
2024-02-09 15:44:51 +00:00
|
|
|
// get ready to calculate relative time
|
|
|
|
|
var 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
|
|
|
|
|
}
|
|
|
|
|
var rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
|
|
|
|
|
var getRelativeTime = (d1, d2 = new Date()) => {
|
|
|
|
|
var 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)
|
|
|
|
|
}
|
2024-02-09 15:16:05 +00:00
|
|
|
|
2024-02-10 03:26:20 +00:00
|
|
|
var tempRanges = [
|
|
|
|
|
{ upper: 32, label: 'cold' },
|
|
|
|
|
{ upper: 60, label: 'cool' },
|
|
|
|
|
{ upper: 80, label: 'warm' },
|
|
|
|
|
{ upper: Infinity, label: 'hot' }
|
|
|
|
|
];
|
|
|
|
|
|
2024-02-10 03:47:31 +00:00
|
|
|
var rainRanges = [
|
|
|
|
|
{ upper: 0.02, label: 'none' },
|
|
|
|
|
{ upper: 0.2, label: 'light' },
|
|
|
|
|
{ upper: 1.4, label: 'moderate' },
|
|
|
|
|
{ upper: Infinity, label: 'heavy' }
|
|
|
|
|
]
|
|
|
|
|
|
2024-02-09 15:16:05 +00:00
|
|
|
// weather code inspired by https://kris.omg.lol
|
2024-02-09 03:46:09 +00:00
|
|
|
// fetch from API proxy
|
2024-02-10 15:08:13 +00:00
|
|
|
fetch('https://paste.jbowdre.lol/testest.json/raw')
|
2024-02-09 03:46:09 +00:00
|
|
|
.then(res => res.json())
|
|
|
|
|
.then(function(res){
|
|
|
|
|
|
2024-02-09 15:16:05 +00:00
|
|
|
// calculate age of last update
|
|
|
|
|
updateTime = res.time;
|
|
|
|
|
var updateTime = parseInt(updateTime);
|
|
|
|
|
var updateTime = updateTime*1000;
|
|
|
|
|
var updateTime = new Date(updateTime);
|
|
|
|
|
updateAge = getRelativeTime(updateTime);
|
|
|
|
|
|
|
|
|
|
// parse data
|
2024-02-09 15:44:51 +00:00
|
|
|
conditions = (res.conditions).toLowerCase();
|
2024-02-10 03:05:40 +00:00
|
|
|
tempDiff = Math.abs(res.air_temperature - res.feels_like);
|
|
|
|
|
temp = `${res.air_temperature}°f (${(((res.air_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)`;
|
|
|
|
|
}
|
2024-02-10 03:26:20 +00:00
|
|
|
tempLabel = (tempRanges.find(range => res.feels_like < range.upper)).label;
|
2024-02-10 03:05:40 +00:00
|
|
|
humidity = `${res.relative_humidity}% humidity`;
|
|
|
|
|
wind = `${res.wind_gust}mph (${(res.wind_gust*1.609344).toFixed(1)}kph) from ${(res.wind_direction_cardinal).toLowerCase()}`;
|
2024-02-10 03:47:31 +00:00
|
|
|
precipLabel = (rainRanges.find(range => res.precip_accum_local_day < range.upper)).label;
|
2024-02-10 15:08:13 +00:00
|
|
|
precipToday = `${res.precip_accum_local_day}" rain today`;
|
2024-02-09 03:46:09 +00:00
|
|
|
pressureTrend = res.pressure_trend;
|
2024-02-10 03:05:40 +00:00
|
|
|
pressure = `${res.station_pressure}inhg and ${pressureTrend}`;
|
2024-02-09 03:46:09 +00:00
|
|
|
icon = res.icon;
|
|
|
|
|
|
|
|
|
|
// display data
|
2024-02-09 15:16:05 +00:00
|
|
|
document.getElementById('time').innerHTML = updateAge;
|
2024-02-09 03:46:09 +00:00
|
|
|
document.getElementsByClassName('fa-cloud-sun-rain')[0].classList = CLASS_MAP_WX[icon];
|
|
|
|
|
document.getElementById('conditions').innerHTML = conditions;
|
2024-02-10 03:26:20 +00:00
|
|
|
document.getElementsByClassName('fa-temperature-half')[0].classList = CLASS_MAP_TEMP[tempLabel];
|
2024-02-09 03:46:09 +00:00
|
|
|
document.getElementById('temp').innerHTML = temp;
|
|
|
|
|
document.getElementById('humidity').innerHTML = humidity;
|
|
|
|
|
document.getElementById('wind').innerHTML = wind;
|
2024-02-10 03:47:31 +00:00
|
|
|
document.getElementsByClassName('fa-droplet-slash')[0].classList = CLASS_MAP_RAIN[precipLabel];
|
2024-02-09 03:46:09 +00:00
|
|
|
document.getElementById('precipToday').innerHTML = precipToday;
|
|
|
|
|
document.getElementsByClassName('fa-arrow-right-long')[0].classList = CLASS_MAP_PRESS[pressureTrend];
|
|
|
|
|
document.getElementById('pressure').innerHTML = pressure;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// change the pressure icon
|
|
|
|
|
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'
|
|
|
|
|
}
|
|
|
|
|
|
2024-02-10 03:47:31 +00:00
|
|
|
// change the rainfall icon
|
|
|
|
|
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'
|
|
|
|
|
}
|
|
|
|
|
|
2024-02-10 03:26:20 +00:00
|
|
|
// change the temperature icon
|
|
|
|
|
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'
|
|
|
|
|
}
|
|
|
|
|
|
2024-02-09 04:40:37 +00:00
|
|
|
// change the weather icon
|
2024-02-09 03:46:09 +00:00
|
|
|
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-clouds-sun',
|
|
|
|
|
'partly-cloudy-night': 'fa-solid fa-clouds-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',
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2024-02-09 04:40:37 +00:00
|
|
|
<h1>Local Weather</h1>
|
2024-02-09 03:46:09 +00:00
|
|
|
<ul>
|
|
|
|
|
<li>Conditions: <i class='fa-solid fa-cloud-sun-rain'></i><span id="conditions"></span></li>
|
2024-02-10 03:26:20 +00:00
|
|
|
<li>Temperature: <i class='fa-solid fa-temperature-half'></i> <span id="temp"></span></li>
|
2024-02-09 03:46:09 +00:00
|
|
|
<li>Humidity: <span id="humidity"></span></li>
|
|
|
|
|
<li>Wind: <span id="wind"></span></li>
|
2024-02-10 03:47:31 +00:00
|
|
|
<li>Precipitation: <i class='fa-solid fa-droplet-slash'></i><span id="precipToday"></span></li>
|
2024-02-09 03:46:09 +00:00
|
|
|
<li>Pressure: <i class='fa-solid fa-arrow-right-long'></i><span id="pressure"></span></li>
|
2024-02-09 04:40:37 +00:00
|
|
|
<li><i>Last Update: <span id="time"></span></i></li>
|
2024-02-09 03:46:09 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
