general cleanup and stuff

src/components/Background.jsx

@@ -1,24 +1,23 @@
+//* Imports
 import React from 'react';
 import Fetch from 'unfetch';
 
+// Pick random number
 const randomInt = (min, max) => { return Math.floor(Math.random() * (max - min + 1)) + min; };
   
 export default class Background extends React.Component {
-  // Set background: Attempt to get one from the API first, and if that fails then use the offline ones.
-  async getAndSetBackground() {
-    const root = document.getElementById('root');
-    
-    try {
+  async getAndSetBackground() {    
+    try { // First we try and get an image from the API...
       let data = await Fetch('https://api.muetab.xyz/getImage?category=Outdoors');
-      data     = await data.json(); 
+      data = await data.json(); 
 
-      root.style.backgroundImage = `url(${data.file})`;
+      document.getElementById('root').style.backgroundImage = `url(${data.file})`;
       document.getElementById('photographer').innerText = `Photo by ${data.photographer}`;
       document.getElementById('location').innerText = `${data.location}`;   
-    } catch (e) {
+    } catch (e) { // ..and if that fails we load one locally
       document.getElementById('backgroundCredits').style.display = 'none';
       document.getElementById('photographer').innerText = 'Photo from Pexels';
-      root.style.backgroundImage = `url(../offline-images/${randomInt(1, 25)}.jpeg)`;
+      document.getElementById('root').style.backgroundImage = `url(../offline-images/${randomInt(1, 25)}.jpeg)`;
     }
   }
 
@@ -27,6 +26,6 @@ export default class Background extends React.Component {
   }
 
   render() {
-    return null;
+    return null; // React gets annoyed if I don't put anything here or use "return;"
   }
 }