This repository has been archived on 2024-09-04. You can view files and clone it, but cannot push or open issues or pull requests.
arimelody.me-static/public/script/music.js

49 lines
1.4 KiB
JavaScript

function create_music_card(item) {
var artist = "ari melody";
if (item.artists) {
artist = item.artists.join(", ");
}
let card = document.createElement('a');
card.href = `/music/${item.id}`;
card.classList.add("music");
card.id = item.id;
card.innerHTML =
`<div class="music-artwork">
<img src=${item.artwork || '/img/music_artwork/placeholder.jpg'} alt="${item.title} artwork" width=128>
</div>
<div class="music-details">
<h1 class="music-title">${item.title}</h1>
<h2 class="music-artist">${artist}</h2>
<h3 class="music-type-${item.type}">${item.type}</h3>
<ul class="music-links">
${ item.links.map(link => {
return `<li><a href="${link.url}">${link.title.toLowerCase()}</a></li>`
}).join("") }
</ul>
</div>`;
return card;
}
document.querySelectorAll("h2.question").forEach(element => {
element.onclick = (e) => {
const url = `${window.location.protocol}//${window.location.host}${window.location.pathname}#${e.target.id}`;
window.location = url;
};
});
fetch('/music.json')
.then(res => {
if (!res.ok) {
throw new Error(`Failed to download music data! ${res.status}`);
}
return res.json();
})
.then(music => {
let music_container = document.getElementById('music-container');
for (index in music) {
let item = music[index];
let dom = create_music_card(item);
music_container.append(dom);
};
});