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:
John Bowdre 2024-05-01 21:15:51 -05:00
parent 3bcb2240eb
commit e680d32e32
3 changed files with 269 additions and 247 deletions

View file

@ -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';
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.links[0];
document.getElementById('now-playing').innerHTML = "<a href='" + nowPlaying.page_url + "'>" + nowPlaying.title + "</a> by " + nowPlaying.artist;
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>

View file

@ -5,6 +5,10 @@
<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>
// 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 = {
@ -124,6 +128,8 @@
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>

View file

@ -1,6 +1,10 @@
<link rel="me" title="proven.lol" href="https://proven.lol/4cc26c">
<script src="https://tinylytics.app/embed/QUH6xcnWKYeUUYaMkDKd.js?kudos=👋" defer></script>
<script>
// 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 = {
@ -120,15 +124,22 @@ fetch(wx_endpoint)
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
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];
document.getElementById('now-playing').innerHTML = "<a href='" + nowPlaying.page_url + "'>" + nowPlaying.title + "</a> by " + nowPlaying.artist;
nowPlayingElement.innerHTML = "<a href='" + nowPlaying.page_url + "'>" + nowPlaying.title + "</a> by " + nowPlaying.artist;
});
}
});
</script>