My JavaScript Project

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.

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!

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.

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!

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Most interesting methods, operators, and concepts in ES6

Lazy loading of modules & 3rd party libraries in Angular

Writing Better (and Worse) Code in Framer

Code Splitting with React.lazy()

Managing React state with Context

Where am I? Highlighting the Scope in Roam

Angular String to HTML Conversion

Composite Javascript Objects with Destructuring

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
Christine Jeon

Christine Jeon

More from Medium

Hoisting in javascript | Codementor

Javascript array mission — part 1

JavaScript and jQuery

Flatiron First Project Assignment