Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Random Quote Machine
<div class="container-fluid">
<div id = "title">
<div class= "row">
<h1>Harry Potter</h1>
<h2>Random Quote Machine</h2>
</div>
</div>
</div>
<div class="container">
<div id ="quoteBox">
<div class="well message text-center">
<i class="fa fa-bolt fa-3x"></i>
<p id="actualQuote"></p>
<p id="actualName"></p>
</div>
</div>
<div class="buttons">
<a class="btn btn-default btn-sm" onclick='tweetQuote()'>
<i class="fa fa-twitter-square"></i> Tweet</a>
<a class="btn btn-default btn-sm" onclick='randomQuote()' id="newQuote">
<i class="fa fa-magic"></i> New Quote</a>
</div>
</div>
</div>

Random Quote Machine

A freeCodeCamp project. I had to create a random quote machine that can also provide a way to post your favorite quote to twitter.

A Pen by Jessica on CodePen.

License.

var quotes = [
["Never trust anything that can think for itself if you can’t see where it keeps its brain.", "- Mr. Weasley"],
["We did it, we bashed them, wee Potter’s the one, and Voldy’s gone moldy, so now let’s have fun!", "- Peeves"],
["Just because YOU have the emotional range of a teaspoon doesn’t mean we all have.", "- Hermione Granger"],
["You know, Minister, I disagree with Dumbledore on many counts ... but you cannot deny he\'s got style.", "- Phineas Nigellus Black"],
["Mr. Moony presents his compliments to Professor Snape, and begs him to keep his abnormally large nose out of other people\'s business.", "-The Maruder\'s Map"],
["Twitchy little ferret, aren\'t you Malfoy?", "- Hermione Granger"],
["It takes a great deal of bravery to stand up to our enemies, but just as much to stand up to our friends.", "- Albus Dumbledore"],
["Have a biscuit, Potter.", "- Professor McGonagall"],
["The toilet\'s never had anything as horrible as your head down it— it might be sick.", "- Harry Potter"]
];
var index = [];
var random;
function randomQuote() {
random = Math.floor(Math.random() * quotes.length);
for (var i = 0; i < quotes.length; i++) {
document.getElementById("actualQuote").innerHTML = quotes[random][0];
document.getElementById("actualName").innerHTML = quotes[random][1];
return quotes[random];
}
}
randomQuote();
function tweetQuote() {
window.open('http://twitter.com/intent/tweet?text=' + quotes[random], '', 'width=800, height=600, left=400, top=20');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
body {
background: #16222A; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #16222A , #3A6073); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #16222A , #3A6073); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ }
#title h1 {
color: #FFFCCA;
text-align: center;
font-family: 'Bowlby One SC', cursive;
font-size: 70px;
}
#title h2 {
text-align: center;
font-family: 'Stalemate', cursive;
color: #11D3BC;
font-size: 50px;
margin-top: -30px;
}
.message {
background-color: #FFF;
text-align: center;
}
#actualQuote {
font-family: 'Arimo', sans-serif;
font-size: 20px;
}
#actualName {
font-family: 'Stalemate', cursive;
font-size: 35px;
}
.buttons {
text-align: center;
padding-bottom: 2em;
}
.buttons a {
padding: 0.5em;
font-family: 'Arimo', sans-serif;
font-size: 20px;
background-color: #FFFCCA;
}
.fa-twitter-square {
color: #11D3BC;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment