The more I study, the more insatiable do I feel my genius for it to be.
Today we are going to make an autocomplete application that displays the capital and country code of different countries around the world. To do this, we are going to be making use of a
json file that contains all the data that we need.
Here is a working example of our project
So, there will be no external api, just an updated
json file I created containing what I believe to be all the countries in the world.
If you find out perhaps, that your country isn't included, feel free to make a
pull request as I'll be putting the link to the github repo at the end of the tutorial.
Basic knowledge of Html.
Basic knowledge of css.
Basic knowledge of JSON
We are going to need just three steps to complete this application.
In this step, we will create the design of the application. We will be making use of Materialize css. It is a modern responsive front-end framework based on material Design.
We will also be making use of Material icon.
All you need to do is create an
index.html file and a
index.html file, we can see that the
CDN for both Materialize css and material icon can be found in the head tag. This enables us to be able to use their classes in our html.
All we did in the css was to centralise the entire body of our input form. With that, if we save and load our file in the browser we should have something like this below:
Here we create the data we are going to interact with in
JSONis a lightweight data-interchange format. It is easy for humans to read and write.
Create a folder called data, inside this folder create a file called
countries.json. This is were our data will be stored in
You can find the entire country data in
json format from this Link
Like I said earlier, if you can't find your country or a country you know on the list, feel free to make a pull request.
We will make use of the
fetch api to get data from the
json file in the application using
From The above code, after getting the countries from the
json file, we used an high order array function called
filter() to filter through the entire array of countries in our data.
We then created a regular expression that returns an array that fits the data entered in the input field. With this, you can only search for a country by either it's
There are various ways we can display our data in html. We could make use of a
for loop, the
jQuery.each() function or we could use an high order array called
.map() makes us simplify our code, so that's what we will be using. The
.map() basically takes in two arguments. A
callback and an
In our case, we will be returning an array of
html. Our array of html strings contains classes of materialize css for additional styling. We then call the
.join() method to join all the html elements together into a string.
Finally for our app to work, we get the
id's of our html elements, set them as
html and also add an
EventListener to get the values entered in the input field.
With this our simple application is complete and we can search for any country around the globe, alongside their capital and country code.
The link to the entire code can be found here
To get more free content on web development, subscribe to my newsletter: