COVID-19

TRACKER

Creating covid-19 tracker using COVID-19 API we use the 👉LINK to provide many covid -19 API we use in this project 👉https://disease.sh/v3/covid-19/gov/India. This api provid the INDIA Total cases, new cases for covid-19 this data updated 24 hours.

We use languages in this project 👉 HTML, CSS, BOOTSTRAP ,JS

Hello guys 👋 Let us start with implementing Your Own COVID-19 tracker. are you excited 😋for create your own covid-19 tracker.

First of all open any code editor create a folder 📁 and name it your choice. next create a basic structure of your project . create a following files like👉indix.html, style.css and script.js.

Fist of all we introduce the file structure:

indix.html👉 All html code writing in this file.
style.css👉All CSS code writing in this file.
script.js👉All java script code writing in this file.

Next step 👉 open the indix.html file and past the following code:

<!DOCTYPE html>

<head>

<title>COVID-19 Tracker</title>

</head>

<a class="navbar-brand" href="#home"><h4 class="text-light">COVID-19</h4> <h5 class="text-warning">Tracker <span class="text-info">INDIA</span></h5></a>

</button>

</li>

<a class="nav-link active" aria-current="page" href="#india_total_cases">Total Cases</a>

</li>

<a class="nav-link active" aria-current="page" href="#india_today_total_cases">New Cases</a>

</li>

<a class="nav-link" href="#india_state_wise_status">State Wise Cases</a>

</li>

</ul>

</div>

</nav>

<h2 class="text-light">COVID-19</h2>

<h3 class="text-warning">TRACKER <span class="text-info">INDIA</span></h3>

<h4 class="text-light">LAST UPDATE</h4>

</div>

</svg>

</div>

<h2 class="text-center text-light">TOTAL CASES</h2>

<p>TOTAL CASES</p>

</div>

<p>TOTAL ACTIVE CASES</p>

</div>

<p>TOTAL RECOVERED CASES</p>

</div>

<p>TOTAL DEATHS</p>

</div>

<h2 class="text-center text-light">NEW CASES</h2>

<p>NEW TOTAL CASES</p>

</div>

<p>NEW ACTIVE CASES</p>

</div>

<p>NEW RECOVERED CASES</p>

</div>

<p>NEW DEATHS</p>

</div>

</div>

<h2 class="text-center text-light">STATE WISE CASES</h2>

<h3 class="text-center text-light mt-5">TOTAL CASES</h3>

</div>

<thead>

<tr>

<th scope="col">STATE NAME</th>

<th scope="col">TOTAL CASES</th>

<th scope="col">TOTAL ACTIVE CASES</th>

<th scope="col">TOTAL RECOVERED CASES</th>

<th scope="col">TOTAL DEATHS</th>

</tr>

</thead>

</tbody>

</table>

</div>

<h3 class="text-center text-light mt-5">NEW CASES</h3>

</div>

<thead>

<tr>

<th scope="col">STATE NAME</th>

<th scope="col">TOTAL CASES</th>

<th scope="col">TOTAL ACTIVE CASES</th>

<th scope="col">TOTAL RECOVERED CASES</th>

<th scope="col">TOTAL DEATHS</th>

</tr>

</thead>

</tbody>

</table>

</div>

</div>

<h4 class="text-light">COVID-19</h4>

<h5 class="text-warning">TRACKER <span class="text-info">INDIA</span></h5>

</div>

<p class="text-light text-uppercase">DESIGNED BY ~ PRUTHVIRAJ RAJPUT</p>

</div>

<script

src="https://code.jquery.com/jquery-3.6.0.js"

integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="

crossorigin="anonymous"></script>

</body>

</html>

Next Open the style.css file and copy the following code and past it👇

/* Style Loadind svg */

#loading{

position: fixed;

width: 100%;

height:100vh;

background: #000

url(https://media0.giphy.com/media/N256GFy1u6M6Y/giphy.gif?cid=ecf05e47b28jkr0h9v1ti3qgp1fesgup82od1qpi3fws7f2j&rid=giphy.gif)

no-repeat

center;

z-index: 999999999;

}

/* End loading svg */

/* Styly Body */

body{

margin:0;

padding: 0;

font-family: 'Poppins', sans-serif;

background-color: #181a1d!important;

}

/* End Style Body */

/* Style Nav Section */

.nav_color{

background-color: rgba(20, 18, 18);

box-shadow: 0px 0px 2px 0px #fff;

}

nav a{

color: #f0f0f0;

font-size: 20px;

font-family: 'Poppins', sans-serif;

}

nav a:hover{

color: #FFFFFF;

}

.navbar-brand h4{

font-size: 28px;

font-weight: bold;

}

.navbar-brand h5{

font-weight: bold;

}

.navbar-brand{

padding: 5px;

border-radius: 3px;

box-shadow: 8px 8px 8px 8px rgba(0, 0, 0, 0.205);

}

/* End nav style */

/* Style Home Banner */

.container_home{

display: flex;

justify-content: space-around;

align-items: center;

position: relative;

width: 100%;

height: 100vh;

background-image: linear-gradient(180deg,rgba(0,0,0,.1),#000 93%),url(https://image.freepik.com/free-vector/futuristic-glowing-low-polygonal-coronavirus-covid-19-cell-isolated-dark-blue-background_67515-889.jpg);

background-repeat: no-repeat;

background-size: cover;

background-blend-mode: screen;

}

.content h2{

text-align: center;

font-size: 70px;

font-family: 'Poppins', sans-serif;

font-weight: bold;

}

.content h3{

text-align: center;

font-size: 40px;

font-family: 'Poppins', sans-serif;

font-weight: bold;

}

.content h4{

text-align: center;

font-size: 20px;

font-family: 'Poppins', sans-serif;

font-weight: bold;

}

.content p{

font-weight: bold;

text-align: center;

}

.content h4 span{

font-size: 20px;

}

.wave{

position: absolute;

bottom: 0;

}

/* End home Baner Style */

/* Line style */

.line{

content: " ";

background-color:#ffc107;

width: 100px;

height: 3px;

margin-left: auto;

margin-right: auto;

border-radius: 3px;

}

/* End line Style */

/* Style The Card */

.flex-wrap-row{

display: flex;

flex-wrap: wrap;

justify-content: space-evenly;

}

.body_case{

background-color: rgba(0, 0, 0, 0.575);

padding: 40px;

margin-top:10px;

border-radius: 10px;

box-shadow: 0 10px 10px 10px rgba(0, 0, 0, 0.219);

width: 18rem;

cursor: pointer;

transition: 1s ease-in-out;

}

.body_case:hover{

background-color:rgba(49, 50, 126, 0.829);

}

.body_case p{

text-align: center;

font-weight: bold;

}

.body_case h3{

text-align: center;

}

/* End Card Style */

/* Search box Style */

.search_box{

margin-top: 20px;

display:flex;

justify-content:space-around;

}

.search_box input{

width: 50rem;

}

/* End Search Box Style */

/* Style footer section */

.footer_color{

background-color:#00000027;

}

.footer_color .footer-contain{

text-align: center;

padding-top: 50px;

border-bottom: 1px solid white;

}

.footer_color .footer-contain h4{

font-size: 28px;

font-weight: bold;

}

.footer_color .footer-contain h5{

font-weight: bold;

}

.developer{

padding: 20px;

text-align: center;

}

/* End Footer style */

Next open the script.js file and copy the following code and past it👇

// Web page styling start

// Add the page onload option functionality

let loader = document.getElementById('loading');

function myloader(){

loader.style.display ='none';

}

// End page load functionality

// Style to nav bar on scroll

const nav= document.querySelector('nav');

const firstSection = document.querySelector('#home');

const sectionOneOption ={

rootMargin: "-300px 0px 0px 0px"

}

const sectionOneObserver = new IntersectionObserver(function(

entries,

sectionOneObserver

){

entries.forEach(entry => {

if(!entry.isIntersecting){

nav.classList.add("nav_color");

}else{

nav.classList.remove("nav_color");

}

})

},sectionOneOption);

sectionOneObserver.observe(firstSection);

// End nav bar onscroll functionality

// End web page Style

// Acctual Added The Covid-19 app functionality

const url ="https://disease.sh/v3/covid-19/gov/India"; //Declear the COVID-19 api

//Here Use Java script method to featch api

fetch(url)

//Featch the resonse

.then(response =>{

getData(response.json());//Call the function

})

//Catch the error

.catch(err =>{

console.log(err);

})

//Actual get date using this function call

function getData(result) {

//here resolve the data

Promise.resolve(result).then(value =>{

//brack the hole function to differnt function

getDate(value.updated); //call the function for date

getTotal(value.total); //call the function for total cases

getState(value.states); //call the function for state wise cases

})

}

// Decleare function for Actual Date for updated data

function getDate(date){

var upDa = new Date(date);

var da = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];

var days = da[upDa.getDay()];

var d = upDa.getDate();

if(d<10){

d="0" + d;

}

var m = ["January","February","March","April","May","June","July","August","September","October","November","December"];

var mo = m[upDa.getMonth()];

var y = upDa.getFullYear();

var h = upDa.getHours();

var pm="AM";

if(h == 12){

h=12;

}

if(h>12){

h=h-12;

pm='PM';

}

if(h<10){

h="0" + h;

}

const min = upDa.getMinutes();

if(min<10){

min = "0" + min;

}

const sec = upDa.getSeconds();

if(sec<10){

sec = "0" + sec;

}

document.getElementById("update_date").innerHTML = days+' ' +d +' '+mo+' '+y;

document.getElementById("update_time").innerHTML = h +' '+':'+' '+min +' '+':' +' '+ sec+' '+pm;

}

// Decler the function for India caes featch throw api

function getTotal(total){

//show data to front end

document.getElementById('total_case').innerHTML = total.cases;

document.getElementById('total_active').innerHTML =total.active;

document.getElementById('total_recovered').innerHTML=total.recovered;

document.getElementById('total_deaths').innerHTML=total.deaths;

document.getElementById('today_case').innerHTML = total.todayCases;

document.getElementById('today_active').innerHTML =total.todayActive;

document.getElementById('today_recovered').innerHTML=total.todayRecovered;

document.getElementById('today_deaths').innerHTML=total.todayDeaths;

//Insert chart bar to front end

const ctx1 = document.getElementById('myChart1').getContext('2d');

const lable = ['CASES', 'ACTIVE CASES','RECOVERED CASES','DEATHS'];

const data = [{x:'CASES',TOTAL: total.cases, NEW: total.todayCases}, {x:'ACTIVE CASES',TOTAL: total.active, NEW:total.todayActive},{x:'RECOVERED CASES',TOTAL: total.recovered, NEW: total.todayRecovered},{x:'DEATHS',TOTAL: total.deaths, NEW: total.todayDeaths}];

const mychart1 = new Chart(ctx1,{

type: 'bar',

data: {

labels: lable,

datasets: [{

label: 'TOTAL',

data: data,

parsing: {

yAxisKey: 'TOTAL'

backgroundColor: 'blue'

}, {

label: 'NEW',

data: data,

parsing: {

yAxisKey: 'NEW'

backgroundColor:'green'

}]

options:{

responsive: true,

maintainAspectRatio: false,

plugins: {

title: {

display: true,

text: 'INDIA COVID-19 CASES',

}

})

}

//Decler the function for state data featch throw api

function getState(state){

//featch all data using for loop

for(let i=0; i<state.length;i++){

const sr = i+1;

const name = state[i].state;

const totalc = state[i].cases;

const totala = state[i].active;

const totalr = state[i].recovered;

const deaths = state[i].deaths;

const tr = document.createElement('tr');

tr.innerHTML='<th scope="row">'+sr+'</th>'+ '\n' +'<td>'+name+'</td>'+'\n'+'<td class="text-primary text-bold">'+totalc+'</td>'+'\n'+'<td class="text-warning text-bold">'+totala+'\n'+'</td>'+'\n'+'<td class="text-success text-bold">'+totalr+'</td>'+'\n'+'<td class="text-danger text-bold">'+deaths+'<td>';

document.getElementById('create_state').appendChild(tr);

const todayC = state[i].todayCases;

const todayA = state[i].todayActive;

const todayR = state[i].todayRecovered;

const todayD = state[i].todayDeaths;

const tTr = document.createElement('tr');

tTr.innerHTML ='<th scope="row">'+sr+'</th>'+ '\n' +'<td>'+name+'</td>'+'\n'+'<td class="text-primary text-bold">'+todayC+'</td>'+'\n'+'<td class="text-warning text-bold">'+todayA+'\n'+'</td>'+'\n'+'<td class="text-success text-bold">'+todayR+'</td>'+'\n'+'<td class="text-danger text-bold">'+todayD+'<td>';

document.getElementById('create_todat_state').appendChild(tTr);

}

//Insert front end to chart line

const lable=[];//decler the empty arry for lable of chart

const data =[]; //decler the empty arry for data of Chart

//retriw data form api

for(let i=0; i<state.length;i++){

const d = {x: state[i].state,cases: state[i].cases,active: state[i].active,recovered: state[i].recovered,deathss: state[i].deaths};

data.push(d); //puch lable to lable variable

const l = state[i].state;

lable.push(l); // puch data to data variable

}

const ctx = document.getElementById('myChart2').getContext('2d');

const mychart1 = new Chart(ctx,{

type: 'line',

data: {

labels: lable,

datasets: [{

label: 'CASES',

data: data,

parsing: {

yAxisKey: 'cases',

backgroundColor: 'blue'

},{

label: 'ACTIVE',

data: data,

parsing: {

yAxisKey: 'active'

backgroundColor: 'yellow'

},{

label: 'RECOVERED',

data: data,

parsing: {

yAxisKey: 'recovered'

backgroundColor: 'green'

},{

label: 'DEATHS',

data: data,

parsing: {

yAxisKey: 'deathss'

backgroundColor: 'red'

}]

options:{

responsive: true,

maintainAspectRatio: false,

borderColor: '#ccc',

borderWidth: 1,

plugins: {

title: {

display: true,

text: 'INDIA COVID-19 STATE WISE CASES',

}

})

}

// End the Covid-19 api featch

// Added Here Table Search Funtionality

function search(){

const fillter = document.getElementById('search_input').value.toUpperCase();

const table = document.getElementById('table_search');

const tr = table.getElementsByTagName('tr');

for(let i=0; i<tr.length; i++){

let td= tr[i].getElementsByTagName('td')[0];

if(td){

const textvale = td.textContent || td.innerHTML;

if(textvale.toUpperCase().indexOf(fillter)>-1){

tr[i].style.display="";

}else{

tr[i].style.display ="none";

}

function search_today(){

const fillter = document.getElementById('search_input_today').value.toUpperCase();

const table = document.getElementById('state_today');

const tr = table.getElementsByTagName('tr');

for(let i=0; i<tr.length; i++){

const td= tr[i].getElementsByTagName('td')[0];

if(td){

const textvale = td.textContent || td.innerHTML;

if(textvale.toUpperCase().indexOf(fillter)>-1){

tr[i].style.display="";

}else{

tr[i].style.display ="none";

}

// End the Search Functionality

Hey guys ✋ Finally Completed the Covid-19 module 😊

Are you happy now😂

Search This Blog

Web Developer World

COVID-19 Tracker

COVID-19

TRACKER

Next step 👉 open the indix.html file and past the following code:

THANK YOU !

Comments

Post a Comment

Popular posts from this blog

Switching Tab in wix

Culture Interactive Project Research

Bootstrap /Flex-Boxs / Grids