-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
141 lines (112 loc) · 3.84 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Random Quote Generator by @mrjaypeasmith</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/paper.min.css">
<style>
header {
padding: 1em;
background-color: #ffff80;
margin-top: 1em;
text-align: center;
}
.quote {
font-size: 3em;
}
.btn-large {
margin: 0.5em;
}
#button:active {
box-shadow: 0 0 0 0;
}
.card {
text-align: center;
width: 45em;
}
.new-quote-button {
background-color: #8cff66;
}
.tweet-button {
background-color: #b3e0ff;
}
@media (max-width: 700px) {
header {
padding: 1em;
background-color: #ffff80;
margin-top: 1em;
text-align: center;
}
h1 {
font-size: 45px;
}
#newQuoteSection {
font-size: 35px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row flex-top flex-center">
<header class="border shadow">
<h1>Random Quote Generator</h1>
</header>
</div>
<div class="row flex-center">
<button id="button" class="btn-large new-quote-button" onClick="getQuote()">New Quote</button>
<button id="button" class="btn-large tweet-button" onClick="tweetQuote()">Tweet Quote</button>
</div>
<div class="row flex-center">
<main class="card">
<p class="quote card-body center" id="newQuoteSection">...</p>
</main>
</div>
<div class="row flex-bottom flex-center">
<footer>
<p>A freeCodeCamp project by <a href="https://twitter.com/mrjaypeasmith" target="_blank">@mrjaypeasmith</a></p>
</footer>
</div>
</div>
<script>
// Quotes
let quotes = ["'Ed has a thing for Ken Adams'", "'Sam could've been a Billionaire'", "'I like how Ben King sugarcoats everything'", "'Mingos for life'", "'Where there is a Will there is a lawsuit'","'A man sued an airline company after it mislaid his luggage. Sadly, he lost his case.'", "'What’s the difference between a good lawyer and a great lawyer? A good lawyer knows the law. A great lawyer knows the judge.'", "'Death by red pen!'", "'Give me the billable hour, or give me death!'"
// "'When the going gets tough, the tough use JavaScript'",
// "'To code or not to code, that is the question'",
// "'There is more than one type of coder, but they all started at zero'",
// "'Give me your kisses, and your pull requests'",
// "'Gitter done!'",
// "'How many functions does it take to change the world?'",
// "'You had me at Hello World'",
// "'Take me to your GitHub profile'",
// "'Every error is a chance to learn'",
// "'I owe it all to @freeCodeCamp'",
// "'Stop repeating yourself! Stop repeating yourself! Stop repeating yourself!'",
// "'Mmmmm, Vanilla JavaScript'",
// "'Hold me close and make me responsive'",
// "'Tell me your secret function'",
// "'There is more than one way to write a function'",
// "'You're an array of sunshine'",
// "'Whisper sweet functions in my ear'",
// "'Don't tell anyone, but I really hate IE6'",
// "'!false === it's funny because it's true'",
// "'It was love at first byte'",
// "'@ossia made me do it!'",
// "'I function better at night'"
]
// Get random quote and display
function getQuote() {
var randomNumber = Math.floor(Math.random() * quotes.length);
document.getElementById('newQuoteSection').innerHTML = quotes[randomNumber];
}
// Tweet quote on click
function tweetQuote() {
var generatedQuote = document.getElementById('newQuoteSection').innerHTML;
var tweetUrl = ' https://twitter.com/intent/tweet?text=' + encodeURIComponent(generatedQuote) + ' @mrjaypeasmith';
window.open(tweetUrl);
}
</script>
</body>
</html>