Intermediate FrontEnd project for FreeCodeCamp
A Pen by Joe Korbel on CodePen.
<html> | |
<body> | |
<div class="container-fluid"> | |
<div class="row"> | |
<div class="col-md-3"> | |
</div> | |
<div class="col-md-6 text-center message" id="content"> | |
<h1 class="quote-source"> | |
Random Quote Generator | |
</h1> | |
<p class="quote-text">"First solve the problem, then write the code."</p> | |
<p class="quote-author">"John Johnson"</p> | |
<button id = "getMessage" class = "btn btn-primary"> | |
Generate Quote | |
</button> | |
<p> <a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=Amazing%20Quotes%20here:" data-counturl=https://codepen.io/korbel23/pen/yjrMMW> | |
Tweet</a> </p> | |
</div> | |
<div class="col-md-3"> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
Intermediate FrontEnd project for FreeCodeCamp
A Pen by Joe Korbel on CodePen.
$(document).ready(function() { | |
$("#getMessage").on("click", function(){ | |
$.getJSON("https://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?&key=", function (json){ | |
$(".quote-text").html(JSON.stringify(json.quoteText)); | |
if(json.quoteAuthor != ""){ | |
$(".quote-author").html(JSON.stringify(json.quoteAuthor)); | |
}else{ | |
("#.quote-author").html(""); | |
} | |
}); | |
}); | |
}); | |
window.twttr = (function(d, s, id) { | |
var js, fjs = d.getElementsByTagName(s)[0], | |
t = window.twttr || {}; | |
if (d.getElementById(id)) return t; | |
js = d.createElement(s); | |
js.id = id; | |
js.src = "https://platform.twitter.com/widgets.js"; | |
fjs.parentNode.insertBefore(js, fjs); | |
t._e = []; | |
t.ready = function(f) { | |
t._e.push(f); | |
}; | |
return t; | |
}(document, "script", "twitter-wjs")); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
body{ | |
background-color: #00C9BD; | |
} | |
#content{ | |
width: 55em; | |
text-align: center; | |
margin: 2em auto; | |
background-color: white; | |
padding: 4em; | |
border: 1px solid white; | |
border-radius: 10px; | |
} | |
#getMessage{ | |
margin-bottom: 25px; | |
} |
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" /> |