How to build a design quote web app
You have heard about APIs (Application Programming Interfaces) and know some HTML, CSS and JavaScript, but you still aren’t sure how to get data from an API endpoint to appear on your webpage. If that sounds familiar, this post is for you.
I am going to walk you through building a design quote web app using the Quotes on Design API curated by Chris Coyier. This is a good API to start with because it follows RESTful protocol and doesn’t require configuring a key or promise to send or receive data. Lets get started!
First, structure the body of your HTML page.
Example code is below. Don’t forget to select and add the jQuery CDN that will give you access to jQuery library methods including ajax.
<body > <!-- This path may be different depending on the name and location of your css file. -->
<link rel="stylesheet" href="quotes.css"><!-- Pick a jQuery CDN from https://code.jquery.com/ and replace the script tag below with it. I recommend minified. Slim doesn't include ajax methods.
ADD YOUR JQUERY CDN LINK WITH SCRIPT TAGS HERE--> <!-- Adding a Google font is optional, but a nice touch. -->
<link href="https://fonts.googleapis.com/css?family=Merriweather|Open+Sans" rel="stylesheet">
<div id="box">
<p id="quote-content"></p>
<p id="person"></p>
<div id="source"></div>
</div>
<div id="get-a-quote">click for a quote</div> <!-- This path may be different depending on the name and location of your js file -->
<script type="text/javascript" src="main.js"></script></body>
Second, make an AJAX call to the Design Quote API
Making a call to the API returns a data object that includes the quote (referenced in the code below by post.content), name (referenced by post.title) and source (referenced by post.custom_meta.Source). The data is added to the app by using jQuery id selectors and methods.
To make the AJAX call I used a modified version of the example code provided in the API docs and added it to the quote app’s main.js file. Always remember, reading through API documentation will make life easier!
//send a quote request when the btn is clicked
$('#get-a-quote').on('click', function(e) {
e.preventDefault();
$.ajax( {
url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
success: function(data) {
// Get the first post from the array of posts.
var post = data.shift();
$('#person').text(post.title);
$('#quote-content').html(post.content);// If the Source is available, use it. Otherwise hide it.
if (typeof post.custom_meta !== 'undefined' && typeof post.custom_meta.Source !== 'undefined') {
$('#source').html('Source:' + post.custom_meta.Source);
} else {
$('#quote-source').text('');
}
},
cache: false
});
});
Third, test to make sure the app is functional.
At this point, start a local server or upload the files to a dev site and give it a try. After you click on the ‘click for a quote’ button, a quote, name and, source, if there is one, should appear on the page.
Fourth, time to add style with CSS
In quotes.css, I added the following:
#box {
position: relative;
font-family: 'Lato', sans-serif;
background-color: rgb(255, 255, 255);
width:60%;
margin:10% auto 5%;
padding:36px;
color: #333;
text-align: center;
}#quote-content {
max-width: 100%;
font-size: 2em;
font-family: 'Merriweather', serif;
line-height: 1.3em;
}#person {
max-width: 100%;
font-size: 1.2em;
}#source {
max-width: 100%;
font-size: 1em;
}#get-a-quote {
text-align: center;
padding: 15px;
font-size: 1.2em;
width:150px;
margin:40px auto;
font-family: 'Lato', sans-serif;
background-color: rgba(255, 255, 255, .4);
border-radius: 5px;
border: 1px #999 solid;
cursor: pointer;
}#get-a-quote:hover {
background-color: rgba(255, 255, 255, .7);
}#get-a-quote:active {
background-color: rgba(255, 255, 255, 1);
}a {
color:rgb(1, 162, 176);
}/* This is a media query. Enclosed styles will only be added to screens smaller than 768px */
@media only screen and (max-width: 768px) {
#quote-content {
font-size: 1.6em;
}
#get-a-quote {
padding: 30px;
font-size: 1.5em;
width:75%;
}
#box {
width:75%;
padding-top:15px;
margin:7% auto 5%;
}
}
In main.js, I also added a random background color generator so that when the element with the id ‘get-a-quote’ is clicked, it will also run the colorSurprise function changing the background to a random color. Additions to the file are bolded below.
$('#get-a-quote').on('click', function(e) {
$.ajax( {
url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
success: function(data) {
var post = data.shift();
$('#person').text(post.title);
$('#quote-content').html(post.content); //when the the element with the id 'get-a-quote is clicked on, it will run the function below and change the background color to a random color
$('body').css('background-color', `${colorSurprise()}`); if (typeof post.custom_meta !== 'undefined' && typeof post.custom_meta.Source !== 'undefined') {
$('#source').html('source: ' + post.custom_meta.Source);
} else {
$('#quote-source').text('');
}
},
cache: false
});
});// the random color function called above
function colorSurprise(){
// an inner helper function to select a random color
function randomizer(){
return Math.floor(Math.random() * 200); // I limited the color range to avoid colors close to white
}
return `rgb(${randomizer()}, ${randomizer()}, ${randomizer()})`
}
That wraps it up!
If you know of a great quote that should be added, you can add it here, https://quotesondesign.com/submit/!
