MWPybdq

index.html

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

mwpybdq.markdown

MWPybdq

A Pen by Algo Hussle on CodePen.

License.

script.babel

import * as React from "https://esm.sh/react@18.2.0";
import * as ReactDOM from "https://esm.sh/react-dom@18.2.0";

const quoteData = [
  {
    text: `"It is easier to build strong children than to repair broken men."`,
    author: "Frederick Douglass"
  },
  {
    text: `"You can't separate peace from freedom because no one can be at peace unless he has his freedom"`,
    author: "Malcolm X"
  },
  {
    text: `"Everything would be alright if everything was put back in the hands of the people, and we're going to have to put it back in the hands of the people."`,
    author: "Fred Hampton"
  },
  {
    text: `"Youths are passed through schools that don’t teach, then forced to search for jobs that don’t exist and finally left stranded in the street to stare at the glamorous lives advertised around them."`,
    author: "Huey P. Newton"
  },
  {
    text: `"Make a career of humanity. Commit yourself to the noble struggle for equal rights. You will make a better person of yourself, a greater nation of your country, and a finer world to live in."`,
    author: "Martin Luther King"
  }
];

const QuoteBox = ({ quote, handleNewQuote }) => (
  <div id="quote-box">
    <p id="text">{quote.text}</p>
    <h2 id="author">{quote.author}</h2>
    <div class="actions">
      <button id="new-quote" class="button" onClick={handleNewQuote}>
        New Quote
      </button>
      <a
        href="https://twitter.com/intent/tweet"
        id="tweet-quote"
        target="_blank"
      >
        Tweet
      </a>
    </div>
  </div>
);

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

const App = () => {
  const [quote, setQuote] = React.useState(quoteData[getRandomIndex()]);
  const handleNewQuote = () => {
    setQuote(quoteData[getRandomIndex()]);
  };
  return (
    <div class="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.css

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
}

h2 {
  font-size: 20px;
  margin: 15px 0;
  color: gray;
}

p {
  margin: 0;
  font-size: 20px;
}

.main {
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-color: #9139b5;
}

#quote-box {
  width: 450px;
  padding: 40px;
  border-radius: 10px;
  background-color: #ffffff;
}

.actions {
  display: flex;
  align-items: center;
}

.main .button,
#tweet-quote {
  background-color: #9139b5;
  border-color: #9139b5;
  display: inline-blick;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 20px;
  color: #ffffff;
}

tweet-quote {
  margin-left: 15px;
  padding: 7px 10px;
  text-decoration: none;
}