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

#javascript #webdev #tutorial #beginners

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>

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;
}

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();

})

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();
})