<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="./assets//images/coronavirus-logo.png">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<!-- <meta http-equiv="Content-Security-Poli cy" content="default-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *;script-src: 'sha256-xgSe9e4bUQlmSCi8bnI5e18dJWMjs4ywwBD+uK3ci/o='"> -->
<!-- s -->
<title>Coronavirus Tracker</title>
<link rel="stylesheet" type="text/css" href="./assets/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="./assets/css/shCore.css">
<link rel="stylesheet" type="text/css" href="./assets/css/demo.css">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'" />
<!-- <link rel="stylesheet" type="text/css" href="./assets/css/font.css"> -->
<!-- <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://platform.linkedin.com "> --> <script type="text/javascript" language="javascript" src="./assets/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="./assets/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="./assets/js/shCore.js"></script>
<script type="text/javascript" language="javascript" src="./assets/js/demo.js"></script>
<script type="text/javascript" language="javascript" class="init"></script>
<script src="popup.js"></script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1 class="rainbow">Coronavirus Status
<img class="coronaviruslogo" src="./assets/images/coronoavirus.png" width=45 height=45></img>
<span style="color: black;">Version 1.0.0 </span>
<span style="color: black;font-size: 14px;">© CodezTech</span>
</h1>
<div class="demo-html"></div>
<table id="coronavirustracker" class="display" style="width:100%">
<thead>
<tr>
<th>Country</th>
<th>Cases</th>
<th>Deaths</th>
<th>Total recovered</th>
<th>New deaths</th>
<th>New cases</th>
<th>Serious critical</th>
<th>Active cases</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Country</th>
<th>Cases</th>
<th>Deaths</th>
<th>Total recovered</th>
<th>New deaths</th>
<th>New cases</th>
<th>Serious critical</th>
<th>Active cases</th>
</tr>
</tfoot>
</table>
</section>
</div>
</body>
<script type="text/javascript" language="javascript">
var myTable;
function bindItemTable() {
myTable = $("#coronavirustracker").DataTable({
"deferRender": true,
"searching": true,
"destroy": true,
"filter": true,
"scrollY": 200,
"scrollCollapse": true,
"scroller": true,
"paging": false,
"lengthChange": false,
"ordering": true,
"order": [[ 1, "desc" ]],
"info": true,
"autoWidth": false,
"sDom": 'lfrtip'
});
}
function getCoronavirusstatus() {
$.ajax({
headers: {
'x-rapidapi-key':'558acf6479msh41736090b530a08p18f404jsnf5d9b34714dc',
'Content-Type':'application/json'
},
method: "GET",
dataType: 'json',
crossDomain: true,
success:function(data) {
console.log(data);
var jsonObject = data.countries_stat;
var result = jsonObject.map(function (item) {
var result = [];
result.push(item.country_name);
result.push(item.cases);
result.push(item.deaths);
result.push(item.total_recovered);
result.push(item.new_deaths);
result.push(item.new_cases);
result.push(item.serious_critical);
result.push(item.active_cases);
result.push("");
return result;
});
myTable.clear();
myTable.rows.add(result);
myTable.draw();
},failure: function () {
$("#coronavirustracker").append(" Error when fetching data please contact administrator");
}
});
}
$(function(){
bindItemTable();
getCoronavirusstatus();
setInterval(()=>{
bindItemTable();
getCoronavirusstatus();
},15000)
})
</script>
</html>