DEV Community

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

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">
<head>
    <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">
    <title>Document</title>
</head>
<body>

    <header>
        <h1>COVID-19 in Slovakia</h1>
        <a href="#">About</a>
    </header>
    <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>

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

    <script src="home.js"></script>
</body>
</html>
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('https://fonts.googleapis.com/css2?family=Poppins:ital,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%;
}

h1{
    padding-left: 4.5rem;
}
header{
    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

fetch('https://covid-api.mmediagroup.fr/v1//cases?country=Slovakia')
.then(response => response.json())
.then(data => {
    console.log(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.

fetch('https://covid-api.mmediagroup.fr/v1//vaccines?country=Slovakia')
.then(response => response.json())
.then(data => {
    console.log(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.

Discussion (3)

Collapse
lukeshiru profile image
Luke Shiru

You should never, NEVER use innerHTML with something coming from an API that's out of your control. Use textContent instead. Also there are a few other improvements here and there that you could do, here are all together:

// We define a common const for the API endpoint
const ENDPOINT = "https://covid-api.mmediagroup.fr/v1";

// We create a wrapper for `fetch` that parses JSON automatically
const fetchJSON = (input, init) =>
    fetch(input, init).then(response => response.json());

// We create a function to get the vaccines for a given country
const getVaccines = country =>
    fetchJSON(`${ENDPOINT}/vaccines?${new URLSearchParams({ country })}`);

// Same for cases
const getCases = country =>
    fetchJSON(`${ENDPOINT}/cases?${new URLSearchParams({ country })}`);

// We create an alias for `document.querySelector`
const $ = document.querySelector.bind(document);

// We cache the elements in constants instead of selecting them every time
const cases = $("#cases");
const deaths = $("#deaths");
const population = $("#population");
const vaccinations = $("#vaccinations");
const partially = $("#partially");

// We create a function that updates the UI for the given country.
const update = country => {
    getCases(country).then(({ All }) => {
        cases.textContent = All.confirmed;
        deaths.textContent = All.deaths;
        population.textContent = All.population;
    });

    getVaccines(country).then(({ All }) => {
        vaccinations.textContent = All.people_vaccinated;
        partially.innerHTML = All.people_partially_vaccinated;
    });
};

// We finally call update with "Slovakia", but you can use it with any country
update("Slovakia");
Enter fullscreen mode Exit fullscreen mode

As you can imagine, you could put that update function to good use by taking the country from an input and showing any country the user wants to see.

Cheers!

Collapse
vector3studio profile image
VECTOR3Studio Author

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

Collapse
lukeshiru profile image
Luke Shiru

Don't worry about it! Is ok! ... innerHTML would allow anyone to put any code in your site, and you don't want that. textContent on the other side, just sets "text", so there is no way for an "attacker" to put bad code in your site πŸŽ‰