In This Tutorial We are Going to Build Simple Live Covid-19 Tracker for Nepal Using HTML, CSS and JavaScript. We are Going to Use API to Fetch Data to our Website.
By Following this Method You Can Build Your Own Country Covid-19 Tracker.
First Make a Folder Name of Your Choice and Create A File Name Index.Html on it and Then Copy and Paste the Below Index.html Code in it. I have Made a Simple Design. if You want you can Re- Design it According to it
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">
<title>Corona Tracker</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Covid-19 Tracker Live Data of <span id="Country"></span> <img src="" id="flag"> </h2>
<div id="container">
<div id="totalCase">
<h4>Total Case</h4>
<img id="img1" src="corona.png">
<p id="tc"></p>
</div>
<div id="totalCase">
<h4>Today Case</h4>
<img id="img1" src="recc.png">
<p id="Tac"></p>
</div>
<div id="totalCase">
<h4>Total Deaths</h4>
<img id="img1" src="sad1.png">
<p id="td"></p>
</div>
<div id="totalCase">
<h4>Total Recov</h4>
<img id="img1" src="happy.png">
<p id="tr"></p>
</div>
</div>
<script src="app.js"></script>
</body>
</html>After writing Code for html Here are the CSS Code which Helps to add Different Designs and Animations to our Website. First Create Style.css on the same Folder and Paste the Below Code In it.
Style.css
*{
margin: 0px;
padding: 0px;
}
body{
background-color:rgb(12, 230, 211);
}
#container{
width: 800px;
background-color: rgb(22, 233, 205);
height: 250px;
margin: 50px auto;
justify-content: center;
align-items: center;
position: relative;
display:flex;
border-radius: 10px;
border:none;
}
#img1{
width: 70px;
height: 60;
margin: 10px;
}
#totalCase{
border:none;
margin: 10px;
padding: 8px;
width: 150px;
height: 140px;
border-radius: 6px;
color: royalblue;
background:rgb(255, 255, 255);
text-align: center;
font-size: 20px;
font-weight: bold;
cursor: pointer;
}
#totalCase:hover{
background-color: rgb(15, 26, 51);
border:none;
border-radius: 10px;
transition: ease-in-out 0.2s, 0.5s;
transform: scale(1.1);
}
p{
font-size: 19px;
}
h2{
margin: 50px auto;
padding: 20px;
text-align: center;
font-size: 30px;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
color:blue;
}
#tc{
color: red;
}
#Tac{
color:tomato;
}
#td{
color:rgb(255, 72, 0)
}
#tr{
color: rgb(10, 197, 10);
}
#flag{
width:25px
}I Have Used Fetch Method to Fetch the Data From API using JavaScript. If You Want You Can Use Others Method Too. Now Copy the Below code and Add it into Ap.js File
App.js
fetch('https://corona.lmao.ninja/v2/countries/Nepal')
.then((Response)=>{
return Response.json();
})
.then((data)=>{
document.getElementById('flag').src = data.countryInfo.flag;
document.getElementById('Country').innerHTML = data. country;
document.getElementById('tc').innerHTML = data.cases;
document.getElementById('Tac').innerHTML = data.todayCases;
document.getElementById('td').innerHTML = data.deaths;
document.getElementById('tr').innerHTML = data.recovered;
})If you want to Download Code file with all the Picture I used in this Project you can download it from the Below Download Button
After Completing all this Run the Code in Chrome Browser your Covid-19 Tracker is Ready and Will show you the Real Time Covid-19 Data of the Following Countries you have Selected. If you face Any Problems Comment down Below will reply within hours
Tags:
Project