You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
3.0 KiB
JavaScript
108 lines
3.0 KiB
JavaScript
3 years ago
|
const updatesContainer = document.getElementById("updates-container");
|
||
|
|
let updates = [];
|
||
|
|
|
||
|
|
// Fetc the updates from the array in updates.json
|
||
|
|
// Each element of the array is structured like this:
|
||
|
|
//
|
||
|
|
// {
|
||
|
|
// "date": "October the 21st, 2021",
|
||
|
|
// "title": "2nd hand lifeboat script",
|
||
|
|
// "text": "Labore eiusmod labore pariatur elit nostrud ut magna cupidatat minim amet deserunt cillum id. Lorem consectetur incididunt anim sit do eu minim nisi id.",
|
||
|
|
// "media": {
|
||
|
|
// "type": "video",
|
||
|
|
// "src": "./assets/test-js.mp4",
|
||
|
|
// "alt": "An excerpt from 'When did software gone wrong?' highlighted progressively as in karaoke",
|
||
|
|
// "caption": "In every karaoke there are at least 2 voices: a text and a choir"
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
//
|
||
|
|
// Title, Text and Media are not mandatory.
|
||
|
|
// If some are not present, the createUpdate function will skip them
|
||
|
|
//
|
||
|
|
// Note that the Date is required, but its format is up to the user
|
||
|
|
//
|
||
|
|
// All the media elements require an alt description.
|
||
|
|
// This is for accessibility. It's a really good practice to provide quality alt text
|
||
|
|
// and we must pay attention to this.
|
||
|
|
|
||
|
|
fetch("./updates.json")
|
||
|
|
.then((response) => response.json())
|
||
|
|
.then((data) => {
|
||
|
|
updates = [...data.updates.reverse()];
|
||
|
|
populateContents();
|
||
|
|
});
|
||
|
|
|
||
|
|
function populateContents() {
|
||
|
|
updates.forEach((update) => createUpdate(update));
|
||
|
|
}
|
||
|
|
|
||
|
|
function createUpdate(update) {
|
||
|
|
let card = document.createElement("div");
|
||
|
|
card.classList.add("update");
|
||
|
|
|
||
|
|
// DATE
|
||
|
|
let date = document.createElement("div");
|
||
|
|
date.classList.add("date");
|
||
|
|
date.innerHTML = update.date;
|
||
|
|
card.appendChild(date);
|
||
|
|
|
||
|
|
// TITLE, if present
|
||
|
|
if (update.title) {
|
||
|
|
let title = document.createElement("h3");
|
||
|
|
title.classList.add("title");
|
||
|
|
title.innerHTML = update.title;
|
||
|
|
card.appendChild(title);
|
||
|
|
}
|
||
|
|
|
||
|
|
// MEDIA CONTENTS, if present
|
||
|
|
if (update.media) {
|
||
|
|
let media;
|
||
|
|
// IMAGE
|
||
|
|
if (update.media.type == "img") {
|
||
|
|
media = document.createElement("media");
|
||
|
|
media.classList.add("media");
|
||
|
|
|
||
|
|
let img = document.createElement("img");
|
||
|
|
img.src = update.media.src;
|
||
|
|
img.alt = update.media.alt;
|
||
|
|
media.appendChild(img);
|
||
|
|
|
||
|
|
if (update.media.caption) {
|
||
|
|
let caption = document.createElement("figcaption");
|
||
|
|
caption.innerHTML = update.media.caption;
|
||
|
|
media.appendChild(caption);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// VIDEO
|
||
|
|
if (update.media.type == "video") {
|
||
|
|
media = document.createElement("div");
|
||
|
|
media.classList.add("media");
|
||
|
|
|
||
|
|
let video = document.createElement("video");
|
||
|
|
video.src = update.media.src;
|
||
|
|
video.alt = update.media.alt;
|
||
|
|
video.setAttribute("autoplay", true);
|
||
|
|
video.setAttribute("loop", true);
|
||
|
|
media.appendChild(video);
|
||
|
|
|
||
|
|
if (update.media.caption) {
|
||
|
|
let caption = document.createElement("p");
|
||
|
|
caption.classList.add("caption");
|
||
|
|
caption.innerHTML = update.media.caption;
|
||
|
|
media.appendChild(caption);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
card.appendChild(media);
|
||
|
|
}
|
||
|
|
|
||
|
|
// TEXT, if present
|
||
|
|
if (update.text) {
|
||
|
|
let text = document.createElement("p");
|
||
|
|
text.classList.add("text");
|
||
|
|
text.innerHTML = update.text;
|
||
|
|
card.appendChild(text);
|
||
|
|
}
|
||
|
|
|
||
|
|
updatesContainer.appendChild(card);
|
||
|
|
}
|