Indian State Details Search Web-app using Vanilla JS

Image for post
Image for post
Photo by XPS on Unsplash

Welcome to a cool new project in which, we will build a simple web app that searches a JSON file, containing Indian states details. It uses the Fetch API, Async/Await, Regex and high order array methods.

The json used in this project can be found from this link. Let’s start the project and create a folder Indian_States_Search and also created the required files.

Image for post
Image for post
Indian States

After opening the code in VS Code, i had also pasted the json data from this link.

Image for post
Image for post
JSON data

We are going to use a bootstrap theme in our project. So, head over to bootswatch.com and download the Cyborg theme. We will get a css file, content of which we need to copy in our styles.css file.

Image for post
Image for post
Cyborg

Now, create the basic html in the index.html. Also link the styles.css file and also include the font-awesome library.

We had also started our live server extension, so that our project starts on http://127.0.0.1:5500/index.html and get’s the hot reload feature.

Image for post
Image for post
Basic html

Next, we will first add the html code for displaying our header, using font-awesome icon. Notice that we are using all bootstrap classes.

Image for post
Image for post
Bootstrap classes

Next, we will add the code to show our input box and also a div with class of match-list, in which we are going to render the result.

Image for post
Image for post
match-list

Next, we will move to our main.js and write the logic. Here, we are first getting the ids search and match-list.

After that adding an even listener at Line 11, which will trigger the function searchStates, with the alphabet we entered in the input box.

In the searchStates we are using fetch to access the states.json. We can do it to get data from a remote api also. As, it returns a promise we are using async await.

When we type anything in the input box, we are getting all the 36 array.

Image for post
Image for post
main.js

Now, we will add the logic for filter based on the alphabet or words entered in the input box. Here, we are using regular expression to match all the words which starts with the searchText.

Now, when we console log the matches we will get only the filtered result.

Also, notice that we are checking for a special case in which we clear the search term from input box. Here, we are making the matches array as empty.

Image for post
Image for post
Matches

Next, this matches array will be passed to another function called outputHtml. Here, we are creating a div with help of bootstrap classes.

We also need to use a join() to change the array to a string.

Image for post
Image for post
join

Now, we can display the string by simply adding it to the innerHTML. We are also removing it when the user is clearing the input box.

innerHTML

This completes our small app. You can find the code for the same in my github repo here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store