Created
January 13, 2017 12:28
-
-
Save tsvetkovpro/6de23694e2165bfae3c20fed4d48f9a1 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
```html | |
<blockquote> | |
<p id="quotation"></p> | |
<footer> | |
<p id="source"></p> | |
</footer> | |
</blockquote> | |
<button>Generate Quote</button> | |
``` | |
```css | |
@import url('https://fonts.googleapis.com/css?family=Jim+Nightshade'); | |
@import url('https://fonts.googleapis.com/css?family=Assistant:300'); | |
body { | |
min-height: 100vh; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
flex-direction: column; | |
} | |
#quotation { | |
font-family: 'Jim Nightshade', script; | |
font-size: 13vmin; | |
line-height: 1.2; | |
hanging-punctuation: first; | |
} | |
#source { | |
font-family: 'Assistant', sans-serif; | |
font-size: 4vmin; | |
text-indent: 4vmin; | |
color: rgba(0,0,0,0.6); | |
} | |
button { | |
font-family: 'Assistant', sans-serif; | |
display: block; | |
padding: .5rem; | |
outline: none; | |
font-size: .8rem; | |
background: none; | |
border: 1px solid rgba(0,0,0,0.6); | |
} | |
``` | |
```javascript | |
const quotes = [ | |
{ | |
"quote" : "The only sin is ignorance", | |
"source" : "Christopher Marlowe" | |
}, | |
{ | |
"quote" : "A man is his own easiest dupe, for what he wishes to be true he generally believes to be true", | |
"source" : "Demosthenes" | |
}, | |
{ | |
"quote" : "A lie can travel halfway around the world while the truth is putting on its shoes", | |
"source" : "Mark Twain" | |
}, | |
{ | |
"quote" : "Great minds discuss ideas; average minds discuss events; small minds discuss people", | |
"source" : "Eleanor Roosevelt" | |
}, | |
{ | |
"quote" : "If you have a garden and a library, you have everything you need", | |
"source" : "Marcus Tullius Cicero" | |
}, | |
{ | |
"quote" : "Truth comes out in wine", | |
"source" : "Pliny the Elder" | |
}, | |
{ | |
"quote" : "Everything in the universe is within you. Ask all from yourself", | |
"source" : "Rumi" | |
}, | |
{ | |
"quote" : "When I get a little money I buy books; and if any is left I buy food and clothes", | |
"source" : "Desiderius Erasmus" | |
} | |
] | |
function randomQuote() { | |
let random = quotes[Math.floor(Math.random() * quotes.length)]; | |
quotation.innerText = `“${random.quote}.”`; | |
source.innerText = random.source; | |
} | |
randomQuote(); | |
document.querySelector("button").addEventListener('click', randomQuote) | |
``` |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment