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.
62 lines
1.7 KiB
JavaScript
62 lines
1.7 KiB
JavaScript
import React from "react";
|
|
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),
|
|
};
|
|
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);
|
|
}
|
|
|
|
handleNewQuote() {
|
|
this.setState((state) => ({
|
|
randomIndex: Math.floor(Math.random() * state.quotesAndAuthors.length),
|
|
}));
|
|
this.setState((state) => ({
|
|
randomQuote: state.quotesAndAuthors[state.randomIndex].quote,
|
|
randomAuthor: state.quotesAndAuthors[state.randomIndex].author,
|
|
}));
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className="body">
|
|
<div className="quote-box" id="quote-box">
|
|
<p className="text" id="text">
|
|
{this.state.randomQuote}
|
|
</p>
|
|
<p className="author" id="author">
|
|
{this.state.randomAuthor}
|
|
</p>
|
|
<button
|
|
className="btn btn-primary"
|
|
id="new-quote"
|
|
onClick={this.handleNewQuote}
|
|
>
|
|
New Quote
|
|
</button>
|
|
<a
|
|
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
|
|
</a>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default App;
|