A freeCodeCamp project. I had to create a random quote machine that can also provide a way to post your favorite quote to twitter.
Created
December 16, 2016 19:56
-
-
Save jessmc/8b09cc6c0bb9e4e4c37ea0957b689b2c to your computer and use it in GitHub Desktop.
Random Quote Machine
This file contains 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
<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> |
This file contains 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
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'); | |
} |
This file contains 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
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> |
This file contains 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
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; | |
} |
This file contains 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
<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