This is my first codepen challenge on freeCodeCamp
A Pen by Sean Campbell on CodePen.
<div class="container"> | |
<div class="row"> | |
<div class="col-xs-12"> | |
<h1 id="title">Random Quote Machine</h1> | |
</div> | |
</div> | |
</div> | |
<div class="container"> | |
<div class="row" id="intro"> | |
<div class="col-xs-12"> | |
<p id="welcome">Sometimes, everyone needs a little inspiration, so here is a random quote of the day for you to do with what you like.</p> | |
</div> | |
</div> | |
</div> | |
<div class="container-fluid"> | |
<div class="row" id="buttons"> | |
<div class="col-xs-6 center-block"><button type="button" class="btn btn-default" id="random-quote"> | |
<span class="glyphicon glyphicon-random"></span> Quote</button></div> | |
<div class="col-xs-6 center-block"><button type="button" class="btn btn-default" id="tweet"> | |
<span class="glyphicon glyphicon-share"></span> <a class="twitter-share-button popup twitter" href="https://twitter.com/intent/tweet" data-text="test"> | |
Tweet</a></button></div> | |
</div> | |
</div> | |
<div class="container"> | |
<div class="row" id="full-quote"> | |
<div class="col-xs-10"> | |
<blockquote class="blockquote-reverse" id="quote">Click for random quote!</blockquote> | |
<div id="author"></div> | |
</div> | |
</div> | |
</div> | |
This is my first codepen challenge on freeCodeCamp
A Pen by Sean Campbell on CodePen.
$(document).ready(function() { | |
$('.popup').click(function(event) { | |
var text = $('#quote').text() + " -- " + $('#author').text(); | |
var hashtags = "Quote"; | |
var width = 575, | |
height = 400, | |
left = ($(window).width() - width) / 2, | |
top = ($(window).height() - height) / 2, | |
url = this.href + "?text=" + text + "&hashtags=" + hashtags, | |
opts = 'status=1' + | |
',width=' + width + | |
',height=' + height + | |
',top=' + top + | |
',left=' + left; | |
window.open(url, 'twitter', opts); | |
return false; | |
}); | |
var quotes = [ | |
["Strive not to be a success, but rather to be of value.", "Albert Einstein"], | |
["Two roads diverged in a wood, and I — I took the one less traveled by, And that has made all the difference.", "Robert Frost"], | |
["You miss 100% of the shots you don’t take.", "Wayne Gretzky"], | |
["The most difficult thing is the decision to act, the rest is merely tenacity.", "Amelia Earhart"], | |
["Every strike brings me closer to the next home run.", "Babe Ruth"], | |
["Life isn’t about getting and having, it’s about giving and being.", "Kevin Kruse"], | |
["Life is what happens to you while you’re busy making other plans.", "John Lennon"], | |
["Life is 10% what happens to me and 90% of how I react to it.", "Charles Swindoll"], | |
["The mind is everything, what you think you become.", "Buddha"], | |
["Eighty percent of success is showing up.", "Woody Allen"], | |
["Your time is limited, so don't waste it living someone else's life.", "Steve Jobs"], | |
["Every child is an artist. The problem is how to remian an artist once he grows up.", "Pablo Picasso"], | |
["Be yourself; everyone else is already taken.", "Oscar Wilde"], | |
]; | |
$('#random-quote').click(function() { | |
var index = Math.floor(Math.random() * quotes.length); | |
$('#quote').text(quotes[index][0]); | |
$('#author').text(quotes[index][1]); | |
}) | |
}) |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
@import url(http://fonts.googleapis.com/css?family=Griffy); | |
body { | |
background-color: #999966; | |
} | |
#title { | |
font-family: Griffy, cursive, sans-serif; | |
font-size: 4em; | |
text-shadow: 4px 4px 2px #663300; | |
color: #000500; | |
text-align: center; | |
padding: 10px; | |
} | |
#intro { | |
margin-top: 50px; | |
} | |
#buttons { | |
margin-top: 25px; | |
} | |
#welcome { | |
border: inset #996600; | |
border-radius: 5px; | |
font-family: "Comic Sans MS", cursive, sans-serif; | |
font-size: 1.1em; | |
margin-right: 100px; | |
margin-left: 100px; | |
text-align: center; | |
margin-bottm: 50px | |
} | |
#full-quote { | |
margin-left: 50px; | |
margin-right: 50px; | |
margin-top: 40px; | |
border: hidden; | |
border-radius: 50px; | |
background-color: #FFFF99; | |
} | |
#quote { | |
padding-left: 3em; | |
} | |
#author { | |
float: right; | |
font-style: oblique; | |
} | |
#random-quote { | |
float: right; | |
background: #004d05; | |
background-image: linear-gradient(to 60deg, #004d05, #abeb57); | |
-webkit-border-radius: 8; | |
-moz-border-radius: 8; | |
border-radius: 8px; | |
text-shadow: 4px 3px 2px #5c4d01; | |
font-family: Georgia; | |
color: #ffb940; | |
font-size: 1.25em; | |
padding: 12px; | |
text-decoration: none; | |
} | |
.twitter { | |
color: #ffb940; | |
} | |
.twitter:visited { | |
color: #ffb940; | |
text-decoration: none; | |
} | |
.twitter:hover, #random-quote:hover, #tweet:hover{ | |
color: #FF6600; | |
font-weight: bold; | |
text-decoration: none; | |
} | |
#tweet { | |
float: left; | |
background: #004d05; | |
background-image: linear-gradient(to 240deg, #004d05, #abeb57); | |
-webkit-border-radius: 8; | |
-moz-border-radius: 8; | |
border-radius: 8px; | |
text-shadow: 4px 3px 2px #5c4d01; | |
font-family: Georgia; | |
color: #ffb940; | |
font-size: 1.25em; | |
padding: 12px; | |
text-decoration: none; | |
} |
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> |