Build a Coronavirus Live Data Table Web App Using AJAX in Javascript Using Covid-19 API Using Bootstrap 5

Welcome folks today in this blog post we will be displaying the coronavirus cases data inside the bootstrap 5 table using ajax in browser using the covid-19 api in javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

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>COVID-19 API in Javascript</title>
</head>
<body>
    <div class="container">
        <h1 class="text-center mt-5">
            Covid-19 Live Data Table
        </h1>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Total Cases</th>
                    <th>Total Deaths</th>
                    <th>Total Recovered</th>
                </tr>
            </thead>
            <tbody>
                <tr id="data">

                </tr>
            </tbody>
        </table>
    </div>
</body>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</html>

<!DOCTYPE html>

<head>

<title>COVID-19 API in Javascript</title>

</head>

<body>

Covid-19 Live Data Table

</h1>

<thead>

<tr>

<th>Total Cases</th>

<th>Total Deaths</th>

<th>Total Recovered</th>

</tr>

</thead>

<tbody>

</tr>

</tbody>

</table>

</div>

</body>

</html>

As you can see in the above code we are including the cdn library of bootstrap 5 and the jquery library. And then we are displaying the boorstrap 5 table. Inside the table we have three columns which is the total cases, deaths and total recovered cases. And then we have given the id which is data to the tr element. And now we need to write the javascript code for displaying the coronavirus cases as shown below

$(document).ready(function(){
        init()

        function init(){
            let url = "https://api.covid19api.com/summary"

            $.get(url,function(data){
                console.log(data)

                
            })
        }
    })

$(document).ready(function(){

init()

function init(){

let url = "https://api.covid19api.com/summary"

$.get(url,function(data){

console.log(data)

})

}

})

As you can see in the above code we are calling the ajax get request to the covid api url. And then we are getting the response data in the browser in the console as shown below

As you can see we have received the object from the api which contains all the information about the covid 19 information which contains the total cases,deaths and recovered cases

And now we will be rendering the information inside the DOM as shown below

$(document).ready(function(){
        init()

        function init(){
            let url = "https://api.covid19api.com/summary"

            $.get(url,function(data){
                console.log(data.Global)

                data = `
                
                <td>${data.Global.TotalConfirmed}</td>
                <td>${data.Global.TotalDeaths}</td>
                <td>${data.Global.TotalRecovered}</td>

                
                `

                $("#data").html(data)

            })
        }
    })

$(document).ready(function(){

init()

function init(){

let url = "https://api.covid19api.com/summary"

$.get(url,function(data){

console.log(data.Global)

data = `

<td>${data.Global.TotalConfirmed}</td>

<td>${data.Global.TotalDeaths}</td>

<td>${data.Global.TotalRecovered}</td>

$("#data").html(data)

})

}

})

As you can see in the above code we are getting the information about the covid-19 information from the Global property. And then we are getting the total confirmed cases, and the total deaths and also the total recovered cases. And then we are manipulating the innerHTML property of the div element and we will pass the data as shown above. Now if you open the browser you will see the covid-19 data shown in the table