FCC: Random Quote Machine

fcc-random-quote-machine.markdown

FCC: Random Quote Machine

A freeCodeCamp certification project on Front End Development Libraries.

A Pen by Vishrut Aggarwal on CodePen.

License.

index.html

<div id="app"></div>

script.babel

import * as React from "https://cdn.skypack.dev/react@17.0.1";
import * as ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";

const quotes = [
  {text: `The fool doth think he is wise, but the wise man knows himself to be a fool.`,
  author: "William Shakespeare, As You Like It"},
  {text: `Love all, trust a few, do wrong to none.`,
  author: "William Shakespeare, All's Well That Ends Well"},
  {text: `Love looks not with the eyes, but with the mind,
And therefore is winged Cupid painted blind.`,
  author: "William Shakespeare, A Midsummer Night's Dream"},
  {text: `Be not afraid of greatness. Some are born great, some achieve greatness, and others have greatness thrust upon them.`,
  author: "William Shakespeare, Twelfth Night"},
  {text: `Doubt thou the stars are fire;
Doubt that the sun doth move;
Doubt truth to be a liar;
But never doubt I love.`,
  author: "William Shakespeare, Hamlet"},
  {text: `The fault, dear Brutus, is not in our stars, but in ourselves.`,
  author: "William Shakespeare, Julius Caesar"},
  {text: `There is nothing either good or bad, but thinking makes it so.`,
  author: "William Shakespeare, Hamlet"},
  {text: `This above all: to thine own self be true,
And it must follow, as the night the day,
Thou canst not then be false to any man.`,
  author: "William Shakespeare, Hamlet"},
  {text: `Hell is empty and all the devils are here.`,
  author: "William Shakespeare, The Tempest"},
  {text: `It is not in the stars to hold our destiny but in ourselves.`,
  author: "William Shakespeare"},
  {text: `If music be the food of love, play on,
Give me excess of it; that surfeiting,
The appetite may sicken, and so die.`,
  author: "William Shakespeare, Twelfth Night"},
  {text: `When he shall die,
Take him and cut him out in little stars,
And he will make the face of heaven so fine
That all the world will be in love with night
And pay no worship to the garish sun.`,
  author: "William Shakespeare, Romeo and Juliet"},
  {text: `We know what we are, but not what we may be.`,
  author: "William Shakespeare"},
  {text: `All the world's a stage,
And all the men and women merely players;
They have their exits and their entrances;
And one man in his time plays many parts,
His acts being seven ages.`,
  author: "William Shakespeare, As You Like It"},
  {text: `You speak an infinite deal of nothing.`,
  author: "William Shakespeare, The Merchant of Venice"}
];

const QuoteBox = ({quote, handleNewQuote}) => {
  return (
  <div id = "quote-box">
      <span>
      <h2 class = "fa fa-quote-left"/>
      <h2 id = "text">{quote.text}</h2>
      <h2 class = "fa fa-quote-right"/>
      </span>
      <h3 id = "author">by {quote.author}
      </h3>
      <div id = "actions">
        <button id = "new-quote" onClick = {handleNewQuote}>New Quote</button>
        <a id = "tweet-quote" href = "twitter.com/intent/tweet" target = "_blank">Tweet</a>
      </div>
  </div>
      )
}

const randomIndex = () => Math.round(Math.random() * ((quotes.length-1) - 0) + 0);

const App = () => {
  const [quote, setQuote] = React.useState(quotes[randomIndex()])
  
  const handleNewQuote = () => {
    setQuote(quotes[randomIndex()]);
  }
  
  return (
    <div id = "main">
       <QuoteBox quote = {quote} handleNewQuote = {handleNewQuote}/>
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector("#app"));

scripts

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

style.scss

@import url('https://fonts.googleapis.com/css?family=Raleway:400,500');

:root {
  --color: #00DD92;
}

* {
  padding: 0;
  margin: 0;
  border-sizing: border-box;
}

#main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;
  background-color: var(--color);
  color: var(--color);
  font-family: Raleway;
}

#quote-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 500px;
  min-height: 300px;
  border-radius: 10px;
  background-color: #fff;
  gap: 40px;
  span {
    display: flex;
    margin: 0 10px;
    margin-top: 10px;
  }
  h2 {
    margin: 6px;
  }
  #text {
    display: flex;
    width: 100%;
    text-align: center;
  }
  h3 {
    position: relative;
  }
  #actions {
    display: flex;
    width: 100%;
    justify-content: space-around;
    margin: 30px;
    button {
      background-color: var(--color);
      color: white;
      border: 0;
      padding: 9px 20px;
      border-radius: 5px;
    }
    a {
      text-decoration: none;
      padding: 9px 18px;
      border-radius: 5px;
      color: white;
      background-color: var(--color);
    }
  }
}