lolz/tempest.html

102 lines
4.4 KiB
HTML
Raw Normal View History

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>
// 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)
}
// weather code inspired by https://kris.omg.lol
2024-02-09 03:46:09 +00:00
// fetch from API proxy
fetch('https://paste.jbowdre.lol/tempest.json/raw')
.then(res => res.json())
.then(function(res){
// 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
conditions = (res.conditions).toLowerCase();
temp = (res.air_temperature)+ "°f ("+(((res.air_temperature-32)*5)/9).toFixed(1) + "°c)";
humidity = res.relative_humidity + "% humidity";
wind = res.wind_gust + "mph (" + (res.wind_gust*1.609344).toFixed(1)+ "kph) from the " + (res.wind_direction_cardinal).toLowerCase();
precipToday = res.precip_accum_local_day + '" of rain today';
2024-02-09 03:46:09 +00:00
pressureTrend = res.pressure_trend;
pressure = (res.station_pressure).toFixed(2) + 'inhg and ' + pressureTrend;
2024-02-09 03:46:09 +00:00
icon = res.icon;
// display data
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;
document.getElementById('temp').innerHTML = temp;
document.getElementById('humidity').innerHTML = humidity;
document.getElementById('wind').innerHTML = wind;
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-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>
<li>Temperature: <span id="temp"></span></li>
<li>Humidity: <span id="humidity"></span></li>
<li>Wind: <span id="wind"></span></li>
<li>Precipitation: <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>