Corona Virus live update Web App using covid-19 API using HTML, CSS & JavaScript with source code

CODE WITH MURAD May 14, 2021

 Corona Virus Live Update Website Building Tutorial

The "Corona Virus live update of India" is a simple website that will display a live update of India like Total confirmed cases, Total death, and Total Recovered on the browser.

In the above youtube tutorial video, I have explained how we can make Corona Virus live update of India using COVID-19 API using HTML, CSS & JavaScript.

For running the project, we can simply double-click on index.html. After clicking on index.html we will be able to see the below output on the browser.


DO SUBSCRIBE TO MY YOUTUBE CHANNEL FOR MORE TUTORIALS AND PROJECT VIDEOS.

SOURCE CODE :

Index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Bitter:wght@700&display=swap" rel="stylesheet">
    <title>Corona Virus Status</title>
    <style>
        h1{
            font-family: 'Bitter', serif;
        }
    </style>
</head>
<body>
    <div align="center">
        <hr>
              <h1 style="color: red;">Corona Virus Live Status</h1>
        <hr>

        <table border="1">
                <tr style="background-color: green;">
                    <th style="padding:10px">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
                    <th style="padding: 10px">Total Confirmed</th>
                    <th style="padding:10px">Total Deaths</th>
                    <th style="padding:10px">Total Recovered</th>
                    <th style="padding:10px">New Confirmed</th>
                    <th style="padding:10px">New Deaths</th>
                    <th style="padding:10px">New Recovered</th>  
                    <th style="padding:10px">Last Updated</th> 
                </tr>

                <tr>
                     <td style="padding:10px">
                        <b> Global </b>
                     </td>
                     <td style="padding:10px">
                        <p id="g1"> </p>
                    </td >
                    <td style="padding:10px">
                        <p id="g2"> </p>
                    </td >
                    <td style="padding:10px">
                        <p id="g3"> </p>
                    </td>
                    <td style="padding:10px">
                        <p id="g4"> </p>
                    </td>
                    <td style="padding:10px">
                        <p id="g5"> </p>
                    </td>
                    <td style="padding:10px">
                        <p id="g6"> </p>
                    </td>
                    <td style="padding:10px">
                        <p id="g7"> ---</p>
                    </td>
                </tr>

                <tr>
                    <td style="padding:10px">
                       <b> India </b>
                    </td>
                    <td style="padding:10px">
                        <p id="i1"> </p>
                   </td>
                   <td style="padding:10px">
                    <p id="i2"> </p>
                   </td>
                   <td style="padding:10px">
                    <p id="i3"> </p>
                   </td>
                   <td style="padding:10px">
                    <p id="i4"> </p>
                   </td>
                   <td style="padding:10px">
                    <p id="i5"> </p>
                   </td>
                   <td style="padding:10px">
                    <p id="i6"> </p>
                   </td>
                   <td style="padding:10px">
                    <p id="i7"> </p>
                   </td>
               </tr>
        </table>

        <a href="javascript:location.reload(true)" ><button>Refresh Page</button> </a>
    </div>

    <script type="text/javascript" src="Home.js"></script>

</body>
</html>

Home.js

async function getCovidApi()
{
    const jsonFormatData= await fetch("https://api.covid19api.com/summary");
    const jsFormatData = await jsonFormatData.json();
   
    const TotalglobalCase = jsFormatData.Global.TotalConfirmed ;
    console.log("Total Global Case : " +TotalglobalCase);
    
    const countryName= jsFormatData.Countries[0].Country ;
    console.log("First Country Name : "+countryName);
    console.log(jsFormatData.Countries[76].Country);

    document.getElementById("g1").innerHTML = jsFormatData.Global.TotalConfirmed ;
    document.getElementById("g2").innerHTML = jsFormatData.Global.TotalDeaths ;
    document.getElementById("g3").innerHTML = jsFormatData.Global.TotalRecovered ;
    document.getElementById("g4").innerHTML = jsFormatData.Global.NewConfirmed ;
    document.getElementById("g5").innerHTML = jsFormatData.Global.NewDeaths ;
    document.getElementById("g6").innerHTML = jsFormatData.Global.NewRecovered ;
    
    document.getElementById("i1").innerHTML = jsFormatData.Countries[76].TotalConfirmed ;
    document.getElementById("i2").innerHTML = jsFormatData.Countries[76].TotalDeaths ;
    document.getElementById("i3").innerHTML = jsFormatData.Countries[76].TotalRecovered ;
    document.getElementById("i4").innerHTML = jsFormatData.Countries[76].NewConfirmed ;
    document.getElementById("i5").innerHTML = jsFormatData.Countries[76].NewDeaths ;
    document.getElementById("i6").innerHTML = jsFormatData.Countries[76].NewRecovered ;
    document.getElementById("i7").innerHTML = jsFormatData.Countries[76].Date ;
    
}
getCovidApi();


1. ONLINE FOOD ORDERING SYSTEM BLOG




Other practical projects using React & Spring Boot 

1) Employee Management System using Spring Boot Microservices & React.

2) Hotel Management System using Spring Boot & React.

3) E-commerce Project using Spring Boot & React.

4) Gym Management System using Spring Boot & React.

Tags

Post a Comment

0 Comments