COVID Tracker App in JS || 10 JS Project Challenge #3
Tags: javascript, webdev, tutorial, beginners
Published: 2022-01-06 13:03:16

## 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:

{%youtube https://youtu.be/kMoi7uICisk %}

### 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:

```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.

```CSS
@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

```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.
```JAVASCRIPT
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();
})
```
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gndv9phsctb5q6lubifo.png)

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.