john/lolz
1
0
Fork 0
mirror of https://github.com/jbowdre/lolz.git synced 2024-11-12 17:32:19 +00:00
Code Issues Projects Releases Packages Wiki Activity

add test weather page

Browse source
This commit is contained in:
John Bowdre 2024-02-08 21:46:09 -06:00
parent ce29f29f9c
commit 46499f0d12
1 changed files with 85 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
weather_test.html Normal file
View file

@ -0,0 +1,85 @@
<!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>