<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
function fetch() {
$.get("https://api.covid19api.com/summary",
function (data) {
var tblval =document.getElementById('tblval');
for (var i = 1; i < (data["Countries"].length) ; i++) {
var x = tblval.insertRow();
x.insertCell(0);
tblval.rows[i].cells[0].innerHTML = data['Countries'][i - 1]['Country'];
tblval.rows[i].cells[0].style.background= '#009688';
tblval.rows[i].cells[0].style.color = '#fff';
x.insertCell(1);
tblval.rows[i].cells[1].innerHTML = data['Countries'][i - 1]['TotalConfirmed'];
tblval.rows[i].cells[1].style.background = '#4bb7d8';
//tblval.rows[i].cells[0].style.color= '#fff';
x.insertCell(2);
tblval.rows[i].cells[2].innerHTML= data['Countries'][i - 1]['TotalRecovered'];
tblval.rows[i].cells[2].style.background = '#4bb7d8';
x.insertCell(3);
tblval.rows[i].cells[3].innerHTML = data['Countries'][i - 1]['TotalDeaths'];
tblval.rows[i].cells[3].style.background = '#F44336';
x.insertCell(4);
tblval.rows[i].cells[4].innerHTML= data['Countries'][i - 1]['NewConfirmed'];
tblval.rows[i].cells[4].style.background = '#4bb7d8';
x.insertCell(5);
tblval.rows[i].cells[5].innerHTML = data['Countries'][i - 1]['NewRecovered'];
tblval.rows[i].cells[5].style.background = '#9cc850';
x.insertCell(6);
tblval.rows[i].cells[6].innerHTML = data['Countries'][i - 1]['NewDeaths'];
tblval.rows[i].cells[6].style.background= '#F44336';
}
}
)
}
</script>
</head>
<bodyonload="fetch()">
<form id="form1" runat="server">
<div class="container">
<div class="mb-3">
<h3class="text-centertext-uppercase">Covid-19Live updates of the world</h3>
</div>
<table id="tblval" class="table table-borderedtable-strriped text-capitalize text-center">
<tr>
<th>Country</th>
<th>TotalConfirmed</th>
<th>TotalRecovered</th>
<th>TotalDeaths</th>
<th>NewConfirmed</th>
<th>NewRecovered</th>
<th>NewDeaths</th>
</tr>
</table>
</div>
</form>
</body>
</html>