I was looking for a simple to get data from an API. When I found this tutorial using JavaScript Fetch and the Random User API. You use Fetch to send a simple GET request to the Random User API and provides you with JSON data of 10 random people.
Photo by Shopify Partners from Burst
Why manually type in code?
In Learn Ruby: The Hard Way, Zed A. Shaw, explains that you must type in the exercises by hand. It helps you to learn how to read, write and see code. By using copy and paste, you don’t learn how the code works.
How do I used this tutorial
This site is simple. I started with a simple HTML site. Then, I made some adjustments after I got the GET request working.
1. Added style to the website
I started with a simple HTML website that didn’t have much style to it. First, I added CSS code to style the images. Then, I added a header and footer to the site. I decided to stick with a black and white color scheme.
2. Changed how the API displays the data
When I first created the site, the API returns the user’s name in all lower case letters. I wanted the name to follow the format of first letter upper case and the rest lowercase for both first and last name. I modified the JavaScript to capitalize the first letter.
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
The API returns the email address as text only. I wrote an additional function to change email to be an actually email link.
function createEmailAddress(string) {
return "<a href=mailto:" + string + ">" + string + "</>";
}
3. Changed the size of the photos
In the tutorial, the photos are on the small size. I wanted them to be bigger. To learn how to do that, I went to the Random User API documentation and read how to get bigger photos. It was a simple change.
See more about learning JSON by building a simple website.