104 lines
2.8 KiB
JavaScript
104 lines
2.8 KiB
JavaScript
|
import './App.css';
|
||
|
|
import { useState } from 'react';
|
||
|
|
|
||
|
|
function App() {
|
||
|
|
const quotes = [
|
||
|
|
{
|
||
|
|
text:"Political power grows out of the barrel of a gun.",
|
||
|
|
author:"Mao Zedong"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text:"If destruction be our lot, we must ourselves be its author and finisher. As a nation of freemen, we must live through all time, or die by suicide.",
|
||
|
|
author:"Abraham Lincoln"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text:"Simplicity is a difficult thing to achieve.",
|
||
|
|
author:"Charlie Chaplin"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text:"When I was a child, ladies and gentlemen, I was a dreamer.",
|
||
|
|
author:"Elvis Presley"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text:"Education is the most powerful weapon which you can use to change the world.",
|
||
|
|
author:"Nelson Mandela"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text:"In a gentle way, you can shake the world.",
|
||
|
|
author:"Gandhi"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
|
||
|
|
const bgColors = [
|
||
|
|
"#37306B",
|
||
|
|
"#66347F",
|
||
|
|
"#9E4784",
|
||
|
|
"#D27685",
|
||
|
|
"#19376D",
|
||
|
|
"#576CBC",
|
||
|
|
"#A5D7E8"
|
||
|
|
]
|
||
|
|
const [currentQuote, setCurrentQuote] = useState(getRandomArrayElement(quotes))
|
||
|
|
const [currentBgColor, setCurrentBgColor] = useState(getRandomArrayElement(bgColors))
|
||
|
|
|
||
|
|
|
||
|
|
function getRandomArrayElement(array){
|
||
|
|
return array[Math.floor(Math.random()*(array.length-1))]
|
||
|
|
}
|
||
|
|
function getDifferentArrayElement(array,currentElement){
|
||
|
|
let newElement = currentElement
|
||
|
|
while(JSON.stringify(newElement)===JSON.stringify(currentElement)){
|
||
|
|
newElement = getRandomArrayElement(array)
|
||
|
|
}
|
||
|
|
return newElement
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleClick(){
|
||
|
|
setCurrentQuote(getDifferentArrayElement(quotes,currentQuote))
|
||
|
|
setCurrentBgColor(getDifferentArrayElement(bgColors,currentBgColor))
|
||
|
|
}
|
||
|
|
const params = new URLSearchParams({
|
||
|
|
text:currentQuote.text+" || "+currentQuote.author
|
||
|
|
}).toString()
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div id="welcome" className="flex-container" style={{backgroundColor: currentBgColor}}>
|
||
|
|
<div className='quote-box'>
|
||
|
|
<blockquote>Welcome to the quote machine!</blockquote>
|
||
|
|
|
||
|
|
<a className="clickable" href="#app">
|
||
|
|
BEGIN
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="App flex-container" id="app" style={{backgroundColor: currentBgColor}}>
|
||
|
|
<header className="App-header">
|
||
|
|
<h1>Quote Machine</h1>
|
||
|
|
</header>
|
||
|
|
<div id="quote-box" className='quote-box'>
|
||
|
|
<blockquote id="text">
|
||
|
|
<span className='quote'>
|
||
|
|
{currentQuote.text}
|
||
|
|
</span>
|
||
|
|
</blockquote>
|
||
|
|
<figcaption id="author">
|
||
|
|
{currentQuote.author}
|
||
|
|
</figcaption>
|
||
|
|
|
||
|
|
|
||
|
|
<button id="new-quote" className="clickable" onClick={handleClick}>NEW</button>
|
||
|
|
<a id="tweet-quote" className="clickable" href={"https://twitter.com/intent/tweet?"+params}>TWEET</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default App;
|