Update Random Background Script with more modern JS approch

scripts/backgroundRandom.js

@@ -1,19 +1,22 @@
-function background(x){
+function setBackground(x){
+    const htmlElement = document.documentElement;
 
-    if (x.matches){
-        document.getElementsByTagName('html')[0].style.backgroundColor = "var(--Primary-Light-BG)";
-    } 
-    else
-    {
-        var imgs = ['../assets/images/backgrounds/1.jpg','../assets/images/backgrounds/2.jpg','../assets/images/backgrounds/3.jpg','../assets/images/backgrounds/4.jpg','../assets/images/backgrounds/5.jpg','../assets/images/backgrounds/6.jpg',];
-
-        var img = imgs[Math.floor(Math.random()*imgs.length)];
-
-        document.getElementsByTagName('html')[0].style.backgroundImage = 'url(' + img + ')';
-
+    if (x.matches) {
+        htmlElement.style.backgroundColor = "var(--Background)";
+    } else {
+        const imgs = [
+            '../assets/images/backgrounds/1.jpg',
+            '../assets/images/backgrounds/2.jpg',
+            '../assets/images/backgrounds/3.jpg',
+            '../assets/images/backgrounds/4.jpg',
+            '../assets/images/backgrounds/5.jpg',
+            '../assets/images/backgrounds/6.jpg',
+        ];
+        const randomImg = imgs[Math.floor(Math.random() * imgs.length)];
+        htmlElement.style.backgroundImage = `url(${randomImg})`;
     }
 }
 
-let x = window.matchMedia("(max-width: 420px)");
-background(x);
-x.addListener(background);
+const mediaQuery = window.matchMedia("(max-width: 420px)");
+setBackground(mediaQuery);
+mediaQuery.addEventListener(`change`,setBackground);

scripts/populateOldGamePatches.js

@@ -1,34 +1,45 @@
 async function populate() {
     const requestURL = '../assets/data/oldgamepatches.json';
-    const request = new Request(requestURL);
 
-    const response = await fetch(request);
-    const patches = await response.json();
+    try {
+        const response = await fetch(requestURL);
 
-    GamePatches(patches);
+        if (!response.ok) {
+            throw new Error(`Network response was not ok: ${response.statusText}`);
+        }
+
+        const patches = await response.json();
+
+        renderPatchList(patches.game, ".gameList");
+    }
+    catch (error) {
+        console.error('There has been a problem with your fetch operation:', error);
+    }
 }
 
-function GamePatches(obj) {
-    const container = document.querySelector(".gameList");
+function renderPatchList(patchList, containerSelector) {
+    const container = document.querySelector(containerSelector);
+    if (!container) {
+        console.error(`Container with selector ${containerSelector} not found`);
+        return;
+    }
     const list = document.createElement("ul");
 
-    const patches = obj.game;
+    patchList.forEach(patch => {
+        const listItem = document.createElement("li");
 
-    for (const patch in patches) {
-        const listitem = document.createElement("li");
         const link = document.createElement("a");
+        link.textContent = patch.patch;
+        link.href = patch.link;
+
         const date = document.createElement("span");
-
-        link.textContent = patches[patch].patch;
-        link.href = patches[patch].link;
+        date.textContent = patch.date;
 
-        date.textContent = patches[patch].date;
+        listItem.appendChild(link);
+        listItem.appendChild(date);
+        list.appendChild(listItem);
+    });
 
-        listitem.appendChild(link);
-        listitem.appendChild(date);
-        list.appendChild(listitem);
-    }
     container.appendChild(list);
 }
-
 populate();