Skip to content

Instantly share code, notes, and snippets.

@corrortiz

corrortiz/index.html

Created January 26, 2017 17:44
Show Gist options
  • Save corrortiz/52b3951096e80b43a1ca365b62975d9e to your computer and use it in GitHub Desktop.
Save corrortiz/52b3951096e80b43a1ca365b62975d9e to your computer and use it in GitHub Desktop.
Download ZIP
Quote Machine FCC
Raw
index.html
<body>
<main>
<div class="container margin">
<div class="row">
<div class="col s12 m12 center-align">
<div class="card teal">
<div class="card-content white-text">
<span class="card-title"><h2>Random Quote Machine FCC</h2></span>
<div>
<div id="add">
</div>
<h4 id="cuota"></h4>
</div>
</div>
<div class="card-action">
<a id="bttTiwtter" class="btn light-blue hoverable" href="#">Tiwtter</a>
<a id="getcuota" class="btn light-blue hoverable" href="#">Quote</a>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer light-blue">
<div class="footer-copyright">
<div class="col s12 m12 l12">
<h5 class="center-align">by AO HyS</h5>
</div>
</div>
</footer>
</body>
Raw
script.js
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=',
success: function(response) {
var r = JSON.parse(response);
quoteX = r.quote;
autorX = r.author;
$('#add').html('<h5><blockquote><q>' + quoteX + '</q></blockquote></h5>');
$('#cuota').text(autorX);
}
});
}
var quoteX;
var autorX;
$(document).ready(function() {
getQuote();
$('#getcuota').click(function() {
getQuote();
});
$('#bttTiwtter').click(function() {
tweetQuote();
});
function tweetQuote() {
window.open("https://twitter.com/intent/tweet?&original_referer=https%3A%2F%2Fdev.twitter.com%2Fweb%2Ftweet-button&ref_src=twsrc%5Etfw&related=twitterapi%2Ctwitter&text=" + quoteX + ' from ' + autorX + ' #FCCRules');
}
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
Raw
style.css
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
.margin{
margin-top: 6em;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment