Cleanup

package.json

@@ -17,7 +17,8 @@
     "react-scripts": "3.2.0"
   },
   "devDependencies": {
-    "eslint": "^6.6.0"
+    "eslint": "^6.6.0",
+    "node-sass": "^4.13.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -38,4 +39,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/components/Background.jsx

@@ -7,15 +7,18 @@ export default class Background extends React.Component {
       let data = await fetch('https://api.muetab.xyz/getImage?category=Outdoors');
       data = await data.json(); 
 
-      document.getElementById('root').style.backgroundImage = `url(${data.file})`;
-      document.getElementById('photographer').innerText = `Photo by ${data.photographer}`;
-      document.getElementById('location').innerText = `${data.location}`;   
+      document.getElementById('root').style.backgroundImage = `url(${data.file})`; // Set the background
+      document.getElementById('photographer').innerText = `Photo by ${data.photographer}`; // Set the credit
+      document.getElementById('location').innerText = `${data.location}`; // Set the location tooltip
     } catch (e) { // ..and if that fails we load one locally
-      let photographer;
       const photo = Math.floor(Math.random() * (20 - 1 + 1)) + 1; // There are 20 images in the offline-images folder
-      document.getElementById('backgroundCredits').style.display = 'none';
-      // eslint-disable-next-line default-case
+      document.getElementById('backgroundCredits').style.display = 'none'; // Hide the location icon
+      let photographer; // Photographer credit
       switch (photo) { // Select photographer based on image file number
+        default: {
+          photographer = 'Unknown (Pexels)';
+          break;
+        }
         case 1: {
           photographer = 'Tirachard Kumtanom (Pexels)';
           break;
@@ -32,22 +35,10 @@ export default class Background extends React.Component {
           photographer = 'Sohail Na (Pexels)';
           break;
         }
-        case 5: {
-          photographer = 'Unknown (Pexels)';
-          break;
-        }
-        case 6: {
-          photographer = 'Unknown (Pexels)';
-          break;
-        }
         case 7: {
           photographer = 'Miriam Espacio (Pexels)';
           break;
         }
-        case 8: {
-          photographer = 'Unknown (Pexels)';
-          break;
-        }
         case 9: {
           photographer = 'Pixabay (Pexels)';
           break;
@@ -60,10 +51,6 @@ export default class Background extends React.Component {
           photographer = 'Pixabay (Pexels)';
           break;
         }
-        case 12: {
-          photographer = 'Unknown (Pexels)';
-          break;
-        }
         case 13: {
           photographer = 'Pixabay (Pexels)';
           break;
@@ -76,29 +63,13 @@ export default class Background extends React.Component {
           photographer = 'Pixabay (Pexels)';
           break;
         }
-        case 16: {
-          photographer = 'Unknown (Pexels)';
-          break;
-        }
-        case 17: {
-          photographer = 'Unknown (Pexels)';
-          break;
-        }
-        case 18: {
-          photographer = 'Unknown (Pexels)';
-          break;
-        }
-        case 19: {
-          photographer = 'Unknown (Pexels)';
-          break;
-        }
         case 20: {
           photographer = 'Fabian Wiktor (Pexels)';
           break;
         }
       }
-      document.getElementById('photographer').innerText = `Photo by ${photographer}`;
-      document.getElementById('root').style.backgroundImage = `url(../offline-images/${photo}.jpeg)`;
+      document.getElementById('photographer').innerText = `Photo by ${photographer}`; // Set the credit
+      document.getElementById('root').style.backgroundImage = `url(../offline-images/${photo}.jpeg)`; // Set the background
     }
   }
 

src/components/Greeting.jsx

@@ -10,19 +10,22 @@ export default class Greeting extends React.Component {
  }
 
   getGreeting() {
-    // Get current info
-    const t = new Date(); // Current date
-    const h = t.getHours(); // Current hour
+    const t = new Date(); // Current date object
     
     // Normal
-    let g = 'Good evening'; // Set the default time string to "Good evening"	
-    if (h < 12) g = 'Good morning'; // If it's before 12am, set the time string to "Good morning"
-    else if (h < 18) g = 'Good afternoon'; // If it's before 6pm, set the time string to "Good afternoon"
+    const h = t.getHours(); // Current hour
+
+    let g = 'Good evening'; // Set the default greeting string to "Good evening"	
+    if (h < 12) g = 'Good morning'; // If it's before 12am, set the greeting string to "Good morning"
+    else if (h < 18) g = 'Good afternoon'; // If it's before 6pm, set the greeting string to "Good afternoon"
 
     // Events
-    if (t.getMonth() === 0 && t.getDate() === 1) g = 'Happy new year'; // If the date is January 1st, set it to new year
-    else if (t.getMonth() === 11 && t.getDate() === 25) g = 'Merry Christmas'; // If it's December 25th, set it to xmas
-    else if (t.getMonth() === 9 && t.getDate() === 31) g = 'Happy Halloween'; // If it's October 31st, set it to halloween
+    const m = t.getMonth(); // Current month
+    const d = t.getDate(); // Current Date
+
+    if (m === 0 && d === 1) g = 'Happy new year'; // If the date is January 1st, set the greeting string to "Happy new year"
+    else if (m === 11 && d === 25) g = 'Merry Christmas'; // If it's December 25th, set the greeting string to "Merry Christmas"
+    else if (m === 9 && d === 31) g = 'Happy Halloween'; // If it's October 31st, set the greeting string to "Happy Halloween"
 
     this.setState({ 
       greeting: g