You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
3.5 KiB
JavaScript
95 lines
3.5 KiB
JavaScript
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";
|
|
|
|
class App extends React.Component {
|
|
constructor() {
|
|
super();
|
|
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 d-flex align-items-center min-vh-100 ${this.state.randomBackgroundColorClass}`}
|
|
>
|
|
<div className="container">
|
|
<div className="card">
|
|
<div className="card-body " id="quote-box">
|
|
<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 col-10 mb-2 mb-sm-0 col-sm-5 col-md-4 col-lg-3 col-xl-2 ${this.state.randomBackgroundColorClass}`}
|
|
id="new-quote"
|
|
onClick={this.handleNewQuote}
|
|
>
|
|
<FontAwesomeIcon icon={faShuffle} /> Random Quote
|
|
</button>
|
|
<a
|
|
className="btn bg-color-twitter col-10 col-sm-5 col-md-4 col-lg-3 col-xl-2 offset-sm-1"
|
|
href={`https://twitter.com/intent/tweet?text="${encodeURI(
|
|
`${this.state.randomQuote}"\n- By ${this.state.randomAuthor}\n`
|
|
)}&hashtags=quotes,freeCodeCamp`}
|
|
id="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>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default App;
|