<div class="container">
<div class="socialMedia">
<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A//codepen.io/Boguz/pen/zKWXYj" class="socialIcon" target="_blank">
<img src="https://dl.dropboxusercontent.com/s/4lpfjd6968z1602/icon-face.svg?dl=0" alt="" class="icon"/>
</a> <!-- end .socialIcon -->
<a class="socialIcon" href="https://twitter.com/home?status=random%20quote%3A%20http%3A//codepen.io/Boguz/pen/zKWXYj" target="_blank">
<img src="https://dl.dropboxusercontent.com/s/v0osa3jl5eg0d6n/icon-twit.svg?dl=0" alt="" class="icon" />
</a> <!-- end .socialIcon -->
<a href="https://github.com/boguz/simplequotes" class="socialIcon" target="_blank">
<img src="https://dl.dropboxusercontent.com/s/nd60pbq0nkallo9/icon-git.svg?dl=0" alt="" class="icon" />
</a> <!-- end .socialIcon -->
</div> <!-- end .socialMedia -->
<div class="quoteBubble">
<div class="quote">If you tell the truth, you don't have to remember anything.</div>
</div> <!-- end .quoteBubble -->
<div class="author">Mark Twain</div> <!-- end .author -->
<button class="newQuote">New Quote</button> <!-- end .newQuote -->
</div> <!-- end .container -->
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Roboto;
font-weight: 100;
}
a { text-decoration: none; }
.container {
background-color: #049372;
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transition: .3s all ease-in-out;
}
.socialMedia {
position: absolute;
height: 30px;
width: 120px;
top: 10px;
left: 10px;
}
.socialIcon {
height: 30px;
width: 30px;
margin-right: 10px;
}
.icon {
height: 30px;
opacity: .5;
transition: .5s opacity ease-in-out;
}
.icon:hover { opacity: 1; }
.quoteBubble {
max-width: 60vw;
background-color: white;
color: #049372;
padding: 40px;
margin-bottom: 40px;
border-radius: 80px;
position: relative;
text-align: center;
box-shadow: 10px 10px 15px 0 rgba(0,0,0,0.15);
}
.quoteBubble:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 20px 20px 0 20px;
border-color: white transparent transparent transparent;
position: absolute;
bottom: -20px;
left: 50%;
margin-left: -20px;
}
.quote {
font-size: 2.5em;
font-style: italic;
float: left;
transition: .3s all ease-in-out;
}
.author {
font-size: 1.75em;
color: white;
float: left;
}
.newQuote {
position: absolute;
bottom: 10px;
right: 10px;
background-color: #049372;
border: 1px solid white;
color: white;
padding: 5px 10px;
text-transform: uppercase;
font-weight: 300;
opacity: .5;
cursor: pointer;
transition: .3s all ease-in-out
}
.newQuote:hover {
opacity: 1;
}////////////////////// LOAD DATA FROM API //////////////////////////////////////
request = new XMLHttpRequest();
request.open("GET", "https://crossorigin.me/https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=40", false);
request.send();
request = [].slice.call(JSON.parse(request.response));
var currentQuote = "";
///////////////// FUNCTION TO UPDATE THE QUOTE ////////////////////////////////
function getQuote() {
var randomQuote = [Math.floor(Math.random() * request.length)];
$(".quote").html(request[randomQuote].content);
$(".author").html(request[randomQuote].title);
currentQuote = request[randomQuote].content;
// get size of quote
var q = $(".quote").html().length;
//alert (q);
// if quote is to big, reduce font size
if (q > 120) {
$(".quote").css("font-size", "1.8em");
} else {
$(".quote").css("font-size", "2.5em");
}
}
//////////////////// DOCUMENT READY FUNCTION ////////////////////////////////////
$(document).ready(function() {
// get random quote
getQuote();
// color array
var colors = ["#D64541", "#C0392B", "#68C3A3", "#16A085", "#6C7A89", "#4183D7"];
// get new quote on button click
$('.newQuote').click(function() {
getQuote();
// get a random color from the array
var color = colors[Math.floor(Math.random() * colors.length)];
// change colors
$(".quote").css("color", color);
$(".container").css("background-color", color);
$(".newQuote").css("background-color", color);
});
});
External CSS
This Pen doesn't use any external CSS resources.