Styling

* custom font `quicksand`
* font-awesome icons
* random background and text colors
* quote center alignment and author name right
* layout etc. like horizontally and vertically center in a card

random-quote-machine/package-lock.json

@@ -8,6 +8,11 @@
       "name": "random-quote-machine",
       "version": "0.1.0",
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.1.1",
+        "@fortawesome/free-brands-svg-icons": "^6.1.1",
+        "@fortawesome/free-regular-svg-icons": "^6.1.1",
+        "@fortawesome/free-solid-svg-icons": "^6.1.1",
+        "@fortawesome/react-fontawesome": "^0.1.18",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^13.5.0",
@@ -2159,6 +2164,75 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz",
+      "integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz",
+      "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-mFbI/czjBZ+paUtw5NPr2IXjun5KAC8eFqh1hnxowjA4mMZxWz4GCIksq6j9ZSa6Uxj9JhjjDVEd77p2LN2Blg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-xXiW7hcpgwmWtndKPOzG+43fPH7ZjxOaoeyooptSztGmJxCAflHZxXNK0GcT0uEsR4jTGQAfGklDZE5NHoBhKg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.1.18",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.18.tgz",
+      "integrity": "sha512-RwLIB4TZw0M9gvy5u+TusAA0afbwM4JQIimNH/j3ygd6aIvYPQLqXMhC9ErY26J23rDPyDZldIfPq/HpTTJ/tQ==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.x"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -18298,6 +18372,51 @@
         }
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz",
+      "integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz",
+      "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      }
+    },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-mFbI/czjBZ+paUtw5NPr2IXjun5KAC8eFqh1hnxowjA4mMZxWz4GCIksq6j9ZSa6Uxj9JhjjDVEd77p2LN2Blg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      }
+    },
+    "@fortawesome/free-regular-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-xXiW7hcpgwmWtndKPOzG+43fPH7ZjxOaoeyooptSztGmJxCAflHZxXNK0GcT0uEsR4jTGQAfGklDZE5NHoBhKg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.18",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.18.tgz",
+      "integrity": "sha512-RwLIB4TZw0M9gvy5u+TusAA0afbwM4JQIimNH/j3ygd6aIvYPQLqXMhC9ErY26J23rDPyDZldIfPq/HpTTJ/tQ==",
+      "requires": {
+        "prop-types": "^15.8.1"
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",

random-quote-machine/package.json

@@ -3,6 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.1.18",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",

random-quote-machine/src/App.js

@@ -1,4 +1,10 @@
 import React from "react";
+import { faTwitter } from "@fortawesome/free-brands-svg-icons";
+import { faShuffle } from "@fortawesome/free-solid-svg-icons";
+import { faQuoteLeft } from "@fortawesome/free-solid-svg-icons";
+import { faQuoteRight } from "@fortawesome/free-solid-svg-icons";
+import { faCode } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import "./App.scss";
 import { quotesAndAuthors } from "./quotes";
 
@@ -8,52 +14,79 @@ class App extends React.Component {
     this.state = {
       quotesAndAuthors: quotesAndAuthors,
       randomIndex: Math.floor(Math.random() * quotesAndAuthors.length),
+      randomColorClass: `color-${Math.floor(Math.random() * 5) + 1}`,
     };
     this.state.randomQuote =
       this.state.quotesAndAuthors[this.state.randomIndex].quote;
     this.state.randomAuthor =
       this.state.quotesAndAuthors[this.state.randomIndex].author;
     this.handleNewQuote = this.handleNewQuote.bind(this);
+    this.state.randomBackgroundColorClass = `bg-${this.state.randomColorClass}`;
   }
 
   handleNewQuote() {
     this.setState((state) => ({
       randomIndex: Math.floor(Math.random() * state.quotesAndAuthors.length),
+      randomColorClass: `color-${Math.floor(Math.random() * 10) + 1}`,
     }));
     this.setState((state) => ({
       randomQuote: state.quotesAndAuthors[state.randomIndex].quote,
       randomAuthor: state.quotesAndAuthors[state.randomIndex].author,
+      randomBackgroundColorClass: `bg-${state.randomColorClass}`,
     }));
   }
 
   render() {
     return (
-      <div className="body">
+      <div
-        <div className="quote-box" id="quote-box">
+        className={`body d-flex align-items-center min-vh-100 ${this.state.randomBackgroundColorClass}`}
-          <p className="text" id="text">
+      >
-            {this.state.randomQuote}
+        <div className="container">
-          </p>
+          <div className="card">
-          <p className="author" id="author">
+            <div className="card-body " id="quote-box">
-            {this.state.randomAuthor}
+              <h4 className={`quote ${this.state.randomColorClass}`} id="text">
+                <FontAwesomeIcon icon={faQuoteLeft} />
+                {` ${this.state.randomQuote} `}
+                <FontAwesomeIcon icon={faQuoteRight} />
+              </h4>
+              <p
+                className={`author ${this.state.randomColorClass}`}
+                id="author"
+              >
+                - {this.state.randomAuthor}
               </p>
+              <div className="row justify-content-center">
                 <button
-            className="btn btn-primary"
+                  className={`btn col-5 col-sm-5 col-md-4 col-lg-3 col-xl-2 ${this.state.randomBackgroundColorClass}`}
                   id="new-quote"
                   onClick={this.handleNewQuote}
                 >
-            New Quote
+                  <FontAwesomeIcon icon={faShuffle} /> Random Quote
                 </button>
                 <a
+                  className="btn bg-color-twitter col-5 col-sm-5 col-md-4 col-lg-3 col-xl-2 offset-1"
                   href={`https://twitter.com/intent/tweet?text="${encodeURI(
                     `${this.state.randomQuote}"\n- By ${this.state.randomAuthor}\n`
                   )}&hashtags=quotes,freeCodeCamp`}
-            className=""
                   id="tweet-quote"
                 >
-            Tweet Quote
+                  <FontAwesomeIcon icon={faTwitter} /> Tweet Quote
                 </a>
               </div>
             </div>
+          </div>
+          <footer>
+            <p>
+              <a
+                className="link-light"
+                href="https://radii.dev/freeCodeCamp.org-Front-End-Dev-Libraries/Build-a-Random-Quote-Machine"
+              >
+                <FontAwesomeIcon icon={faCode} /> {`Source Code & License`}
+              </a>
+            </p>
+          </footer>
+        </div>
+      </div>
     );
   }
 }

random-quote-machine/src/App.scss

@@ -1 +1,66 @@
+@font-face {
+  font-family: "quicksand";
+  /* license: url("https://radii.page/fonts/Quicksand-Regular.txt"); */
+  src: local("quicksand") url("./quicksand.ttf") format("tff");
+}
+
+$font-family-base: quicksand, roboto !default;
+
 @import "~bootstrap/scss/bootstrap";
+
+$colors: #73a857, #3f2e7a, #bdbb99, #77b1a9, #fb6964, #9b59b6, #2c3e50, #27ae60,
+  #f39c12, #16a085;
+
+@for $i from 1 through length($colors) {
+  $color: nth($colors, $i);
+  .color-#{$i} {
+    color: $color;
+  }
+  .bg-color-#{$i} {
+    background-color: $color;
+    color: white;
+    &:hover {
+      background-color: darken($color, 10%);
+      color: white;
+    }
+    &:focus {
+      background-color: $color;
+      color: white;
+    }
+    &:focus:hover {
+      background-color: darken($color, 10%);
+      color: white;
+    }
+  }
+}
+
+.quote {
+  text-align: center;
+}
+
+.author {
+  text-align: right;
+}
+
+.bg-color-twitter {
+  $twitter-color: #1d9bf0;
+  background-color: $twitter-color;
+  color: white;
+  &:hover {
+    background-color: darken($twitter-color, 10%);
+    color: white;
+  }
+  &:focus {
+    background-color: $twitter-color;
+    color: white;
+  }
+  &:focus:hover {
+    background-color: darken($twitter-color, 10%);
+    color: white;
+  }
+}
+
+footer {
+  margin: 10px;
+  text-align: center;
+}