Hosted Project
JavaScript Random User API Project (Hosted on GitHub Pages)
Source Files
https://js-beginners.github.io/random-person-api-project/ (Hosted on Github)
Project Objective
The objective of this JavaScript AJAX project is to use the Random User Generator API to retrieve a random user, and then output user information in the DOM.
JavaScript Used
- JavaScript XMLHttpRequest Constructor
- JavaScript CSS Manipulation
- JavaScript DOM Manipulation
My Personalize Summary
Like yesterday's project, this JavaScript AJAX was pretty straight forward. Because it was so similar to yesterday's project, I watched John code this project out. I'm glad I did because I saw how he used functional programming to code his solution.
While the program could have easily been coded with an event listener that took one callback function as an parameter, John used three functions to separate individual concerns. Once function was used to get the data, one function was used to output the data to the DOM, and the last function, of course, was used as the callback to the event listener. I thought this was pretty clever.
New Things Learned or Refreshed
The cool thing about this project is the API that was introduced. Now, when I need to create a project with randomized user seed data, I know a cool API I can use.
Time to Code
This JavaScript project took about 30 minutes to code, not including the HTML and CSS.
Your Turn!
What To Accomplish
- Download the source code from the github repository above.
- Delete the contents of the
app.jsfile. - Implement the JavaScript code in your own
app.js file. - If you think you need to see a video solution first, be sure to pick up John Smilga's JavaScript Tutorial and Projects Course.
- Add a link to your finished project below!
What You Should See
Visit the hosted github page to see this JavaScript Random User API Project in action.
Coming from Python (and its super simple requests library), using JavaScript’s Fetch API seems far more intuitive than XMLHttpRequest. Using the Fetch API also allows for cleaner appearing code, at least in the eyes of this beholder! Check it out…
const button = document.querySelector(‘#btn’);
button.addEventListener(‘click’, () => generateUser());
const generateUser = () => {
fetch(‘https://randomuser.me/api/’)
.then(response => response.json())
.then(data => parseData(data));
}
const parseData = (data) => {
const result = data.results[0];
const src = result.picture.large;
const name = result.name.first;
const lastName = result.name.last;
const location = result.location.city + ‘, ‘ + result.location.country;
const phone = result.phone;
const email = result.email;
updateDOM(src, name, lastName, location, phone, email)
}
const updateDOM = (src, name, lastName, location, phone, email) => {
document.querySelector(‘#photo’).setAttribute(‘src’, src);
document.querySelector(‘#first’).textContent = name;
document.querySelector(‘#last’).textContent = lastName;
document.querySelector(‘#street’).textContent = location;
document.querySelector(‘#phone’).textContent = phone;
document.querySelector(‘#email’).textContent = email;
}