Sitemap

My JavaScript Project

2 min readJun 7, 2021

--

COVID-19 Live Tracker

So as I’ve mentioned in my first blog post, I am currently a nurse going through a career change. I thought I would create a project that was relevant, so I created my own COVID-19 Live Tracker!

The project requirements was to create a Single Page Application using JavaScript, HTML & CSS using data that was fetched from a public API. I used a public API that had COVID statistics per country updating every hour, therefore calling it “live” tracker.

Press enter or click to view image in full size
My COVID tracker displaying a dropdown menu to filter through countries. By selecting each country, their COVID statistics appears below the dropdown menu in a list. A COVID-19 virus image on the right side of the page.
The top half of my application

I had SUCH a hard time just getting this first half to function correctly. Maybe because it was my 1st project, but…. JS…. is NOT easy! If anyone says it is, please tutor me. Maybe I’m missing something. But, after DAYS of coding, voila!

Get Christine Jeon’s stories in your inbox

Join Medium for free to get updates from this writer.

As displayed in the image, I have a dropdown menu that allows you to select a country to display their COVID-19 statistics, including: Active Cases, Last Update, New Cases, New Deaths, Total Cases, Total Deaths, and Total Recovered.

Press enter or click to view image in full size
Bottom half of my application displaying another dropdown menu that allows you to sort a list of countries and just their active case count and last update as well as a select button. On the right, a total active case count that accumulates as you select the buttons.

Here it is, the bottom half of my app. I have another dropdown menu that allows you to sort through the list of all countries by highest and lowest active cases, and alphabetically by country after ‘World’ and ‘USA’.

In the list of all countries, it displays the countries, active cases and the last update based on the API’s hourly update. I also have a counter on the right that displays the sum of the total active cases of the selected country. In the example image above, I have World and USA selected (shown by the green checkmark) and on the counter it shows the sum of the two.

This project was VERY challenging for me, but well worth all of the hard work, sleepless nights, and STRRESSSS to get it to this point. Also, I’ve learned through this project that I really need to learn to ask for help and not just stay stuck for hours on one code. But I’m so stubborn and I want to figure it out myself because it feels so rewarding when I do! Does anyone else do this?? Such a dilemma every time…

But I have to say I am very proud of my first project considering I barely had any prior coding knowledge and literally NO prior JavaScript knowledge. So… I pat myself on the back for this one. On to the next one!

--

--