![]() ![]() Math.floor rounds a number down to its nearest integer while Math.random returns a random number. We set the country parameter to random so that we get random countries. It was stored in an array of objects and if you expanded it, you would see some key pair values like this.Īs you can see, some of those keys have values that are arrays and objects, that also have nested objects and arrays. "Where did you get the name, capital, region, currencies ?" Remember that before we started, we first checked to see what the API data was like. We would have to list out each item we wanted to use for our app like that. We'll start by adding a click functionality to our button: We’ll need the name of the countries, the currencies, the region, the languages, and the population Setting up our app.js Now that we know what's inside that URL/API, let's pick the things we need for our application. Think of it as saying "After you do task A, then move to task B then to task C". When we request for the data from the URL/API, the data is sent in a JSON format (there are other formats like BSON) we then use the response.json() to change it into a regular JavaScript data type and then chain a promise that console.logs it. Yes, I understand that's a lot to take in, so let me break it down. The next line of the code chains a promise that first parses the information the URL/API sent us and we add one more promise that sends the information to the console.log. The URL/API responds to our fetch request by sending the information. We are going to be calling our API using the fetch API and then console logging the result to the terminal.Įnter fullscreen mode Exit fullscreen modeĬode explanation: The fetch API sends a request to the URL/API we provided asking for the information contained in it. "Hey, Sebastian, what do you mean by REST, SOAP, etc" for this question, I'll leave this here Explanation on the various API architectures. Some take a REST, SOAP, GraphQL architecture meaning that we might need a different approach when trying to use the API. Style it however you pleaseīefore we can call and use our API, we need to know what it looks like. We are simply going to have a button, internal CSS style, and an empty div with an id of "template" where our app info will appear. Our HTML page isn't going to have much since the majority of the work will be done in the DOM. I've called mine "API for beginners" once that's done you can open the folder in your IDE (doesn't matter which one). I like to keep my projects organized so start by creating a folder on your desktop. I'll leave a resource below that explains in depth what it is but simply put, an API (Application Programming Interface) is a set of rules that allow programs to communicate with each other. I selected those three as they are the three popular ones around. If you don't find your IDE on the list, try searching it up on YouTube. I'll try to give some basic explanations to them in this post but I urge you to read up on them.Ģ) Live Server (Don't worry I went around and found some good short videos about installing a Live server for those who don't know how to or who don't have it.) click on your IDE name and it should take you to a video on YouTube that'll teach you how to set up your live server for that IDE. Feel free to go through them first or just read the post and check them out later. If you are new to coding, there are some concepts you'll see in this post that might not make sense immediately but I'll be leaving links to resources to help you understand them. In this post, I will be showing you exactly how this knowledge helps you create apps by building a simple app that gives random information about different countries using the The Country API. If you are new to web development or coding in general, understanding your data structure is key to creating applications. In my last post, I talked about the importance of knowing how your data is stored/presented. Credit: The background Images I use are gotten from Storyset ![]()
0 Comments
Leave a Reply. |