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;"
   }
 }

src/components/Clock.jsx

@@ -1,3 +1,4 @@
+//* Imports
 import React from 'react';
 
 export default class Clock extends React.Component {
@@ -32,9 +33,9 @@ export default class Clock extends React.Component {
   }
 
   render() {
-    return <h1 className='App-clock'>
+    return <h1 className='clock'>
       {this.state.date}
-      <span className='App-ampm-specifier'>
+      <span className='ampm'>
         {this.state.ampm}  
       </span>
     </h1>;

src/components/Credit.jsx

@@ -1,4 +1,5 @@
 /* eslint-disable */
+//* Imports
 import RoomIcon from '@material-ui/icons/Room';
 import React from 'react';
 

src/components/Greeting.jsx

@@ -1,3 +1,4 @@
+//* Imports
 import React from 'react';
 
 export default class Greeting extends React.Component {
@@ -21,6 +22,6 @@ export default class Greeting extends React.Component {
   }
   
   render() {
-    return <h1 className='App-greeting'>{this.state.greeting}</h1>;
+    return <h1 className='greeting'>{this.state.greeting}</h1>;
   }
 }

src/components/Quote.jsx

@@ -1,7 +1,11 @@
+//* Imports
 import React from 'react';
 import Fetch from 'unfetch';
 import quotes from '../quotes.json';
 
+// Pick randon number
+const randomInt = (min, max) => { return Math.floor(Math.random() * (max - min + 1)) + min; };
+
 export default class Quote extends React.Component {
   constructor(...args) {
     super(...args);
@@ -12,12 +16,11 @@ export default class Quote extends React.Component {
   }
 
   async getQuote() {
-    try {
+    try { // First we try and get a quote from the API...
       let data = await Fetch('https://api.muetab.xyz/getQuote');
       data = await data.json();
       this.setState({ quote: data.quote, author: data.author });
-    } catch (e) {
-      const randomInt = (min, max) => { return Math.floor(Math.random() * (max - min + 1)) + min; };
+    } catch (e) { // ..and if that fails we load one locally
       const num = randomInt(1, 20);
       this.setState({ quote: quotes[num].quote, author: quotes[num].author });
     }
@@ -29,9 +32,9 @@ export default class Quote extends React.Component {
 
   render() {
     return [
-    <h1 className='App-quote'>{`"${this.state.quote}"`}</h1>,
-    // <i class="material-icons">perm_identity</i>,
-    <h1 className='App-quote-author'>{`${this.state.author}`}</h1>,
+      <h1 className='quote'>{`"${this.state.quote}"`}</h1>,
+      // <i class="material-icons">perm_identity</i>,
+      <h1 className='quoteauthor'>{`${this.state.author}`}</h1>,
     ];
   }
 }

src/components/Search.jsx

@@ -1,11 +1,13 @@
+//* Imports
 import React from 'react';
 
+// TODO: Add option to change search engine
 export default class Search extends React.Component {
   render() {
     return (
-      <div id='searchBar' className='search-bar'>
-        <form id='searchBar' className='searchbarform' action='https://duckduckgo.com/' onSubmit={('search();')}>
-            <input type='text' placeholder='Search' name='q' id='searchText' className='searchText'/>
+      <div id='searchBar' className='searchbar'>
+        <form id='searchBar' className='searchbarform' action='https://duckduckgo.com/' onSubmit={('search();')}> 
+            <input type='text' placeholder='Search' name='q' id='searchtext' className='searchtext'/>
             <div className='blursearcbBG'/>
           </form>
       </div>