DEV Community

Cover image for COVID Tracker App in JS || 10 JS Project Challenge #3

Posted on • Updated on

COVID Tracker App in JS || 10 JS Project Challenge #3

Hello πŸ‘‹

In this post I will show you how to make COVID Tracker App with COVID Tracking API.

This is Part 3 of the 10 JS Project Challenge.

So let's get into it.

First, here is the video tutorial:

So let's start coding.

First, we need to create three files:

  • index.html

  • style.css

  • home.js

Once we have those files created, we can start coding.

Here is the code for index.html:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">

        <h1>COVID-19 in Slovakia</h1>
        <a href="#">About</a>
    <div class="container covid">
        <h1>Total Cases: <span id = "cases">0</span></h1>
        <h1>Total Deaths: <span id = "deaths">0</span></h1>
        <h1>Population: <span id = "population">0</span></h1>

    <div class="container covid">
        <h1>Vaccinations: <span id = "vaccinations">0</span></h1>
        <h1>Partially Vaccinated: <span id = "partially">0</span></h1>

    <script src="home.js"></script>
Enter fullscreen mode Exit fullscreen mode

We are just creating a header with the Logo and About button.
We are creating a text with information about COVID-19.

Now it's time for styling!. Open our style.css and write this code in it.

@import url(',wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 13%;

    padding-left: 4.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e5e5e5;
header a{
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 600;
    padding-right: 1.5rem;
    color: black;
Enter fullscreen mode Exit fullscreen mode

We have a font here declared, the font is Poopins.
We are rewriting the default padding and margin and changing the font to Poopins. The other is just styling elements.

Now let's move to the actual coding and fun part. So let's start programming in JavaScript

.then(response => response.json())
.then(data => {
     document.getElementById('cases').innerHTML = data.All.confirmed.toLocaleString();
    document.getElementById('deaths').innerHTML = data.All.deaths.toLocaleString();
    document.getElementById('population').innerHTML = data.All.population.toLocaleString();

Enter fullscreen mode Exit fullscreen mode

So first, we need to decide, from what country we want the data. I'm fetching the Data from Slovakia. After Fetch, we need to take the response and write it to the JSON File as JS object. Then we need to take that JSON file and convert it into variable data so we can assign the variable to the actual text. So we are overwriting the numbers in the different elements.

Now that we have COVID part done, let's move to the vaccination part.

.then(response => response.json())
.then(data => {
     document.getElementById('vaccinations').innerHTML = data.All.people_vaccinated.toLocaleString();
    document.getElementById('partially').innerHTML = data.All.people_partially_vaccinated.toLocaleString();
Enter fullscreen mode Exit fullscreen mode

We are basically using the same method here, but assigning different elements.

Now, we are done! Open your index.html and you should see results like this.

Image description

And that's it. You created your own COVID Tracking website with API. Congrats!

Thanks for reading my post, and I hope I will see you next time.

Top comments (1)

vector3studio profile image

Thanks so much. I'm just a beginner in JavaScript so I really appreciate learning something new.
Thanks 😊