<head>
<script src="https://use.fontawesome.com/df56271fe5.js"></script>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Luckiest+Guy|Ubuntu" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div id=heading>
<p><i class="fa fa-quote-left fa-md" aria-hidden="true" style="margin-right:20px"></i> <i class="fa fa-quote-right fa-md" aria-hidden="true"></i></p>
</div>
<div class="quoteMachine">
<div id="quote">
<h3 id ="qBody">Loading from api.forismatic.com...</h3>
<div id="button_group">
<a class="button" id="tweet-quote" target="_blank"><span><i class="fa fa-twitter fa-2x"></i></span></a>
<button type="button" class="btn btn-primary" id= "newQuote">Generate new quote!</button>
</div>
</div>
<p id = "credit">
Data provided by Forismatic API.
</p>
</div>
</div>
</body>
@import url('https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text|Source+Sans+Pro:700');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@400;700&display=swap');
:root {
--main-bg: #1A1A1D;
--main-text: #ffffff;
}
body {
background-color: var(--main-bg);
font-family: "IBM Plex Sans Condensed", sans-serif;
}
#heading{
text-align:center;
margin: 20px;
color:white;
}
#heading p{
font-size:26px;
width: 20rem;
margin: 0 auto;
display: flex;
flex: 1;
align-items: center;
justify-content: space-between;
}
.quoteMachine{
border-radius:5px;
display: flex;
flex: 1;
flex-direction: row;
justify-content: space-around;
}
@media only screen and (max-width: 1000px) {
.quoteMachine {
flex-direction: column;
justify-content: center;
align-items: center;
}
}
#quote{
background-color: var(--main-text);
border-radius: 12px;
padding: 2rem;
flex: 0.55;
min-width: 50%;
max-width: 80%;
}
#newQuote{
border-radius:5px;
background-color: #0084b4;
padding: 10px 20px;
transition: background-color 1.0s ease;
}
#credit{
font-size: 1em;
}
body{
height:100%;
}
#credit{
color:white;
flex: 0.25;
}
#author {
font-size: 1.3em;
}
#qBody{
position: relative;
font-weight: lighter;
font-size: 1.5em;
text-align: left;
margin-bottom: 20px;
}
body{
transition: background-color 1.0s ease;
}
.button {
transition: background-color 1.0s ease;
border:none;
border-radius:5px;
color:white;
background-color:#0084b4;
font-size:0.85em;
padding: 10px 20px;
opacity:1;
cursor:pointer;
}
#tweet-quote i{
color: white;
font-size: 26px;
}
#tweet-quote i:hover{
color: #AAAAAA;
}
#button_group {
display: flex;
flex: 1;
flex-direction: row;
justify-content: space-between;
}
// Credit: https://gist.github.com/Chak10/dc24c61c9bf2f651cb6d290eeef864c1
function randDarkColor() {
var lum = -0.25;
var hex = String('#' + Math.random().toString(16).slice(2, 8).toUpperCase()).replace(/[^0-9a-f]/gi, '');
if (hex.length < 6) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
var rgb = "#",
c, i;
for (i = 0; i < 3; i++) {
c = parseInt(hex.substr(i * 2, 2), 16);
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
rgb += ("00" + c).substr(c.length);
}
return rgb;
}
$(document).ready(function(){
var newColor1 = randDarkColor();
console.log(newColor1)
$("body").css("background-color", newColor1);
$(".button").css("background-color", newColor1);
$("#newQuote").css("background-color", newColor1);
var forismaticAPI = 'https://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?';
$("#qBody").fadeOut(600, function(){
$.getJSON(forismaticAPI, function(data){
$('#qBody').empty();
$('#qBody').append('<blockquote>' + data.quoteText + '</blockquote>' + '<p id="author"> — ' + data.quoteAuthor + '</p>');
$('#qBody').show();
$('.button').attr('href', 'https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + data.quoteText + '" ' + data.quoteAuthor));
});
});
$("#newQuote").click(function() {
$.getJSON(forismaticAPI, function(data){
$('#qBody').empty();
$('#qBody').append('<blockquote>' + data.quoteText + '</blockquote>' + '<p id="author"> — ' + data.quoteAuthor + '</p>');
$('#qBody').show();
$('.button').attr('href', 'https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + data.quoteText + '" ' + data.quoteAuthor));
});
var newColor = randDarkColor();
$("body").css("background-color", newColor);
$(this).css("background-color", newColor);
$(".button").css("background-color", newColor);
});
});
