COVID-19 tracker with HTML, CSS and JAVASCRIPT
On April 20, 2020 by Sonahang RaiMy COVID-19 tracker is a simple covid-19 data display. Today we wil be using a free covid-19 api and display it using HTML. We will use the javascript to fetch the datas from api. The fetched data wil be displed in HTML. We can get lots of api for the covid data. I am using this one.
THIS: https://corona.lmao.ninja/v2/countries/:country
This api fetch data as per the country provided. Here the :country parameter takes a valid country name.
Lets start our tutorial. Make your editor ready.
Step 1: HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Covid Datas</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="container">
<h2>COVID -19 Cases in <span id="country"></span> <img src="" id="flag"></h2>
<div class="board">
<div class="card a"><i class="fa fa-tachometer"></i><h5>Active Cases</h5><span id="active"></span></div>
<div class="card ca"><i class="fa fa-th-list"></i><h5>Total Cases</h5><span id="cases"></span></div>
<div class="card cr"><i class="fa fa-times-circle"></i><h5>Critical Cases</h5><span id="critical"></span></div>
<div class="card d"><i class="fa fa-times"></i><h5>Total Deaths</h5><span id="death"></span></div>
<div class="card r"><i class="fa fa-check-square-o"></i><h5>Recovered Cases</h5><span id="recovered"></span></div>
<div class="card t"><i class="fa fa-eye"></i><h5>Total Testes Done</h5><span id="tests"></span></div>
</div>
</div>
</body>
</html>
I have created this for my HTML tags. You must put fontawsome cdn link as we will use fontawsome v4 for the icon. I have used card div for each data container. To make different styling for cards, also I have given extra different class for each div card. YOu can also see different id for span tag. This is to make the use of id to insert data from the js code.
Step 2: Give CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body{
height: 100vh;
font-family: 'Poppins', sans-serif;
display: flex;
align-items: center;
justify-content: center;
}
body:after{
position: absolute;
content: "";
background: #eb5191;
width: 100%;
height: 50%;
top: 0;
}
body:before{
position: absolute;
content: "";
background: #fff;
width: 100%;
height: 50%;
bottom: 0;
}
.container {
z-index: 1;
width: 70%;
margin: 0 auto;
border-radius: 24px;
background: #F6F5F0;
padding: 2%;
box-shadow: 0px 10px 6px -8px rgba(0,0,0,0.75);
}
.board {
column-count: 3;
column-gap: 1rem;
}
.container h2 {
margin: 0 0 30px;
text-align: center;
}
img#flag {
height: 20px;
width: 20px;
}
.card {
width: 84%;
background: #ccc;
padding: 8%;
margin-bottom: 20px;
border-radius: 6px;
color: #fff;
}
.card.a {
background: #41a7ff;
}
.card.cr {
background: #ff3434;
}
.card.r {
background: #32b336;
}
.card.ca {
background: #d83f3f;
}
.card.d {
background: #ff0053;
}
.card.t {
background: #ffa501;
}
.card h5 {
margin: 0;
font-size: 1rem;
}
.card span {
font-size: 3rem;
font-weight: 700;
letter-spacing: 4px;
}
.card i {
font-size: 3rem;
}
@media screen and (max-width: 768px){
.board {
column-count: 2;
}
.card span {
font-size: 2.5rem;
}
}
@media screen and (max-width: 500px){
.board {
column-count: 1;
}
}
This are my stylings for the above HTML. You can create your css stylings better than mine design. I have used media queries for the cards to be responsive. Use column-count for making the cards responsive. For font I have used googles font poppins. You can see I have included at the top of my css.
Step 3: The functionality (Javascript)
<script type="text/javascript">
fetch('https://corona.lmao.ninja/v2/countries/USA')
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
document.getElementById("country").innerHTML = data.country;
document.getElementById("active").innerHTML = data.active.toLocaleString();
document.getElementById("cases").innerHTML = data.cases.toLocaleString();
document.getElementById("critical").innerHTML = data.critical.toLocaleString();
document.getElementById("death").innerHTML = data.deaths.toLocaleString();
document.getElementById("recovered").innerHTML = data.recovered.toLocaleString();
document.getElementById("tests").innerHTML = data.tests.toLocaleString();
document.getElementById("flag").src = data.countryInfo.flag;
});
</script>
The main component for this task is javascript. I have made use of fetch function to get data from the api. After getting the data I have feed the data to the HTML tags by using the respective id name. I have also used the toLocaleString function to make the long digit datas seperated by commas.
This COVID-19 tracker will give the data for a specific country. You can use this api in other javascript framework or library and can make it more advanced. Like a display to input country value and search as per the country. You can implement this techniqe in ReactJS. Get my full code here. Also you can watch video tutorial.
Leave a Reply