mirror of
https://github.com/jbowdre/lolz.git
synced 2024-11-22 13:12:19 +00:00
make temperature icon dynamic
This commit is contained in:
parent
a537fb9fe9
commit
64bd27c43d
1 changed files with 19 additions and 2 deletions
21
tempest.html
21
tempest.html
|
@ -22,9 +22,16 @@
|
||||||
return rtf.format(Math.round(elapsed/units[u]), u)
|
return rtf.format(Math.round(elapsed/units[u]), u)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var tempRanges = [
|
||||||
|
{ upper: 32, label: 'cold' },
|
||||||
|
{ upper: 60, label: 'cool' },
|
||||||
|
{ upper: 80, label: 'warm' },
|
||||||
|
{ upper: Infinity, label: 'hot' }
|
||||||
|
];
|
||||||
|
|
||||||
// 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/testest.json/raw')
|
||||||
.then(res => res.json())
|
.then(res => res.json())
|
||||||
.then(function(res){
|
.then(function(res){
|
||||||
|
|
||||||
|
@ -42,6 +49,7 @@
|
||||||
if (tempDiff >= 5) {
|
if (tempDiff >= 5) {
|
||||||
temp += `, feels ${res.feels_like}°f (${(((res.feels_like - 32) *5) / 9).toFixed(1)}°c)`;
|
temp += `, feels ${res.feels_like}°f (${(((res.feels_like - 32) *5) / 9).toFixed(1)}°c)`;
|
||||||
}
|
}
|
||||||
|
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()}`;
|
||||||
precipToday = `${res.precip_accum_local_day}" of rain today`;
|
precipToday = `${res.precip_accum_local_day}" of rain today`;
|
||||||
|
@ -53,6 +61,7 @@
|
||||||
document.getElementById('time').innerHTML = updateAge;
|
document.getElementById('time').innerHTML = updateAge;
|
||||||
document.getElementsByClassName('fa-cloud-sun-rain')[0].classList = CLASS_MAP_WX[icon];
|
document.getElementsByClassName('fa-cloud-sun-rain')[0].classList = CLASS_MAP_WX[icon];
|
||||||
document.getElementById('conditions').innerHTML = conditions;
|
document.getElementById('conditions').innerHTML = conditions;
|
||||||
|
document.getElementsByClassName('fa-temperature-half')[0].classList = CLASS_MAP_TEMP[tempLabel];
|
||||||
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;
|
||||||
|
@ -68,6 +77,14 @@
|
||||||
'falling': 'fa-solid fa-arrow-trend-down'
|
'falling': 'fa-solid fa-arrow-trend-down'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 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'
|
||||||
|
}
|
||||||
|
|
||||||
// change the weather icon
|
// change the weather icon
|
||||||
const CLASS_MAP_WX = {
|
const CLASS_MAP_WX = {
|
||||||
'clear-day': 'fa-solid fa-sun',
|
'clear-day': 'fa-solid fa-sun',
|
||||||
|
@ -96,7 +113,7 @@
|
||||||
<h1>Local Weather</h1>
|
<h1>Local Weather</h1>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Conditions: <i class='fa-solid fa-cloud-sun-rain'></i><span id="conditions"></span></li>
|
<li>Conditions: <i class='fa-solid fa-cloud-sun-rain'></i><span id="conditions"></span></li>
|
||||||
<li>Temperature: <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: <span id="precipToday"></span></li>
|
||||||
|
|
Loading…
Reference in a new issue