<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Random Quote Machine</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="quote-box">
<div class="quote-text">
<i class="fa fa-quote-left"> </i><span id="text"></span>
</div>
<div class="quote-author">
<span id="author"></span>
</div>
<div class="buttons">
<a class="button" id="twitter-quote" title="Tweet this quote" target="_blank">
<i class="fa fa-twitter"></i>
</a>
<button class="button" id="new-quote" onclick="getQuote();">New quote</button>
</div>
</div>
<div class="footer"> An app by <a href="https://www.freecodecamp.com/charlesmarlow" target="_blank">Charles Marlow</a></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/--Gordon--/random-quote-machine-mmgZxE */
@import url('https://fonts.googleapis.com/css?family=Amatic+SC');
* {
margin: 0;
padding: 0;
list-style: none;
vertical-align: baseline;
}
div {
position: relative;
z-index: 2;
}
body {
background-color: #333;
color: #333;
font-family: 'Amatic SC, cursive', sans-serif;
font-weight: 400;
}
.footer {
width: 450px;
text-align: center;
display: block;
margin: 15px auto 30px auto;
font-size: 16px;
color: #fff;
}
.quote-box {
border-radius: 3px;
position: relative;
margin: 8% auto auto auto;
width: 450px;
padding: 40px 50px;
display: table;
background-color: #fff;
border: 2px solid black;
}
.quote-text {
i{
font-size: 16px;
margin-right: 7px;
}
text-align: center;
width: 450px;
height: auto;
clear: both;
font-weight: 500;
font-size: 28px;
}
.quote-author {
width: 450px;
height: auto;
clear: both;
padding-top: 20px;
font-size: 16px;
text-align: right;
}
.buttons {
width: 450px;
margin: auto;
display: block;
}
.button {
height: 38px;
border: none;
border-radius: 3px;
color: #fff;
background-color: #333;
outline: none;
font-size: 18px;
padding: 8px 18px 6px 18px;
margin-top: 30px;
opacity: 1;
cursor: pointer;
}
.button:hover {
opacity: 0.8;
}
#twitter-quote {
float: left;
padding: 0px;
padding-top: 8px;
text-align: center;
font-size: 19px;
margin-right: 5px;
height: 30px;
width: 40px;
}
#new-quote {
float:right;
}
a {
color: white;
text-decoration: none;
}
/*Downloaded from https://www.codeseek.co/--Gordon--/random-quote-machine-mmgZxE */
/* This programme delivers random quotes upon request. Have fun! */
function inIframe () { try { return window.self !== window.top; } catch (e) { return true; } }
var colors = ['#16a085', '#27ae60', '#2c3e50', '#f39c12', '#e74c3c', '#9b59b6', '#FB6964', '#342224', "#472E32", "#BDBB99", "#77B1A9", "#73A857"];
var currentQuote = '';
var currentAuthor = '';
function openURL(url){
window.open(url, 'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
}
function getQuote() {
$.ajax({
headers: {
"X-Mashape-Key": "OivH71yd3tmshl9YKzFH7BTzBVRQp1RaKLajsnafgL2aPsfP9V",
Accept: "application/json",
"Content-Type": "application/x-www-form-urlencoded"
},
url: 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=famous',
success: function(r) {
if (typeof r === 'string') {
r = JSON.parse(r);
}
currentQuote = r.quote;
currentAuthor = + r.author;
if(inIframe())
{
$('#twitter-quote').attr('href', 'https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor));
}
$(".quote-text").animate({
opacity: 0
}, 500,
function() {
$(this).animate({
opacity: 1
}, 500);
$('#text').text(r.quote);
});
$(".quote-author").animate({
opacity: 0
}, 500,
function() {
$(this).animate({
opacity: 1
}, 500);
$('#author').html(r.author);
});
var color = Math.floor(Math.random() * colors.length);
$("html body").animate({
backgroundColor: colors[color],
color: colors[color]
}, 1000);
$(".button").animate({
backgroundColor: colors[color]
}, 1000);
}
});
}
$(document).ready(function() {
getQuote();
$('#new-quote').on('click', getQuote);
$('#twitter-quote').on('click', function() {
if(!inIframe()) {
openURL('https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor));
}
});
});