How to create your own Corona Virus Tracker using Javascript

Junaid Alam
2 min readJul 31, 2020

Corona Virus Tracker can be very useful to make your surrounding aware of the deadly virus by providing them with live affected statistics. Recently, I made a Corona Virus tracker using Javascript, just to learn more about how Js works and thought why not share the result and making of it. This is what we will make:

https://covid19trackerbd.netlify.app/

Website Structure HTML Markup:

Since we have made the basic structure for the website, we need to style it using CSS.

CSS Styling:

Great! We just finished with the basic website structure. Now we need to do the most important part to make this Tracker work, which is the Javascript coding. Before we move into the code, I want to explain how it works. So, it depends on an API that gives the tracker all the data we need, and the tracker fetches the information and displays it on the website. I have used the Novel COVID API, but you can use any API that provides COVID 19 related information.

Javascript Code:

Bonus (Dark Mode): I am a night owl, and it's obvious for me to have this huge attraction for dark modes, whether it's an app or a website, dark mode is a must, and I know many night owls can relate to me too. You can head over to the repository for the dark mode. I found that helpful for this project, but there are also many other repositories that you can use for dark mode.

Congratulations! You made your own Corona Virus Tracker.

Thanks for reading.

--

--