<body>
<h1>Random Quote Generator</h1>
<div class="quote-box">
<div class="quote-text">
<blockquote>
<p class="js-quoteBox" id="text"></p>
<div class="author">
<span id="quote-source"></span>
</div>
</blockquote>
<div class="buttons">
<a class="btn btn-default" id="tweet-quote" title="Tweet this quote!">
<i class="fa fa-twitter"> </i>
</a>
<button class="btn btn-default" type="button" id="new-quote">Get Quote</button>
</div>
</div>
</div>
<div class="footer">
<h5>Made with ☕ in Swatara Twp, PA by
<a href="https://github.com/twhite96"> Tiffany White</a>
</h5>
</div>
</body>
@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,500);
* {
margin-left:auto;
margin-right:auto;
padding: 0;
list-style: none;
vertical-align: baseline;
}
h1 {
color: #fff;
text-align: center;
}
div {
position: relative;
z-index: 2;
}
body {
background-color: #06d7d9;
color: #323332;
font-family: 'Droid+Sans', sans-serif;
font-weight: 400;
}
.footer {
width: 450px;
text-align: center;
display: block;
margin: 15px auto 30px auto;
font-size: 0.8em;
color: #fff;
}
.footer a {
font-weight: 500;
text-decoration: none;
color: #fff;
}
.quote-box {
border-radius: 3px;
-webkit-box-shadow: 7px 18px 56px -27px rgba(0,0,0,0.75);
-moz-box-shadow: 7px 18px 56px -27px rgba(0,0,0,0.75);
box-shadow: 7px 18px 56px -27px rgba(0,0,0,0.75);
position: relative;
margin: 8% auto auto auto;
width: 450px;
padding: 40px 50px;
display: table;
background-color: #fff;
}
.quote-box .quote-text {
text-align: center;
width: 450px;
min-height: 100px;
clear: both;
font-weight: 500;
font-size: 1.75em;
transition: height 0.66s ease-out;
}
.quote-box .quote-text i {
text-align: center;
display: block;
float: none;
font-size: 20px;
}
.quote-box blockquote {
background: #f9f9f9;
border-left: 10px solid #06d7d9;
margin: 1.5em 10px;
padding: 2em 10px;
quotes: "\201C" "\201D" "\2018" "\2019";
}
.quote-box blockquote:before {
color: #06d7d9;
font-size: 4em;
content: open-quote;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.1em;
float: left;
}
.quote-box .quote-source {
width: 450px;
height: auto;
clear: both;
padding-top: 20px;
font-size: 1em;
text-align: right;
}
.quote-box .buttons {
width: 450px;
margin: auto;
display: block;
}
.quote-box .buttons .btn {
height: 38px;
border: none;
border-radius: 7px;
background-color: #06d7d9;
color: #fff;
outline: none;
font-size: 0.85em;
padding: 8px 18px 6px 18px;
margin-top: 50px;
opacity: 1;
cursor: pointer;
position: relative;
}
.quote-box .buttons .btn:active {
box-shadow: 0 0 #00a4a6;
transition: all 0.3s ease;
transform: translateY(4px);
top: 5px;
}
.quote-box .buttons .btn:hover {
opacity: 0.9;
box-shadow: 0 3px #00a4a6;
top: 1px;
}
.quote-box .buttons .btn#tweet-quote {
float: left;
padding: 0px;
padding-top: 5px;
text-align: center;
font-size: 1.2em;
margin-right: 5px;
height: 30px;
width: 40px;
}
.quote-box .buttons .btn#new-quote {
float: right;
padding-top: 5px;
}
a:link {
text-decoration: underline;
}
span {
text-align: center;
margin: 40px 20px;
height: 0;
transition: height 0.66s ease-out;
}
var quoteBox = '';
$(document).ready(function() {
$('#new-quote').on('click', function(e) {
e.preventDefault();
var url = 'https://quotes.rest/quote/random?language=en&limit=1';
// Give the paragraph for quotes a class name to be precise
quoteBox = $('.js-quoteBox');
// I chose to give it .js-quoteBox
// Hide it in the DOM (You should do this in CSS instead)
quoteBox.hide();
// Make the request
$.getJSON(url, function(data) {
console.log(`${data.content} —${data.author}`)
// Use response here to modify the DOM
quoteBox.html(data.content)[0].innerText;
// Now you can fade the js-quoteBox back into the DOM
quoteBox.fadeToggle(1000, function() {
$(this).html(data.content);
// Show source if available
if (typeof data.author !== 'undefined') {
$('#quote-source').html('— ' + data.author);
} else {
$('#quote-source').text('');
}
})
})
$('#tweet-quote').on('click', function(e) {
//We tell our browser not to follow that link
e.preventDefault();
//We get the URL of the link
window.open('https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + quoteBox.text());
console.log(quoteBox);
});
});
});
