In this tutorial, we’ll use some simple JQuery connected with a Quote API to make a website present a quote after the spacebar is pressed. We will be using AJAX to service requests between the API and handling the JSONP response.
As always, you’ll need a folder with three files:
To start with, our content will be displayed in the center of the screen. We also want to display our quote and source/author separately. Create a parent container div and two other divs for the quote and source. Last, create some instructions at the tails of the site so people know how to use it, import JQuery scripts using CDN, and link a custom font for us to use from Google Fonts. Our website isn’t functional and it’s pretty sketchy right now so let’s use some CSS to alleviate parts of those problems.
<html>
<head>
<meta charset="utf-8">
<title>
Quote
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
</head>
<body>
<div class="contain">
<div class="executed" id="quote">
</div>
<div id="writer">
</div>
<div class="bottom">
<h2> press space to inspire </h2>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="app.js"></script>
</html>
The divs are empty, so you won’t see them. However, they still are there, but all you should see as a result is the instructions to press the space we typed earlier.
Here’s some basic things you should style:
This is my approach, feel free to tweak it to your preferences.
html,body {
height: 100%;
width: 100%;
background: #202020;
display:table;
overflow: hidden;
}
/* font css */
p {
font-size:2em;
}
/* main container css */
.contain{
display:table-cell;
vertical-align: middle;
text-align: center;
padding:3em;
}
/* quote css */
#quote{
color:white;
font-family : Inconsolata;
position: relative;
}
/* source css */
#writer{
opacity:1;
font-size: 1em;
padding-right:2em;
text-align: right;
color:white;
font-family : Inconsolata;
position: relative;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
/* for the after stage of the source */
.fade {
opacity:0 !important;
}
/* for the after stage of the quote.*/
.executed {
opacity:1;
right: 0;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
/* for the before stage of the quote; should slide right when presented and left when removed. */
.reset {
opacity:0;
right:600;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
/* for the instructions at the bottom */
.bottom {
bottom:10;
position: absolute;
color:#454545;
font-family:Inconsolata;
}
Now that we’ve styled our app, we need to implement the true function of it. Let’s go ahead and do that.
To get the quotes, we need to call the Quotes API when the spacebar is pressed. Luckily, JQuery implements a window function just for that, known as keypress. To understand what to write, we have to go through what is happening in our site at that point. The current quote being displayed will be removed and we will request for a new one. When it returns from the API, we will display it.
http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=mycallback and we can use some pretty simple AJAX (a way to send post/get requests) to retrieve the quote from the API. more on AJAXVoila! May this be useful when you are lacking inspiration:
$(window).keypress(function(e) {
if (e.which === 32) {
$("#quote").addClass("reset");
$("#quote").removeClass("executed");
$("#writer").toggleClass("fade");
setTimeout(function(){
$.ajax({
crossOrigin: true,
url: "https://quotesondesign.com/wp-json/posts?filter[orderby]=
rand&filter[posts_per_page]=1&_jsonp=mycallback",
dataType:"jsonp"
});
}, 1000);
}
});
function mycallback(json){
var quote = json[0];
$("#quote").html(quote.content)
$("#writer").html(quote.title)
$("#quote").addClass("executed");
$("#quote").removeClass("reset");
$("#writer").toggleClass("fade");
}
Your API is super powerful! Try making the site responsive and changing up the style. Try making other apps using JSON APIs like a weather app!