Skip to content

Instantly share code, notes, and snippets.

@Rhinogradentia

Rhinogradentia/build-a-random-quote-machine.markdown

Last active March 29, 2018 15:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Rhinogradentia/b95f769fc910e1a679d25adcdd791577 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Rhinogradentia/b95f769fc910e1a679d25adcdd791577 to your computer and use it in GitHub Desktop.
Download ZIP
Build a Random Quote Machine
Raw
index.html
<header>
<div class="container-fluid">
<div class = "row text-center">
<h1 style="padding: 20px 10px 10px 1opx;">Random Quotes:</h1>
<!-- idea - let the user choose quote api -->
<!-- idea - let the user preselect a category -->
</div>
</div>
</header>
<body>
<div class="container-fluid">
<div class="row"><div class="col-xs-12" style="height:75px;"></div></div>
<div class = "row text-center">
<div class="col-xs-3"></div>
<div id='citation-block' class="col-xs-6 quote">
The quote will go here
</div>
<div class="col-xs-3"></div>
</div>
<div class="row">
<div class="col-xs-3"></div>
<div class = "col-xs-6">
<!--<div class="text-left">-->
<button id="goTweet" class="btn btn-light pull-left"><i class="fab fa-twitter" style="font-size:1.5em;"></i></button>
<!--</div>
<div class="text-right">-->
<button id="getQuote" class="btn btn-light pull-right">Get next quote!</button>
<!--</div>-->
</div>
<div class="col-xs-3"></div>
</div>
</div>
</body>
<footer>
<div class="container-fluid">
<div id="quotesSource" class="row text-center footer">
<div class="col-xs-4">by Nadine</div>
<div class="col-xs-4"><p>&copy; Copyright 2018. All Rights Reserved</p></div>
<div class="col-xs-4">
<p>The source of the quotes is: <a href="https://talaikis.com/random_quotes_api/">here</a></p>
</div>
</div>
</div>
</footer>
Raw
script.js
function fetchQuote() {
var html = "";
$.getJSON("https://talaikis.com/api/quotes/random/", function(json) {
html += "<blockquote id='quoteText' class='blockquote' style='font-size:1.5em;'><strong>&quot;</strong>" + json.quote + "<strong>&quot;</strong><footer class='blockquote-footer text-right'>" + json.author + " (<cite title='Category'>"+json.cat+"</cite>)</footer></blockquote>";
$(".quote").html(html);
//$(".quote").html(JSON.stringify(json));
});
}
$(document).ready(function() {
fetchQuote(); // initially display already a quote
$("#getQuote").on("click", function(){
fetchQuote();
});
$("#goTweet").on("click", function(){
var tweetText = document.getElementById("quoteText").textContent;
var url = "https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=" + tweetText;
window.open(url, "_blank");
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
Raw
style.css
header {
height:70px;
background-color: #66CDAA;
}
body {
font-family: 'Montserrat', sans-serif;
background-color: #ecf9f4;
height: 500px;
}
#citation-block {
font-family: 'Caveat', cursive;
font-size: 1.5em;
margin: 0 auto;
background-color: white;
padding: 20px 40px 20px 40px;
}
#goTweet {
margin-top: 20px;
}
#getQuote {
margin-top: 20px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
padding: 20px 10px 10px 10px;
background-color: #66CDAA;
color: white;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment