Skip to content

Instantly share code, notes, and snippets.

@tsvetkovpro
Created January 13, 2017 12:28
Show Gist options
  • Save tsvetkovpro/6de23694e2165bfae3c20fed4d48f9a1 to your computer and use it in GitHub Desktop.
Save tsvetkovpro/6de23694e2165bfae3c20fed4d48f9a1 to your computer and use it in GitHub Desktop.
```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