My First JS Project (Part 2)!
After going over Figma basics, we’ll now jump into the code!
Choosing an API
The next part you need to figure out is what API to use. When choosing an API it’s always a good idea to look for one that doesn’t require an API key, this can make for a more cumbersome process. Also you will want to verify the source of the API and check out the data to see if it is sufficient for what you are planning to do with your app. For me, I wanted to get data on people around the globe. I knew exactly what data I wanted. Most people will know exactly the data they’re looking for because they are making the app around the API. In other words, I’m going to first choose an API with a data set that seems interesting to me then I will come up with what I want to do with that data.
My choice was an API called “random user”. Basically it generates user profiles from around the world. We need to take a look at the data and make sure it has the person’s name, city, country, and some sort of photo of the profile.
{"results": [{"gender": "male","name": {"title": "Mr","first": "Batur","last": "Ozansoy"},"location": {"street": {"number": 3955,"name": "Şehitler Cd"},"city": "Tunceli","state": "Gümüşhane","country": "Turkey","postcode": 24200,"coordinates": {"latitude": "70.6064","longitude": "-115.4353"},"timezone": {"offset": "-3:30","description": "Newfoundland"}},"email": "batur.ozansoy@example.com","login": {"uuid": "1a565c52-6ac8-429f-ba79-540d2a161531","username": "heavymeercat434","password": "pepito","salt": "AOUFkK7S","md5": "407b740c39564c336a0a7d164dce3e08","sha1": "31ea119be6cab9c17b2d38fd6409a18771ad35df","sha256": "6f4e389337da0f6c5f4ad586d654b790991112af81577ba9d3b87c12b79cb658"},"dob": {"date": "1961-05-28T00:13:02.013Z","age": 60},"registered": {"date": "2002-04-25T07:25:34.741Z","age": 19},"phone": "(161)-413-1100","cell": "(885)-850-9601","id": {"name": "","value": null},"picture": {"large": "https://randomuser.me/api/portraits/men/85.jpg","medium": "https://randomuser.me/api/portraits/med/men/85.jpg","thumbnail": "https://randomuser.me/api/portraits/thumb/men/85.jpg"},"nat": "TR"},As you can see it has the categories that we need in order to make my live user finder app.
What do I want my app to do?
We need to figure out what, from the users perspective, do I want to be able to do? So as a user I’d like to..
|Be able to search for a specific profile using their first and last name
|Be able to identify that person’s profile
|Be able to search for and filter through the results
Getting the HTML started
Now that we know what we want and have a basic idea for how the app should display on the page, we can begin writing out the HTML; I always like to pseudo code first..
From the drawing and our pseudo code you can begin to get a feel for how the app is going to look. It’s important to get these sections marked off as it makes it easier to distinguish each section.
The heading section will hold the h2 of “Live User Filter”. I also gave this header section a small tag which gives further detail of what my h2 is going to do “search by name and location”.
Next, I put the search container which houses the box where you search with the placeholder there as well. Then I have the main container of the webpage, the main section that is composed of the results the cards that come back from the search. The idea is to have at least 3 divisions in this section showing even if the user hasn’t searched for anything yet. It’s going to add structure to the page this way.
Next I put the extra information container. This will house all the paragraphs of lorem ipsums. My idea is just to make a section where if the user wants to read some more specific information on the website, they can click on a “show me more” button and it will open up all the details for them to read. And then below that I put the button for the extra information section which is just a simple <a> tag that says show more.
So far this is what our webpage looks like..
Setting up our JavaScript
We want to make sure we have a good idea for how to get the desired result. So we need to pseudo code for how to get there.
So first we need to get the data from the Random User API. To do this, I make an async function called getData.
I used the async and await instead of the .then promise chains. It makes for more readable and cleaner code. When I put the async keyword JavaScript will always return a promise here. I then make a variable called resp for the result of the fetch. Then I make another variable called results and I enclose this in curly brackets to make it so the results are destructured jsonified data.
const res = await fetch("https://randomuser.me/api?results=50")
const { results } = await res.json();This is a lot cleaner than the .then promise chains. What the await keyword does is first make this fetch, and this returns a promise. And the await keyword stalls JS, it stops it from assigning a value to the res variable until the promise has resolved. Once the promise has resolved, then we take the value from that result function, the response, and assign it to this res variable. So it’s a cleaner code than using the .then promise chains which would have looked something like this..
fetch("https://randomuser.me/api?results=50").then((response) => {
console.log('resolved', response);
return response.json();
)}.then(data => {
console.log(data);Next, we need to clear out our ul that houses the fetched data which we made into a variable called result. So we clear the result of the section by creating empty brackets as shown.
For step four, we take the results variable we created that carries the jsonified random user data. We loop through with a for each function. I console logged the ‘user’ parameter to make sure it was returning each user. This is a good practice to get in the habit of. The idea here is to get each user’s information created into a separate li tag which is why I created a variable li to carry a newly created li for each user that we loop through.
Next, we need to push our li’s that we loop through onto the listItems variable, the empty array, using the push method. Then we’ll need to make sure we’re familiar with how our API categorizes the names, locations, and photos we want displayed.
As you can see, the data we want for name, location, and picture are all in categories with a specific key name like name.first, picture.large. So that’s what we’re going to use. We take the ‘user’ argument and tack on these categories so that it will display that when we choose the user. We do this easily using string interpolation.
For step 7, we take the newly created li’s with their name, location, and picture and append each one to ‘result’ which is the ul that houses our results. We appendChild because we need to append not to the ul but to the children of the ul.
For step 8, we take our filter variable which is the search box to search for users. We do an event listener with the ‘input’ event. This will search if there’s a match between what is typed in and the list of li’s that we created, or the array of live user data. We’re using a separate function in the return of our callback in the event listener function, filterData. The e.target.value is taking the target of each event that fires back and then taking the value of that target which is the location and name and picture.
The filterData function is being used in the event listener function for the filtering of search results. The searchTerm parameter is whatever is typed into that search box. Again, it’s important to console log as you go through your code. You can console log the searchTerm and see what returns. The idea with this function is to check to see if each item in our listItems array is matching the user that we type in.
if (item.innerText.toLowerCase().includes(searchTerm.toLowerCase()))We want to make the item that we loop through in lower case, so that it’s not case sensitive, it puts everything on an even field because we also are adding the toLowerCase to the searchTerms. The .includes method is saying “if what we’re searching for includes(the user we type in), then return true”. In other words, if the item we loop through is jane alwahn, and the user using my app is beginning to type in “jan…” then the function is going to return that li, or user onto the page. In my code I have it returning item(the user profile) then I’m doing .classList.remove(“hide”). I made a class called hide in the css that causes the li to not be displayed. User-list is the results section that displays the results. So I’m removing the “hide” class when the code runs and the search terms matches up with the li in my listArray.
And with that, those are the main steps with how I built my first application using JavaScript!
