<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="main-container">
<header>
<h1 class="site-title">Random Quote Machine</h1>
<p class="site-description">Welcome! Enjoy these cool random quotes below - using the <a href="https://forismatic.com/en/api/" target="_blank">Forismatic API</a>.</p>
</header>
<section class="quote-container my-box-shadow my-transition">
<p class="quote-content">
<i class="fa fa-quote-left" id="quote-symbol"></i>
<span id="quote-text">Always be yourself, express yourself, have faith in yourself, do not go out and look for a successful personality and duplicate it.</span>
</p>
<p class="quote-author">
<span id="quote-name">-- Bruce Lee</span>
</p>
</section>
<section class="btn-wrapper">
<span class="main-text">Share: </span>
<a href="javascript:void(0);" target="_blank" class="my-box-shadow my-btn btn-share" id="share-twitter"><i class="fa fa-twitter"></i></a>
<a href="javascript:void(0);" target="_blank" class="my-box-shadow my-btn btn-share" id="share-tumblr"><i class="fa fa-tumblr"></i></a>
<div class="my-btn btn-newquote my-box-shadow my-transition">
<span>New quote</span>
</div>
</section>
</div>
<section class="fb-comment-wrapper">
<!-- Comment section -->
<div class="fb-comments" data-href="https://codepen.io/completejavascript/full/xWZyRy" data-width="380" data-numposts="5" data-mobile="true"></div>
</section>
<!-- Footer -->
<footer>
<p>
Copyright © 2018 by
<a href="http://about.phamvanlam.com/" target="_blank">Lam Pham</a>. All Rights Reserved.
</p>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="./js/main.js"></script>* {box-sizing: border-box;}
body {
margin: 0;
color: #222;
font: normal normal normal 1rem/1.6 Nunito Sans, Helvetica, Arial, sans-serif;
}
h1{
line-height: 1.2;
font-weight: 700;
font-size: 1.75rem;
}
a {
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
header {text-align: center;}
header a {color: rgba(255, 255, 255, 0.85);}
header a:hover {color: rgb(255, 255, 255);}
.my-transition {
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.my-box-shadow{
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.main-container {
width: 100%;
padding: 50px 15px 25px;
background-color: #0392cf;
margin-bottom: 35px;
}
.main-text{color:#fff;}
.site-title {
color: #fff;
margin-bottom: 10px;
}
.site-description {
font-size: 0.9rem;
margin-top: 0;
color: rgba(255, 255, 255, 0.85);
}
.quote-container {
border-radius: 4px;
padding: 10px;
margin-top: 50px;
background-color: #fff;
}
.quote-container:hover {
box-shadow: 0 2px 5px rgba(0,0,0,0.12), 0 3px 5px rgba(0,0,0,0.24);
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.12), 0 3px 5px rgba(0,0,0,0.24);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,0.12), 0 3px 5px rgba(0,0,0,0.24);
}
.quote-content {
text-align: justify;
font-weight: 550;
}
#quote-left {
font-size: 1.0rem;
display: inline-block;
}
.quote-author {
text-align: right;
margin: 2px;
}
.btn-wrapper {margin: 20px 0px 15px;}
.my-btn {
text-align: center;
display: inline-block;
background-color: #fff;
cursor: pointer;
border-radius: 4px;
padding: 5px;
}
.btn-wrapper .btn-share {
width: 40px;
color: #222;
margin: 0.1rem;
}
.btn-wrapper .btn-share:hover {background-color: #fdf498;}
.btn-newquote {float: right;}
.btn-newquote span{
width: 100px;
font-weight: 550;
}
.btn-newquote:hover{background-color: #fdf498;}
footer {
position: fixed;
left: 0;
bottom: 0;
padding: 2px;
text-align: center;
font-size: 0.8rem;
color: #fff;
background-color: #0b1420;
width: 100%;
}
footer a {color: #0392cf;}
footer a:hover {color: #0481b6;}
.fb-comments {text-align: center;}
.fb-comment-wrapper {
padding: 15px;
margin-bottom: 50px;
}
@media (min-width: 576px) {
h1 {font-size: 2.2rem;}
.site-description {font-size: 1.1rem;}
.main-container{padding-top: 30px;}
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
h1 {font-size: 3.2rem;}
.main-container{padding: 30px 60px;}
.fb-comment-wrapper{padding: 50px;}
.site-description {font-size: 1.1rem;}
.quote-content{font-size: 1.5rem;}
.quote-container {
margin-bottom: 30px;
padding: 20px 25px;
}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
.fb-comment-wrapper{
height: 100%;
position: fixed;
top: 0;
right: 0;
z-index: 1000;
background-color: #fff;
width: 400px;
padding: 15px;
}
.fb-comments{
height: 100%;
width: 100%;
}
.main-container, footer{width: calc(100% - 400px);}
.main-container{
padding: 30px 60px;
position: fixed;
left: 0;
top: 0;
height: 100%;
}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.main-container{padding: 30px 160px;}
.quote-container{ margin-top: 80px;}
}
$(document).ready(function(){
let requestURL = 'https://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?';
updateShares();
requestRandomQoute();
$(".btn-newquote").click(function(){
requestRandomQoute();
});
function updateShares(qoute, author) {
let currentQuote = qoute || $("#quote-text").text();
let currentAuthor = author || $("#quote-name").text();
let twitterShareURL = 'https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' +
encodeURIComponent('"' + currentQuote + '" ' + currentAuthor);
$("#share-twitter").attr("href", twitterShareURL);
let tumblrShareURL = 'https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,freecodecamp&caption=' +
encodeURIComponent(currentAuthor) + '&content=' +
encodeURIComponent(currentQuote) +
'&canonicalUrl=https%3A%2F%2Fwww.tumblr.com%2Fbuttons&shareSource=tumblr_share_button';
$("#share-tumblr").attr("href", tumblrShareURL);
}
function requestRandomQoute() {
$.getJSON(requestURL, function(data) {
animateText("#quote-text", data.quoteText);
animateText("#quote-name", '-- ' + data.quoteAuthor);
animateText("#quote-symbol");
updateShares(data.quoteText, data.quoteAuthor);
});
}
function animateText(element, content) {
$(element).animate({opacity: 0}, 500, function() {
$(this).animate({opacity: 1}, 500);
if(content) $(this).text(content);
});
}
});
External CSS
This Pen doesn't use any external CSS resources.