Created
January 27, 2017 05:49
-
-
Save CSENoni/57703a077a497e91231b2a4b3999e4fb to your computer and use it in GitHub Desktop.
Random Quote
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"> | |
<div id="heading"> | |
<button>Change Quote</button> | |
<i class="fa fa-twitter-square"></i> | |
</div> | |
<div id="blockquote"> | |
<h1><i class="fa fa-quote-left"></i>Quote<i class="fa fa-quote-right"></i></h1> | |
<h3>Author</h3> | |
</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
// Put all of the quotes of computer science in an array for storage | |
var quotes = [{ | |
quote: "Computers are useless. They can only give you answers.", | |
author: "Pablo Picasso" | |
}, { | |
quote: "Computers are like bikinis. They save people a lot of guesswork.", | |
author: "Sam Ewing" | |
}, { | |
quote: "They have computers, and they may have other weapons of mass destruction.", | |
author: "Paul Leary" | |
}, { | |
quote: "If the automobile had followed the same development cycle as the computer, a Rolls-Royce would today cost $100, get a million miles per gallon, and explode once a year, killing everyone inside.", | |
author: "Robert X. Cringely" | |
}, { | |
quote: "Never trust a computer you can’t throw out a window.", | |
author: "Steve Wozniak" | |
}, { | |
quote: "Most software today is very much like an Egyptian pyramid with millions of bricks piled on top of each other, with no structural integrity, but just done by brute force and thousands of slaves.", | |
author: "Alan Kay" | |
}, { | |
quote: "I’ve finally learned what ‘upward compatible’ means. It means we get to keep all our old mistakes.", | |
author: "Dennie van Tassel" | |
}, { | |
quote: "The Internet? Is that thing still around?", | |
author: "Homer Simpson" | |
}, { | |
quote: "The Web is like a dominatrix. Everywhere I turn, I see little buttons ordering me to Submit.", | |
author: "Nytwind" | |
}, { | |
quote: "Come to think of it, there are already a million monkeys on a million typewriters, and Usenet is nothing like Shakespeare.", | |
author: "Blair Houghton" | |
}]; | |
var getQuote; | |
init(); | |
// Running the program | |
function init() { | |
getQuote = quotes[0].quote + " (" + quotes[0].author + ")"; | |
// At the beginning, let the screen show the first quote | |
$("h1").html("<i class='fa fa-quote-left'></i> " + quotes[0].quote + " <i class='fa fa-quote-right'></i>"); | |
$("h3").html(quotes[0].author); | |
changeQuote(); | |
tweetQuote(); | |
} | |
// Change to the new quote everytime we run the event of this function | |
function changeQuote() { | |
$("button").click(function() { | |
var randomQuote = Math.floor(Math.random() * quotes.length); | |
$("h1").fadeOut(function() { | |
$(this).html("<i class='fa fa-quote-left'></i> " + quotes[randomQuote].quote + " <i class='fa fa-quote-right'></i>").fadeIn(); | |
}); | |
$("h3").fadeOut(function() { | |
$(this).html(quotes[randomQuote].author).fadeIn(); | |
}); | |
getQuote = quotes[randomQuote].quote + " (" + quotes[randomQuote].author + ")"; | |
}); | |
} | |
function tweetQuote() { | |
// Change to the random quote after clicking | |
$(".fa-twitter-square").click(function() { | |
var tweet = "https://twitter.com/intent/tweet?text=" + encodeURIComponent(getQuote); | |
window.open(tweet, '_blank'); | |
}); | |
} |
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.0.0/jquery.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: #EDE574; /* fallback for old browsers */ | |
background: -webkit-linear-gradient(to left, #EDE574 , #E1F5C4); /* Chrome 10-25, Safari 5.1-6 */ | |
background: linear-gradient(to left, #EDE574 , #E1F5C4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ | |
} | |
#heading { | |
background: #32cd32; | |
height: 36px; | |
font-size: 24px; | |
} | |
#heading button { | |
border: none; | |
background: #32cd32; | |
color: white; | |
font-size: 18px; | |
height: 100%; | |
} | |
#heading button:focus, #heading button:hover { | |
outline: none; | |
background: white; | |
font-weight: bold; | |
color: #32cd32; | |
cursor: pointer; | |
transition: all 0.2s; | |
} | |
.fa-twitter-square { | |
float: right; | |
padding: 5px; | |
color: white; | |
} | |
.fa-twitter-square:hover { | |
color: #f3f3f3; | |
font-weight: bold; | |
cursor: pointer; | |
transition: all 0.5s; | |
} | |
.container { | |
background: white; | |
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); | |
width: 400px; | |
margin: 150px auto; | |
} | |
#blockquote { | |
font-family: 'Dancing Script', cursive; | |
padding: 10px; | |
} | |
#blockquote h3 { | |
text-align: right; | |
} |
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/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet" /> | |
<link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700'rel='stylesheet'type='text/css'" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment