55 lines
2.0 KiB
JavaScript
55 lines
2.0 KiB
JavaScript
import React, {Component} from 'react';
|
|
import './quote.scss'
|
|
import { FaQuoteLeft, FaTwitter, FaFacebook } from 'react-icons/fa';
|
|
import quotesList from './quotes_list';
|
|
|
|
export default class quote extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {selectedQuote: this.randomInt(quotesList().length)};
|
|
this.selectRandom = this.selectRandom.bind(this);
|
|
}
|
|
randomInt(size){
|
|
return Math.floor(Math.random() * size);
|
|
}
|
|
selectRandom(){
|
|
this.setState({
|
|
selectedQuote: this.randomInt(quotesList().length)
|
|
})
|
|
// Trigger appear animation again!
|
|
let first = document.getElementById("quote-div");
|
|
let second = document.getElementById("author");
|
|
first.classList.add("appear");
|
|
setTimeout(
|
|
() => first.classList.remove("appear"), 1000
|
|
);
|
|
second.classList.add("appear");
|
|
setTimeout(
|
|
() => second.classList.remove("appear"), 1000
|
|
);
|
|
}
|
|
render() {
|
|
return <div id="main">
|
|
<div className="component-quote" id="quote-box">
|
|
<div id="quote-div">
|
|
<p id="text">
|
|
<FaQuoteLeft id="quote-icon" size={26} style={{"margin-top": 5, "margin-right": 5}}/>
|
|
{quotesList()[this.state.selectedQuote].quote}
|
|
</p>
|
|
</div>
|
|
<p id="author">- {quotesList()[this.state.selectedQuote].author}</p>
|
|
<div id="button-container">
|
|
<div>
|
|
<a id="tweet-quote" href={"https://twitter.com/intent/tweet?&text="+"\""+quotesList()[this.state.selectedQuote].quote+"\" " + quotesList()[this.state.selectedQuote].author} target="_blank"><button><FaTwitter/></button></a>
|
|
|
|
{/* <button><FaFacebook/></button> */}
|
|
</div>
|
|
<div>
|
|
<button id="new-quote" onClick={this.selectRandom}>New Quote</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p >By <a id="page-author"href="https://codepen.io/Loosetooth">Loosetooth</a></p>
|
|
</div>;
|
|
}
|
|
} |