mirror of
https://github.com/jbowdre/lolz.git
synced 2024-11-12 17:32:19 +00:00
api retrieval improvements
- get musicthread from pastebin instead of direct - don't execute scripts until page is fully loaded - only execute script if matching element id is on page
This commit is contained in:
parent
3bcb2240eb
commit
e680d32e32
3 changed files with 269 additions and 247 deletions
|
|
@ -6,19 +6,24 @@
|
|||
<title>MusicThread Test</title>
|
||||
<script>
|
||||
// retrieves latest link from a musicthread thread and displays it on the page
|
||||
const musicthread = 'https://musicthread.app/api/v0/thread/2aVjZUocjk96LELFbV5JvJjm14v';
|
||||
fetch(musicthread)
|
||||
.then(res => res.json())
|
||||
.then(function(res){
|
||||
let nowPlaying = res.links[0];
|
||||
document.getElementById('now-playing').innerHTML = "<a href='" + nowPlaying.page_url + "'>" + nowPlaying.title + "</a> by " + nowPlaying.artist;
|
||||
});
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const musicthread = "https://jbowdre.paste.lol/musicthread.json/raw";
|
||||
const nowPlayingElement = document.getElementById("now-playing");
|
||||
if (nowPlayingElement) {
|
||||
fetch(musicthread)
|
||||
.then(res => res.json())
|
||||
.then(function(res){
|
||||
let nowPlaying = res;
|
||||
nowPlayingElement.innerHTML = "<a href='" + nowPlaying.page_url + "'>" + nowPlaying.title + "</a> by " + nowPlaying.artist;
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Now Playing</h1>
|
||||
<ul>
|
||||
<li><span id="now-playing"> <i class='fa-solid fa-headphones'></i></span></li>
|
||||
<li><span id="now-playing"></span> <i class='fa-solid fa-headphones'></i></li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
238
tempest.html
238
tempest.html
|
|
@ -5,125 +5,131 @@
|
|||
<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>
|
||||
const wx_endpoint = 'https://paste.jbowdre.lol/tempest.json/raw';
|
||||
// get ready to calculate relative time
|
||||
const 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
|
||||
}
|
||||
let rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
|
||||
let getRelativeTime = (d1, d2 = new Date()) => {
|
||||
let 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)
|
||||
}
|
||||
// get weather data from pastebin
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const hasWeather = document.getElementById('conditions');
|
||||
if (hasWeather) {
|
||||
const wx_endpoint = 'https://paste.jbowdre.lol/tempest.json/raw';
|
||||
// get ready to calculate relative time
|
||||
const 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
|
||||
}
|
||||
let rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
|
||||
let getRelativeTime = (d1, d2 = new Date()) => {
|
||||
let 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)
|
||||
}
|
||||
|
||||
// set up temperature and rain ranges
|
||||
const tempRanges = [
|
||||
{ upper: 32, label: 'cold' },
|
||||
{ upper: 60, label: 'cool' },
|
||||
{ upper: 80, label: 'warm' },
|
||||
{ upper: Infinity, label: 'hot' }
|
||||
];
|
||||
const rainRanges = [
|
||||
{ upper: 0.02, label: 'none' },
|
||||
{ upper: 0.2, label: 'light' },
|
||||
{ upper: 1.4, label: 'moderate' },
|
||||
{ upper: Infinity, label: 'heavy' }
|
||||
]
|
||||
// set up temperature and rain ranges
|
||||
const tempRanges = [
|
||||
{ upper: 32, label: 'cold' },
|
||||
{ upper: 60, label: 'cool' },
|
||||
{ upper: 80, label: 'warm' },
|
||||
{ upper: Infinity, label: 'hot' }
|
||||
];
|
||||
const rainRanges = [
|
||||
{ upper: 0.02, label: 'none' },
|
||||
{ upper: 0.2, label: 'light' },
|
||||
{ upper: 1.4, label: 'moderate' },
|
||||
{ upper: Infinity, label: 'heavy' }
|
||||
]
|
||||
|
||||
// maps for selecting icons
|
||||
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'
|
||||
// maps for selecting icons
|
||||
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'
|
||||
}
|
||||
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'
|
||||
}
|
||||
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'
|
||||
}
|
||||
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-cloud-sun',
|
||||
'partly-cloudy-night': 'fa-solid fa-cloud-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',
|
||||
}
|
||||
|
||||
// fetch data from pastebin
|
||||
fetch(wx_endpoint)
|
||||
.then(res => res.json())
|
||||
.then(function(res){
|
||||
|
||||
// calculate age of last update
|
||||
let updateTime = res.time;
|
||||
updateTime = parseInt(updateTime);
|
||||
updateTime = updateTime*1000;
|
||||
updateTime = new Date(updateTime);
|
||||
let updateAge = getRelativeTime(updateTime);
|
||||
|
||||
// parse data
|
||||
let conditions = (res.conditions).toLowerCase();
|
||||
let tempDiff = Math.abs(res.temperature - res.feels_like);
|
||||
let temp = `${res.temperature}°f (${(((res.temperature - 32) * 5) / 9).toFixed(1)}°c)`;
|
||||
if (tempDiff >= 5) {
|
||||
temp += `, feels ${res.feels_like}°f (${(((res.feels_like - 32) *5) / 9).toFixed(1)}°c)`;
|
||||
}
|
||||
let tempLabel = (tempRanges.find(range => res.feels_like < range.upper)).label;
|
||||
let humidity = `${res.humidity}% humidity`;
|
||||
let wind = `${res.wind_gust}mph (${(res.wind_gust*1.609344).toFixed(1)}kph) from ${(res.wind_direction).toLowerCase()}`;
|
||||
let rainLabel = (rainRanges.find(range => res.rain_today < range.upper)).label;
|
||||
let rainToday;
|
||||
if (res.rain_today === 0) {
|
||||
rainToday = 'no rain today';
|
||||
} else {
|
||||
rainToday = `${res.rain_today}" rain today`;
|
||||
}
|
||||
let pressureTrend = res.pressure_trend;
|
||||
let pressure = `${res.pressure}inhg and ${pressureTrend}`;
|
||||
let icon = res.icon;
|
||||
|
||||
// display data
|
||||
document.getElementById('time').innerHTML = updateAge;
|
||||
document.getElementById('conditions').innerHTML = conditions;
|
||||
document.getElementById('temp').innerHTML = temp;
|
||||
document.getElementById('humidity').innerHTML = humidity;
|
||||
document.getElementById('wind').innerHTML = wind;
|
||||
document.getElementById('rainToday').innerHTML = rainToday;
|
||||
document.getElementById('pressure').innerHTML = pressure;
|
||||
// update icons
|
||||
document.getElementsByClassName('fa-cloud-sun-rain')[0].classList = CLASS_MAP_WX[icon];
|
||||
document.getElementsByClassName('fa-temperature-half')[0].classList = CLASS_MAP_TEMP[tempLabel];
|
||||
document.getElementsByClassName('fa-droplet-slash')[0].classList = CLASS_MAP_RAIN[rainLabel];
|
||||
document.getElementsByClassName('fa-arrow-right-long')[0].classList = CLASS_MAP_PRESS[pressureTrend];
|
||||
});
|
||||
}
|
||||
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'
|
||||
}
|
||||
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'
|
||||
}
|
||||
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-cloud-sun',
|
||||
'partly-cloudy-night': 'fa-solid fa-cloud-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',
|
||||
}
|
||||
|
||||
// fetch data from pastebin
|
||||
fetch(wx_endpoint)
|
||||
.then(res => res.json())
|
||||
.then(function(res){
|
||||
|
||||
// calculate age of last update
|
||||
let updateTime = res.time;
|
||||
updateTime = parseInt(updateTime);
|
||||
updateTime = updateTime*1000;
|
||||
updateTime = new Date(updateTime);
|
||||
let updateAge = getRelativeTime(updateTime);
|
||||
|
||||
// parse data
|
||||
let conditions = (res.conditions).toLowerCase();
|
||||
let tempDiff = Math.abs(res.temperature - res.feels_like);
|
||||
let temp = `${res.temperature}°f (${(((res.temperature - 32) * 5) / 9).toFixed(1)}°c)`;
|
||||
if (tempDiff >= 5) {
|
||||
temp += `, feels ${res.feels_like}°f (${(((res.feels_like - 32) *5) / 9).toFixed(1)}°c)`;
|
||||
}
|
||||
let tempLabel = (tempRanges.find(range => res.feels_like < range.upper)).label;
|
||||
let humidity = `${res.humidity}% humidity`;
|
||||
let wind = `${res.wind_gust}mph (${(res.wind_gust*1.609344).toFixed(1)}kph) from ${(res.wind_direction).toLowerCase()}`;
|
||||
let rainLabel = (rainRanges.find(range => res.rain_today < range.upper)).label;
|
||||
let rainToday;
|
||||
if (res.rain_today === 0) {
|
||||
rainToday = 'no rain today';
|
||||
} else {
|
||||
rainToday = `${res.rain_today}" rain today`;
|
||||
}
|
||||
let pressureTrend = res.pressure_trend;
|
||||
let pressure = `${res.pressure}inhg and ${pressureTrend}`;
|
||||
let icon = res.icon;
|
||||
|
||||
// display data
|
||||
document.getElementById('time').innerHTML = updateAge;
|
||||
document.getElementById('conditions').innerHTML = conditions;
|
||||
document.getElementById('temp').innerHTML = temp;
|
||||
document.getElementById('humidity').innerHTML = humidity;
|
||||
document.getElementById('wind').innerHTML = wind;
|
||||
document.getElementById('rainToday').innerHTML = rainToday;
|
||||
document.getElementById('pressure').innerHTML = pressure;
|
||||
// update icons
|
||||
document.getElementsByClassName('fa-cloud-sun-rain')[0].classList = CLASS_MAP_WX[icon];
|
||||
document.getElementsByClassName('fa-temperature-half')[0].classList = CLASS_MAP_TEMP[tempLabel];
|
||||
document.getElementsByClassName('fa-droplet-slash')[0].classList = CLASS_MAP_RAIN[rainLabel];
|
||||
document.getElementsByClassName('fa-arrow-right-long')[0].classList = CLASS_MAP_PRESS[pressureTrend];
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
257
web_head.html
257
web_head.html
|
|
@ -1,134 +1,145 @@
|
|||
<link rel="me" title="proven.lol" href="https://proven.lol/4cc26c">
|
||||
<script src="https://tinylytics.app/embed/QUH6xcnWKYeUUYaMkDKd.js?kudos=👋" defer></script>
|
||||
<script>
|
||||
const wx_endpoint = 'https://paste.jbowdre.lol/tempest.json/raw';
|
||||
// get ready to calculate relative time
|
||||
const 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
|
||||
}
|
||||
let rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
|
||||
let getRelativeTime = (d1, d2 = new Date()) => {
|
||||
let 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)
|
||||
}
|
||||
|
||||
// set up temperature and rain ranges
|
||||
const tempRanges = [
|
||||
{ upper: 32, label: 'cold' },
|
||||
{ upper: 60, label: 'cool' },
|
||||
{ upper: 80, label: 'warm' },
|
||||
{ upper: Infinity, label: 'hot' }
|
||||
];
|
||||
const rainRanges = [
|
||||
{ upper: 0.02, label: 'none' },
|
||||
{ upper: 0.2, label: 'light' },
|
||||
{ upper: 1.4, label: 'moderate' },
|
||||
{ upper: Infinity, label: 'heavy' }
|
||||
]
|
||||
|
||||
// maps for selecting icons
|
||||
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'
|
||||
}
|
||||
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'
|
||||
}
|
||||
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'
|
||||
}
|
||||
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-cloud-sun',
|
||||
'partly-cloudy-night': 'fa-solid fa-cloud-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',
|
||||
}
|
||||
|
||||
// fetch data from pastebin
|
||||
fetch(wx_endpoint)
|
||||
.then(res => res.json())
|
||||
.then(function(res){
|
||||
|
||||
// calculate age of last update
|
||||
let updateTime = res.time;
|
||||
updateTime = parseInt(updateTime);
|
||||
updateTime = updateTime*1000;
|
||||
updateTime = new Date(updateTime);
|
||||
let updateAge = getRelativeTime(updateTime);
|
||||
|
||||
// parse data
|
||||
let conditions = (res.conditions).toLowerCase();
|
||||
let tempDiff = Math.abs(res.temperature - res.feels_like);
|
||||
let temp = `${res.temperature}°f (${(((res.temperature - 32) * 5) / 9).toFixed(1)}°c)`;
|
||||
if (tempDiff >= 5) {
|
||||
temp += `, feels ${res.feels_like}°f (${(((res.feels_like - 32) *5) / 9).toFixed(1)}°c)`;
|
||||
// get weather data from pastebin
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const hasWeather = document.getElementById('conditions');
|
||||
if (hasWeather) {
|
||||
const wx_endpoint = 'https://paste.jbowdre.lol/tempest.json/raw';
|
||||
// get ready to calculate relative time
|
||||
const 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
|
||||
}
|
||||
let tempLabel = (tempRanges.find(range => res.feels_like < range.upper)).label;
|
||||
let humidity = `${res.humidity}% humidity`;
|
||||
let wind = `${res.wind_gust}mph (${(res.wind_gust*1.609344).toFixed(1)}kph) from ${(res.wind_direction).toLowerCase()}`;
|
||||
let rainLabel = (rainRanges.find(range => res.rain_today < range.upper)).label;
|
||||
let rainToday;
|
||||
if (res.rain_today === 0) {
|
||||
rainToday = 'no rain today';
|
||||
} else {
|
||||
rainToday = `${res.rain_today}" rain today`;
|
||||
let rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
|
||||
let getRelativeTime = (d1, d2 = new Date()) => {
|
||||
let 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)
|
||||
}
|
||||
let pressureTrend = res.pressure_trend;
|
||||
let pressure = `${res.pressure}inhg and ${pressureTrend}`;
|
||||
let icon = res.icon;
|
||||
|
||||
// display data
|
||||
document.getElementById('time').innerHTML = updateAge;
|
||||
document.getElementById('conditions').innerHTML = conditions;
|
||||
document.getElementById('temp').innerHTML = temp;
|
||||
document.getElementById('humidity').innerHTML = humidity;
|
||||
document.getElementById('wind').innerHTML = wind;
|
||||
document.getElementById('rainToday').innerHTML = rainToday;
|
||||
document.getElementById('pressure').innerHTML = pressure;
|
||||
// update icons
|
||||
document.getElementsByClassName('fa-cloud-sun-rain')[0].classList = CLASS_MAP_WX[icon];
|
||||
document.getElementsByClassName('fa-temperature-half')[0].classList = CLASS_MAP_TEMP[tempLabel];
|
||||
document.getElementsByClassName('fa-droplet-slash')[0].classList = CLASS_MAP_RAIN[rainLabel];
|
||||
document.getElementsByClassName('fa-arrow-right-long')[0].classList = CLASS_MAP_PRESS[pressureTrend];
|
||||
});
|
||||
// set up temperature and rain ranges
|
||||
const tempRanges = [
|
||||
{ upper: 32, label: 'cold' },
|
||||
{ upper: 60, label: 'cool' },
|
||||
{ upper: 80, label: 'warm' },
|
||||
{ upper: Infinity, label: 'hot' }
|
||||
];
|
||||
const rainRanges = [
|
||||
{ upper: 0.02, label: 'none' },
|
||||
{ upper: 0.2, label: 'light' },
|
||||
{ upper: 1.4, label: 'moderate' },
|
||||
{ upper: Infinity, label: 'heavy' }
|
||||
]
|
||||
|
||||
// maps for selecting icons
|
||||
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'
|
||||
}
|
||||
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'
|
||||
}
|
||||
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'
|
||||
}
|
||||
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-cloud-sun',
|
||||
'partly-cloudy-night': 'fa-solid fa-cloud-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',
|
||||
}
|
||||
|
||||
// fetch data from pastebin
|
||||
fetch(wx_endpoint)
|
||||
.then(res => res.json())
|
||||
.then(function(res){
|
||||
|
||||
// calculate age of last update
|
||||
let updateTime = res.time;
|
||||
updateTime = parseInt(updateTime);
|
||||
updateTime = updateTime*1000;
|
||||
updateTime = new Date(updateTime);
|
||||
let updateAge = getRelativeTime(updateTime);
|
||||
|
||||
// parse data
|
||||
let conditions = (res.conditions).toLowerCase();
|
||||
let tempDiff = Math.abs(res.temperature - res.feels_like);
|
||||
let temp = `${res.temperature}°f (${(((res.temperature - 32) * 5) / 9).toFixed(1)}°c)`;
|
||||
if (tempDiff >= 5) {
|
||||
temp += `, feels ${res.feels_like}°f (${(((res.feels_like - 32) *5) / 9).toFixed(1)}°c)`;
|
||||
}
|
||||
let tempLabel = (tempRanges.find(range => res.feels_like < range.upper)).label;
|
||||
let humidity = `${res.humidity}% humidity`;
|
||||
let wind = `${res.wind_gust}mph (${(res.wind_gust*1.609344).toFixed(1)}kph) from ${(res.wind_direction).toLowerCase()}`;
|
||||
let rainLabel = (rainRanges.find(range => res.rain_today < range.upper)).label;
|
||||
let rainToday;
|
||||
if (res.rain_today === 0) {
|
||||
rainToday = 'no rain today';
|
||||
} else {
|
||||
rainToday = `${res.rain_today}" rain today`;
|
||||
}
|
||||
let pressureTrend = res.pressure_trend;
|
||||
let pressure = `${res.pressure}inhg and ${pressureTrend}`;
|
||||
let icon = res.icon;
|
||||
|
||||
// display data
|
||||
document.getElementById('time').innerHTML = updateAge;
|
||||
document.getElementById('conditions').innerHTML = conditions;
|
||||
document.getElementById('temp').innerHTML = temp;
|
||||
document.getElementById('humidity').innerHTML = humidity;
|
||||
document.getElementById('wind').innerHTML = wind;
|
||||
document.getElementById('rainToday').innerHTML = rainToday;
|
||||
document.getElementById('pressure').innerHTML = pressure;
|
||||
// update icons
|
||||
document.getElementsByClassName('fa-cloud-sun-rain')[0].classList = CLASS_MAP_WX[icon];
|
||||
document.getElementsByClassName('fa-temperature-half')[0].classList = CLASS_MAP_TEMP[tempLabel];
|
||||
document.getElementsByClassName('fa-droplet-slash')[0].classList = CLASS_MAP_RAIN[rainLabel];
|
||||
document.getElementsByClassName('fa-arrow-right-long')[0].classList = CLASS_MAP_PRESS[pressureTrend];
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
// retrieves latest link from a musicthread thread and displays it on the page
|
||||
const musicthread = 'https://musicthread.app/api/v0/thread/2aVjZUocjk96LELFbV5JvJjm14v';
|
||||
fetch(musicthread)
|
||||
.then(res => res.json())
|
||||
.then(function(res){
|
||||
let nowPlaying = res.links[0];
|
||||
document.getElementById('now-playing').innerHTML = "<a href='" + nowPlaying.page_url + "'>" + nowPlaying.title + "</a> by " + nowPlaying.artist;
|
||||
});
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const musicthread = 'https://musicthread.app/api/v0/thread/2aVjZUocjk96LELFbV5JvJjm14v';
|
||||
const nowPlayingElement = document.getElementById('now-playing');
|
||||
if (nowPlayingElement) {
|
||||
fetch(musicthread)
|
||||
.then(res => res.json())
|
||||
.then(function(res){
|
||||
let nowPlaying = res.links[0];
|
||||
nowPlayingElement.innerHTML = "<a href='" + nowPlaying.page_url + "'>" + nowPlaying.title + "</a> by " + nowPlaying.artist;
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue