mirror of
https://github.com/jbowdre/lolz.git
synced 2024-11-12 17:32:19 +00:00
85 lines
4 KiB
HTML
85 lines
4 KiB
HTML
|
<!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>
|
||
|
|
// based on https://kris.omg.lol
|
||
|
|
// fetch from API proxy
|
||
|
|
fetch('https://paste.jbowdre.lol/tempest.json/raw')
|
||
|
|
.then(res => res.json())
|
||
|
|
.then(function(res){
|
||
|
|
|
||
|
|
// format data
|
||
|
|
localTime = res.time;
|
||
|
|
var localTime = parseInt(localTime);
|
||
|
|
var localTime = localTime*1000;
|
||
|
|
var localTime = new Date(localTime);
|
||
|
|
var localDate = localTime.toLocaleDateString();
|
||
|
|
var localTime = localTime.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', hour12: false});
|
||
|
|
var localTime = localDate + " " + localTime;
|
||
|
|
conditions = res.conditions;
|
||
|
|
temp = (res.air_temperature)+ "° F ("+(((res.air_temperature-32)*5)/9).toFixed(1) + "° C)";
|
||
|
|
humidity = res.relative_humidity + "%";
|
||
|
|
wind = res.wind_gust + " mph (" + (res.wind_gust*1.609344).toFixed(1)+ " kph) " + res.wind_direction_cardinal;
|
||
|
|
precipToday = res.precip_accum_local_day + " in";
|
||
|
|
pressureTrend = res.pressure_trend;
|
||
|
|
pressure = (res.station_pressure).toFixed(2) + " inHg and " + pressureTrend.slice(0,1).toUpperCase() + pressureTrend.slice(1);
|
||
|
|
icon = res.icon;
|
||
|
|
|
||
|
|
// display data
|
||
|
|
document.getElementById('time').innerHTML = localTime;
|
||
|
|
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'
|
||
|
|
}
|
||
|
|
|
||
|
|
// Change the weather icon
|
||
|
|
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>
|
||
|
|
<h1>Huntsville Wx</h1>
|
||
|
|
<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 Today: <span id="precipToday"></span></li>
|
||
|
|
<li>Pressure: <i class='fa-solid fa-arrow-right-long'></i><span id="pressure"></span></li>
|
||
|
|
<li><i style="font-size:0.9rem;font-style:italic">Last Update: <span id="time"></span></i></li>
|
||
|
|
</body>
|
||
|
|
</html>
|