mirror of
https://github.com/jbowdre/lolz.git
synced 2024-11-22 13:12:19 +00:00
make rainfall icon dynamic
This commit is contained in:
parent
824194488d
commit
fa72cf804e
1 changed files with 18 additions and 1 deletions
19
tempest.html
19
tempest.html
|
@ -29,6 +29,13 @@
|
||||||
{ upper: Infinity, label: 'hot' }
|
{ upper: Infinity, label: 'hot' }
|
||||||
];
|
];
|
||||||
|
|
||||||
|
var rainRanges = [
|
||||||
|
{ upper: 0.02, label: 'none' },
|
||||||
|
{ upper: 0.2, label: 'light' },
|
||||||
|
{ upper: 1.4, label: 'moderate' },
|
||||||
|
{ upper: Infinity, label: 'heavy' }
|
||||||
|
]
|
||||||
|
|
||||||
// weather code inspired by https://kris.omg.lol
|
// weather code inspired by https://kris.omg.lol
|
||||||
// fetch from API proxy
|
// fetch from API proxy
|
||||||
fetch('https://paste.jbowdre.lol/tempest.json/raw')
|
fetch('https://paste.jbowdre.lol/tempest.json/raw')
|
||||||
|
@ -52,6 +59,7 @@
|
||||||
tempLabel = (tempRanges.find(range => res.feels_like < range.upper)).label;
|
tempLabel = (tempRanges.find(range => res.feels_like < range.upper)).label;
|
||||||
humidity = `${res.relative_humidity}% humidity`;
|
humidity = `${res.relative_humidity}% humidity`;
|
||||||
wind = `${res.wind_gust}mph (${(res.wind_gust*1.609344).toFixed(1)}kph) from ${(res.wind_direction_cardinal).toLowerCase()}`;
|
wind = `${res.wind_gust}mph (${(res.wind_gust*1.609344).toFixed(1)}kph) from ${(res.wind_direction_cardinal).toLowerCase()}`;
|
||||||
|
precipLabel = (rainRanges.find(range => res.precip_accum_local_day < range.upper)).label;
|
||||||
precipToday = `${res.precip_accum_local_day}" of rain today`;
|
precipToday = `${res.precip_accum_local_day}" of rain today`;
|
||||||
pressureTrend = res.pressure_trend;
|
pressureTrend = res.pressure_trend;
|
||||||
pressure = `${res.station_pressure}inhg and ${pressureTrend}`;
|
pressure = `${res.station_pressure}inhg and ${pressureTrend}`;
|
||||||
|
@ -65,6 +73,7 @@
|
||||||
document.getElementById('temp').innerHTML = temp;
|
document.getElementById('temp').innerHTML = temp;
|
||||||
document.getElementById('humidity').innerHTML = humidity;
|
document.getElementById('humidity').innerHTML = humidity;
|
||||||
document.getElementById('wind').innerHTML = wind;
|
document.getElementById('wind').innerHTML = wind;
|
||||||
|
document.getElementsByClassName('fa-droplet-slash')[0].classList = CLASS_MAP_RAIN[precipLabel];
|
||||||
document.getElementById('precipToday').innerHTML = precipToday;
|
document.getElementById('precipToday').innerHTML = precipToday;
|
||||||
document.getElementsByClassName('fa-arrow-right-long')[0].classList = CLASS_MAP_PRESS[pressureTrend];
|
document.getElementsByClassName('fa-arrow-right-long')[0].classList = CLASS_MAP_PRESS[pressureTrend];
|
||||||
document.getElementById('pressure').innerHTML = pressure;
|
document.getElementById('pressure').innerHTML = pressure;
|
||||||
|
@ -77,6 +86,14 @@
|
||||||
'falling': 'fa-solid fa-arrow-trend-down'
|
'falling': 'fa-solid fa-arrow-trend-down'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 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'
|
||||||
|
}
|
||||||
|
|
||||||
// change the temperature icon
|
// change the temperature icon
|
||||||
const CLASS_MAP_TEMP = {
|
const CLASS_MAP_TEMP = {
|
||||||
'hot': 'fa-solid fa-thermometer-full',
|
'hot': 'fa-solid fa-thermometer-full',
|
||||||
|
@ -116,7 +133,7 @@
|
||||||
<li>Temperature: <i class='fa-solid fa-temperature-half'></i> <span id="temp"></span></li>
|
<li>Temperature: <i class='fa-solid fa-temperature-half'></i> <span id="temp"></span></li>
|
||||||
<li>Humidity: <span id="humidity"></span></li>
|
<li>Humidity: <span id="humidity"></span></li>
|
||||||
<li>Wind: <span id="wind"></span></li>
|
<li>Wind: <span id="wind"></span></li>
|
||||||
<li>Precipitation: <span id="precipToday"></span></li>
|
<li>Precipitation: <i class='fa-solid fa-droplet-slash'></i><span id="precipToday"></span></li>
|
||||||
<li>Pressure: <i class='fa-solid fa-arrow-right-long'></i><span id="pressure"></span></li>
|
<li>Pressure: <i class='fa-solid fa-arrow-right-long'></i><span id="pressure"></span></li>
|
||||||
<li><i>Last Update: <span id="time"></span></i></li>
|
<li><i>Last Update: <span id="time"></span></i></li>
|
||||||
</body>
|
</body>
|
||||||
|
|
Loading…
Reference in a new issue