REST Countries API

hey what's up guys today we'll use an API called rest countries in order to get and then present data about countries for these purpose we'll use HTML CSS and JavaScript let's go so this what we are going to create today what's happening here behind the scenes is that just as soon as the page loads we are making a quest to the rest countries API the API returns the requested data and once you have the data we can present it any way we want in this case we'll show the flag ecovida dialing code population etc also note that a list with all the available options is dynamically populated obviously in this case the options are the countries provided by the rest countries API and that's about it let's start coding we will first create our working folder we will name it a rest country's API we'll open our text data I'm using Visual Studio code which i think is awesome however we will obviously use a UFA Wojtek satyr let's now get to our working folder and create index dot HTML 5 Visual Studio code comes with a plug-in called Emmet embedded Emma this plugin which allows for high speed coding and editing if your text editor not does not already have a mat you can easily add it so now for example instead of having to type some boilerplate code for HTML 5 we can simply type exclamation mark hit tab or enter and here it is have some boilerplate to begin with however this time we'll start with a clean sheet and start tabbing from zero we have duct tape HTML this is not an HTML tag but it is instruction to the browser to treat the page as an html5 document we have the HTML tag which tells the browser that this is an HTML document and it is the container for all other HTML elements we have the head which contains the the metadata of the document and the body which contains the contents of the document very nice let's hit ctrl s to save and let's check what we've created so far let's open the index.html file and as expected it is still empty since we haven't added an any content yet by the way is it really empty if we right-click and go to that page source code we can see that it contains the mark-up saved up to this point okay now let's put our page and and the code side-by-side you okay I did this and we can't continue with adding the content but let me first remove this minor destruction okay so we will have the title I type title it says M and abbreviation hit enter or tab and add the title arrests country's API save and we expect the title to appear on the browser stop hitter fresh there it is we continue now with our content will we'll add a header on each one header h1 it is and we'll add our main container by the way HTML is case-insensitive so we could also use capital case letters for the for the HTML tags but it's it's like a convention it's considered to be good practice to always use lowercase letters so we have to give main container the main container would contain two sub containers one for the flag and war for the remaining info let's add the add flag container using Emmet we can type diff black container and in the special case of div using Emmet we don't even have to type the div we only have to type the ID and div is assumed now let's also add the the other container the info container you a flag container will only contain an image image tag with the image of the flag we live the source and the alt attribute empty for now they will be filled later with JavaScript as soon as we acquire the data the info container will contain first of all tip drop-down list we can have a drop down list using the Select tag with an idea of countries you the options of the drop-down list are called options again the options will be populated dynamically with via JavaScript as soon as we have the data we can't however add some dummy data some dummy options for now we can say option let's say we want three options and use these with Amit yeah they are okay let's see what we have so far here we are okay up to this point each time we saved a change to our document we had to refresh the page in order to get the new state of the document visual studio code makes it very simple to analyze server which automatically reloads each time we save a change all we have to do is click the go-live icon here in the bottom at the bottom and that's all we have to do now we don't need this tub anymore so now the live server is listening or changes and automatically reloads each time we save a change back to HTML we will need a few more pieces of information first of all we will need the capital of the country and we will use a span with ID capital as a as a container for the dynamically acquired information next we'll insert that dialing code country using omit we can say we can write it like this P with a span as a child with ID dialing coat okay and we need four more pieces of information we can say P times or would span the child and with ID will will not define the ID yet okay the next one is population and by the way notice that if I save now I don't have to refresh it's automatically it automatically reload and we can see now the current state of the document so the idea here is population next currencies you hurry John you and sub preacher you you very nice I think we are done with the HTML we can proceed to CSS for styling the page for this purpose we will add a new I will name it style dot CSS and note that all files will be included in the same folder and for testing purposes let's add a background color to the body background color right we save we observed that the background color is not red that's because we haven't linked the external CSS file to the document yet let's do this right now link and since our style dot CSS is in the same folder if the the style file was not in the same folder we would have to somehow navigate to the file using the appropriate path now we save and the background is red so now we've correctly linked our style sheet to the document going back to the stat sheet we can remove this beautiful red background color and since the main focus of this tutorial is not on CSS but rather on functionality let me just paste the CSS code and we'll quickly go through it you can however find in the description a link to the whole project we save to apply the styling here we are now let's quickly go through the CSS the asterisk selector selects all elements so any styling contained in styling rule contained in here will be applied to all elements in our case we just want to reset the box sizing property from the default which is content box to border box we'll continue with the body nothing special here then we stay the h1 header please note that this way we stay all h1 header of our document in our case we only have one h1 header so this okay but in general we should be more specific with our selectors unless of course we wanted to reset the default behavior of oil h1 elements or any other element next comes the main container nothing special here we just set the width margin and padding and by the way let's check it out from the dev tools we can either hit f12 or right click and choose inspect this is the main container which has the flat container and the info container as children that's why we don't have to set the width of the flag container or the info container because since they are developments and therefore block elements they inherit the width from their parent element for the flag container was at the height the background color and the border the reason we set the height to 52 and the width I will too is in order to achieve a an aspect ratio for the image flag of two to one so having a width of 502 height to 52 and border one pixel we end up with an image of 500 pixels width and 250 height this calculation has to do with the box sizing box sizing we previously mentioned next we said the width and height of the image which is contained inside the flag container note that browsers technically use display inline for the images so technically images are inline elements and that and as such we shouldn't be able to give them without or hide however they are given special treatment and they follow all traits of an inline block so we can set width and height to an image but in our project we don't want the image to be inline anyway so in order to avoid any confusion let's just set display block or the image and let's check it out during the dev tools fly container image height is next comes the select drop-down list again nothing special here display:block marching padding I mean with 100% we wanted to take all the available with color font size and this is a quick fix I found from Stack Overflow in order to Center the selected option if we didn't have this it would be aligned to to the left just a matter of taste next we study the paragraphs of the info container and the span of the paragraphs it's empty for now but nothing special here just playing with padding and font weight and finally we add some very very basic responsiveness in this case if the width of the of the screen or viewport should I say to be more precise is equal or less than 768 pixels then these styling rules apply otherwise they do not apply now what do these will say well basic basically will just decrease the font size and also decrease the width and height of the containers so if we we decrease the viewport width we can see the new rules come into effect you and that concludes the CSS part let's continue with adding the functionality with with JavaScript we will first create the JavaScript file let's name it Maine dot J yes there we are and for testing purposes let's just alert something you it's not working yet we can't see violet and that's because we don't point to the external javascript file yet let's do this right here at the bottom of our page just above the body closing tag you you that's because we are in the same folder remember everything is in the same folder so now if we save here it is so up to this point we've correctly we are correctly pointing to the external javascript file so we are good to go at first let's just take a moment to explore the rest country's API is it okay arrest countries get information about countries via RESTful API this isn't documentation of the API it's almost as simple as it gets the end points this is the end point to get the data for all countries and actually this is the one we are going to use in our project let's see what this end point ends okay and by the way if your data looks like like this like the road data it's because you have an installed Chrome extension called JSON format which basically just formats data in order to make it easier for us to to read the data so what this endpoint returns is an array of objects each object representing one country actually the information of each country it's alphabetical order the first country Afghanistan so we have the name top-level domain alpha-2 code alpha-3 code the two later and the three-letter code of the country calling codes capital some other info regions of region relation latitude longitude etc borders supporting countries currencies again currencies are an array of objects each object described in describing the currency languages again an array of object flag so we have a URL for the flag of each country there it is let's know okay anyway so let's see the dimensions of the flag its 600 width and 400 height so it's it's three to two that the aspect ratio as you recall we used to to an aspect ratio for the flag images so this specific image might look a bit distorted unfortunately this API does not provide flag images with consistent aspect ratio that's okay for for this example project obviously in a real life project we would be more thorough okay and that's all we need to know for our project one could also search by country name a country full name by code to letter or three-letter code for example that it is called Columbia we could also type Co and we would still get along BIA for example with fi you get France and you get France with fr a as well okay list of codes you can't get by currency and get all the old countries which use this currency by language I capital city let's in this example okay so you were artists we get again France by coiling quote by a region o4 for example now we'll get all European countries let's look randomly Belarus Belgium area it's it and that's all here's an exponent example we fall we've already been through an example but again basically we will only use this one we'll make a single request to the API to get all the data the data for all countries will store the data in a global variable and that's all we will not make any further requests to the API so it's coding time just as soon as the document is ready we want to retrieve data from diverse countries API and displayed we don't have to ensure that the document is ready because we know it is since we've placed the script tag at the end of our document just above the closing body tag so we know that up to this point the Tom the Dom content was loaded in order to retrieve the data from the rest country's API we won't use any JavaScript libraries such as jQuery with its Ajax method or Axios but instead we we will use a different API which is natively supported by most browsers and let's see the browser support for the fetch API fetch is a model and replacement for XML HTTP requests there is a support it's pretty good it covers almost 90% global usage nothing is perfect but in this imperfect world we should always try to make the optimal decision optimal according to our judgment of course if for example we expected the target audience for our application to be using Internet Explorer in a significant percentage then we should make sure that our application works fine with IE as well in order to get or fetch should I say data from various countries API will use the fetch method this is a global method provided by the fetch API and which allows us to asynchronously fetch resources the the fetch method takes one mandatory argument and that is the path to the resource we want to fetch let me add a path the URL it's a URL to the country supply to get the data for all countries fetch returns a promise which is a way to handle asynchronous operations without the need for a callback in order to do something after the resource is fetched we should use a then call you let's console look the response okay let's check it out in the dev tools this is the response that means is domine so we can see that the request was successful we have okay is true status 200 but we can't see the date anywhere so the this HTTP response does not contain the actual data yet it turns out that the requested data is hidden in the body as a readable stream so we need to call an appropriate method in order to convert this readable stream in today that we can consume since we get data in JSON format from the rest country's API we can use the response JSON method to convert the data so if we look the response to JSON and by the way there are other methods to deal with different types of response if for example we are requesting a text file then we should call the response dot text function or if way if we were requesting an image we should use the response dot block in our case we will use the dot JSON okay so we can see that these returns a promise but less let's explore a bit more okay we can see some data here and here we are we are almost there but what we want is the actual data without the promised promised as promised value so in order to achieve that first of all we don't just want to console.log this but we want to return it J son okay it's comment is out and remember this returns another promise so we can get the data we wanted with another with yet another tooth then call this is the actual data now let's console.log the data you and here we are so that's all we need to do to get data with fetch the word asynchronous was mentioned a couple of times and just to make sure we are on the same page let's quickly define a synchronicity in the JavaScript context so just with a quick or a quick Google search will get a code encode definition asynchronous actions are actions executed in a non-blocking shim allowing the main program flow to continue processing with Ajax web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page and let's quickly demonstrate this with an example so here in the first line we console.log the number one and here we console.log number two and by the way something is wrong here this should be above the return statement if it was below the return it wouldn't be executed and we want ya the number three let's comment this out and finally let's console.log number four if we save we can see here that first it looks number one then it looks number four and then goes to 23 and that's exactly due to the asynchronous nature of the fetch function so what happens here is the program executes the first line of code continues to the second one requests the data and in the meantime while waiting for the response it continues processing so it's not blocking the main flow of the program and just as soon as the response is available it returns to execute the code over here and that closes the parentheses about asynchronous methods so let's move on you one thing we haven't mentioned regarding the fetch method is the error handling for this purpose let me intentionally create an error by requesting an invalid URL an invalid end point and let's console.log the response we can see there was an error let's explore explore the response object we have okay is false instead of true status is 404 if you recall it was 200 in the case of successful the response and we can see that the chain is broken here it does not even proceed to to the next thing so in order to catch the error and handle it we will use the catch method and we want to alert the error to the user just let the user know that there was an error you you and here it is nothing fancy but let's the user know that there was something wrong however in our project we will simply lock the error it is and by the way when using console.log we can simply use a comma to concatenate the string with the error variable okay in average error handling so up to this point we have the data what do we want to do next is initialize the page in other words we want to populate the select options list with the actual data not these dummy values and we also want to display the information of the country let's say the first country of the list there for starters so we could write the code here or we could just call a function ending and include the code inside that function we'll do the latter that they named their function initialize and passing the data as an argument let's implement the initialized function here which takes an argument we could name the argument data but to be a bit more accurate let's name it country's data and just to make sure everything works fine let's console.log country's data at first let's clear the console and let's comment this out in order to avoid any confusion you okay so we are good to go at first let's take a step back and rewrite the fetch method replacing the anonymous functions here with arrow functions just in order to make the syntax a bit more concise so if we comment this out and save we can see the console is now empty let's copy-paste the first line then here comes the arrow function we we don't use the fudge function keyword we only write the parameters in our case we only have the response and comes the arrow what is that it is equal sign yeah so we also call these functions fat arrow functions it's not a simple arrow and then comes the blog body in our case this is the blog body and this is a valid Arabic arrow function however since there is only one single parameter here the parentheses would be omitted moreover since there is only one single expression inside the blog body the blog body could be transformed into a concise body and in a concise body the return statement should be omitted since the single expression here becomes the explicit return value so now we'll work in similar manner for the remaining functions and date you and if we save again we get the data and we can finally proceed with implementing they initialize function as a first step we'll assign the data to a global variable in order to be able to access it beyond this the local scope of this function so let's define a global variable here instead of the VAR keyword we'll be using the lead and the Const keyword okay so this global variable will have a global scope and therefore all scripts and functions of our of our webpage will be able to access it and eight will contain and fetch the data you so country's equals country's data right now we can access data from everywhere so it will console lock countries here you should be able to see the data however we get undefined and that's because if you recall this action is asynchronous so at the time this line of code is executed the data is not ready yet and therefore this action never happened what if we added some delay before executing this command in order to give time for the fetch request to be completed and the data to become available well let's said I'm out let's say 500 milliseconds you let's see what happens if we save okay so now we get the data very nice and just out of curiosity curiosity let's see what happens we will set that time out to 200 okay it's undefined so it takes longer than 200 milliseconds for this action to be completed a it's somewhere between 200 and 500 but anyways I'm just playing here let's continue we now want to populate the Select list with options the options string will be the inner HTML of the select element and therefore will eventually contain all available options for this purpose we'll look through each country and add the corresponding option let's use the good ol for loop you we'll use template literals which were introduced in es6 template literals are basically string literals allowing for betted expressions they are enclosed by the backtick character instead of double or single quotes you can most probably find the backtick character at the left of number one on your keyboard but let's quickly go through an example to make sure we understand the usage of template literals suppose we wanted to lock the capital of the first country in the list if we didn't use template literals then we would have to concatenate strings and expressions using the plus operator so we we would do it like this capita of plus countries zero because we want the first country good name recall that the property name for the country name his name or the capital its capital so Plus is as countries zero --kavitha okay if we save we can see capital of Afghanistan is Campbell okay now using template literals tactics happy dog Oh and now in order to embed a template literal we use dollar sign and curly braces and in here goes the expression you you so copy that off we said the country is and again but ah you we save and we get the same result this time using template literals and by the way here we could obviously use single quotes instead of double quote and still get the same results it's just a matter of personal preference however I would urge you to be consistent with the use of whatever you choose okay now let's continue with the main flow of our project so for each country we want to add an option let's go paste this line and we want to replace the hard-coded values with data values now as a value here we would like a unique value for each country this could either be the alpha 2 code the alpha-3 code or even the name of the country we will go by the Alpha 3 code a Conti yeah countries I remember what we are inside they loop now on okay and now this value will be the displayed value and it will be the name of the country let's color paste and that's all now just nice to make some more space let's hide this Explorer here and now let's add the options to the select list by setting the innerhtml of the list to options so in order to access the Select list document dot get element by ID was idea of the select list its countries by the way we don't need these guys anymore and if we save now the list is empty so the idea here is countries thought in HTML and this is now options we save and here it is now the list is populated with the names of the countries and if we dig a little bit deeper let's see now we expect that each option has the alpha-3 code as a value there is a list so we can see the Alpha 3 code for each country okay alternatively we could access the select list element by using the query selector method let's demonstrate this over here so now you will save the list is empty you so the query selector method takes a valid CSS selector as an argument and returns the first element within the document that matches the specified selector so once we access the element again we want to change the inner HTML two options save and again we have the list of the countries but eventually we'll assign the element to a variable in order to avoid typing this part or this part each time we want to access the element so let's comment this out save again we have an empty list and in global variables let's create a variable this time it's a constant variable and name it countries list and assign the element object we'd save and now here countries and trees list but in HTML equals options save and again we get the list with the countries now what if we wanted for example to add the dialling code next to each country making the list a dialing code list well that's very simple let me copy and paste this line and at this point here we want to add the dialling code and let's see what's the property name for the day island code yeah yeah it is it's calling code notice that it is an array I suppose maybe because in some countries there are more than one calling codes however we will always be using the first value of the array so it's calling codes you okay let's save and here we are now we will have a list with the countries and the dialing code next to each country so we'll have a dialing code list okay however in this project we'll just use a simple list with the countries and so let's comment this one out that's uncomment this one save' and everything looks the way it was supposed to and one last thing I would like to throw in the table before proceeding is the for each method the for each method executes a provided function once for each array element so we'll use a forage method in replacement for the for loop here so let's comb this out save once again the list becomes empty so now we have countries for each so for each element of the country's array the following function will be executed hello takes the element as an argument it's for each element but better let's name this country since each element represents a country in the country's array and let's just copy paste this line of code and instead of of countries I should just just say country you and that's all I think let's save and once again the list is populated with the names of the countries okay let's continue after assigning the data to the country's global variable and populating the Select list with options we want to display the information of the selected country or the selected option this functionality will be provided by a function and let's name that function display country info the reason we chose to include this functionality in a separate function is in order to avoid coder perdition and therefore keep the code as dry as possible since this function will be called each time a new country's election is made the display country info function takes the value of the option which is the say letter country code as an argument on initialization the selected country by default will be the first country of the list and that is Afghanistan which has a FG as a three-letter code and we can confirm that by navigating to the specific element that is a FG at the moment we'll hard-code the three-letter code but we'll return to that just as soon as we explore a bit more the country's least element object okay let's create the display country for function and let's name the parameter country by alpha-3 code and as a first step we want to stow the data for the specific country in a variable its name the variable country data you and we'll use the find method which retains the value of the first element in the array that satisfies the provided testing function otherwise undefined is returned so we want the country which satisfies the following called condition we want the country which has alpha-3 code yeah it is equal to the provided argument you let's console.log come to agent here it is so we get the data for Afghanistan if here for example we had the three-letter code for France which is fr a we would get the data for France very nice we can now proceed to filling the information fields and this should look familiar the idea of the copy that filled capita you and the property name for the capital is Kavita and if we save we can see the corresponding capital displayed next comes the dialling code scottie paste this part you the ID for the dialing code field is dialing code you and property name for the dialing code is calling codes and will present the first element of the list save there it is and if we want the plus sign to be presented before the B number we can use template literals you save there it is and now the population field again let's copy-paste this part the population field as ID population you the property name for population is population let's say and here it is now if we want to separate thousands with commas we can use their a two local string method which returns a string representation of the number but just not to be sure that it works as intended then we should add this argument we won't expand on the two local string methods here make sure to read the documentation before using it the currency's field comes next again let's copy-paste this part the idea of the currency's field is currencies the name field for currencies is currencies and notice that currencies is an array of objects each object representing representing a currency and what we want to do here is look through each object in the array and print as a string the name of the currency and the code of the currency for this purpose we'll use the map method which creates a new array with the results of calling her providing a provided function on every element in the calling array so for for each currency we want a string but we'll use template literals for this purpose we want the name of the currency you and in parentheses the code of the currency now if we save we get the currency name followed by the currency code but what if we had a country with more than one currencies for example what we had Cambodia which is such a country Cambodia has a three-letter code of K H M save and here we consider currencies of Cambodia note that the result of this action is an array and therefore we could use the join method to join all elements of the array into a string so suppose we want to join the elements using a triple - let's save and this is the result however what do we want to do is join them with with a comma and a space that is much better now one last thing I've noticed is that for this bad boy zette w/e I think is that realtor code we get this weird value for the for the last currency and is actually due to a data error who the BOA is the last country in the list these are the currencies and the last currency is basically it's empty we could of course ignore this minor typo however if we wanted to be perfectionists we could make use of the filter method the filter method creates a new array with all elements that has a specified condition so in our case we would change the filter method right before the map method so this condition would always be true unless falsey and it would be false II only if it returned false zero an empty string null undefined or na n not a number so up to up to this point we will have an array with all the valid currencies and from this point on the map method and the join method will work as previously described so if we save again we get the currencies at this time without their invalid entries okay let's continue with our main example the region and sub-region remain these two are trivial so let's call paste with line you the idea of the region field is region and for this up region it's a pleasure you and the probability fields are named again a region and sub region you save and we can see that all the text information is now displayed the flag image remains let's add it right now what's the idea of the image tag we noticed that we haven't added an ID for the image we couldn't add an ID or alternatively we could use the query selector we have the deep with ID black container which contains the image so instead of get element by ID we could use query selector and the selector would be like container image and we want to change the source attribute to let's see the property name field for the flacc URL so it is its flag and let's set the alt attribute which provides alternative text if the image cannot be displayed and let's set the at attribute - let's use template literals lock off and country you okay let's save much better so now the display country info function takes the three letter country code as an argument and returns the corresponding information let's just move this part over here just just to keep the same order as the displayed one let's save everything seems to be working fine and we are getting closer as a final step we want to display the new country info each time a new country is selected from the countries list in other words the final step is to add an event listener which will listen for changes in the countries list and will it will display the new country info each time a change occurs let's add the event listener over here the target of the eventlistener is the list the countries list you the table of the event is change so each time there is a change in the selected value of the list the following anonymous function will be triggered you let's quickly explore what these event argument is all about so now we notice that each time we'll choose a different country the this anonymous function is triggered and the event object is displayed we can see that the event object object has many properties / methods but in our case who are interested in the target property which returns the element that triggered the event so if here we say event dot target we expect to get the country's list element select what is that each time you select different country this function is figured and each time we get the Select element now in order to get the value of the currently selected option in the Select list we should use event to target dot value Save and we notice now that each time we select a new country the value of the option which is the three letter country code is locked all that remains now is called the display country info function each time a new option is selected passing the newly selected options value as an argument now if we save we can see that each time there is a change in the current value of countries list this function is triggered and the information of the newly selected country is displayed we could of course use an arrow function here instead and let's show how we would do it you Oh now if we save again we get the same result and alternatively we could also name the listener function it's demo state check here so here we have the name of the function let's name it country let's implement the function here you save and once more we get the same result and that's all basically so as soon as a page loads we request the data and as soon as the data becomes available we display the data of the first country in the list and from that point on we can select any other country and the the corresponding information will be displayed by the way we don't need we don't need this information to be locked in the console anymore let's remove this part now one last modification would be to display the formation of a random country on page load instead of the first country in the list let's do this right now in the initialize function after the countries list element is populated we will replace the default option selection which is always the first option in the list with a randomly selected option and eventually we will pass the value of this option as an argument to the display country info fudge function whole code let's first explore the countries list element hit save and this should look familiar it is the country's least element with its options now let's use the value method and we've also been through this one it it returns the value of the currently selected option which is by default the first option in the list next let's use let's use the length property which attends the length of the country's list it returns to 50 so we know that the Select list has 250 options next comes the selected index property which sets or returns the index of the selected option in a drop-down list so it will hit save as expected we get zero since by default the first option selected indexing is zero based and therefore the first option has index zero the last option of the list should have index 249 since we have 250 options in total now what if we wanted to access a specific option of the countries list well we could easily do that simply by declaring the index of the option we want to access so if we want to access the first option of the list this would have index 0 and here it is we get the first option of the list if we wanted to access the last list option which is the back way recall that in total we'll have 250 options so the index for the last element would be 214 9 save and we accessed the last option of the list what if we entered an indexed which does not exist for example 250 in this case we would get undefined since no option with index 250 exists ok let's continue our example with the option with index let's say 10 and what would that option B we have 0 1 2 3 4 5 6 7 8 9 10 so should be Argentina we save indeed we get Argentina again we can get the value of the option using the value property save that is we'll get the value and we can also get the text between the opening and closing option tag using the text property dot text save there it is and now we can use some of the previously mentioned properties in order to get the value of the currently selected option replacing the hard-coded value over here let's quickly do this countries list the index would be an trees list dot selected index dot value save again everything works as expected so what remains now is set the selected index to a random integer between 0 & 249 let's first comment this out you and countries list dot selected index equals notice that this time we set the index of the of the selected option we don't just return it but we said it we assign a new value to it equals r dot Rondo this function returns a random number between zero inclusive and one exclusive so if we say math dot random times a country's list dot length we get a random number between zero inclusive and country's list dot length in our case 250 X exclusive and we want to use this part as an argument for the math dot law function which returns the value of the argument rounded down to its nearest integer so now this part returns an integer between zero and can countries list dot length minus one in our case a random integer between 0 and 249 and that's all so now if we save to observe that each time we refresh the page the displayed country is randomly selected we can still of course select any option we like we can also navigate using the arrow keys and that concludes this tutorial we won't expand any further obviously once you have the data there are tons of things you could do for example you could create a quiz and for a given flag have the user name the country or for a given country have the user name de calidad or vice versa given the capital have the user name the country or given the country have the user name the region or sub region if you want increase the level of difficulty what else you could even create multiplayer games and for a given country have the users estimate the population of the country and the user whose estimation is closer to the actual number is a winner a platitude and long at you and I guess this point is approximately the center of the country so for a given country you could have a world map and have the users click on a point on the map and the user who clicks closer to the center of the country is the winner what else we have Porter's so you could for example create interesting diagrams presenting neighboring countries in short what I want to say is that once you have the data available and the technical skills you can use your imagination to create beautiful engaging and useful applications thanks for watching feel free to comment like or dislike subscribe or unsubscribe that is if you are already subscribed take care bye

Channel: Coding Journey

Views: 17,063

Rating: 4.9338841 out of 5

Keywords: REST Countries, API, HTML, CSS, JavaScript, Fetch API, Web Development, Front-end, Countries API, Countries, AJAX

Id: THZyM2z8s-o

Length: 91min 43sec (5503 seconds)

Published: Wed Jul 11 2018