Coronavirus Tracker HTML/JS example:
- coronavirus-dashboard.html
<!DOCTYPE html>
<html lang=en>
<head>
<title>Coronavirus App Example</title>
<link href="https://quarantine.country/public/assets/css/bootstrap.min.css" rel="stylesheet">
<link href="https://quarantine.country/public/assets/css/covid-19-demo.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4 pt-4">
<div class="row">
<div class="col-10 offset-1">
<div class="card">
<div class="card-header">
COVID-19 App Demo
</div>
<div class="card-body">
<h2 class="display-6">Coronavirus Cases in <span data-var-placeholder="country"></span></h2>
<p class="small text-muted">LIVE UPDATE</p>
<div class="data">
<!--total cases-->
<div class="d-inline qc_data-cases qc_data-cases-all">
<button class="btn btn-danger fixwidth">
<strong data-country-placeholder="total_cases">0</strong>
</button>
</div>
<div class="d-inline qc_data-cases qc_data-cases-text pl-1 pl-sm-2">
<span class="text-muted small">Confirmed cases in the
<span data-var-placeholder="country"></span>
</span>
</div>
<hr />
<!--active-->
<div class="d-inline qc_data-cases qc_data-cases-all">
<button class="btn btn-warning fixwidth">
<strong data-country-placeholder="active_cases">0</strong>
</button>
</div>
<div class="d-inline qc_data-cases qc_data-cases-text pl-1 pl-sm-2">
<span class="text-muted small">Active cases in the
<span data-var-placeholder="country"></span>
</span>
</div>
<hr />
<!--recovered-->
<div class="d-inline qc_data-cases qc_data-cases-all">
<button class="btn btn-success fixwidth">
<strong data-country-placeholder="recovered">0</strong>
</button>
</div>
<div class="d-inline qc_data-cases qc_data-cases-text pl-1 pl-sm-2">
<span class="text-muted small">Recoveding cases in the
<span data-var-placeholder="country"></span>
</span>
</div>
<hr />
<!--deaths-->
<div class="d-inline qc_data-cases qc_data-cases-all">
<button class="btn btn-secondary fixwidth">
<strong data-country-placeholder="deaths">0</strong>
</button>
</div>
<div class="d-inline qc_data-cases qc_data-cases-text pl-1 pl-sm-2">
<span class="text-muted small">Death cases in the
<span data-var-placeholder="country"></span>
</span>
</div>
<hr />
</div>
</div>
<div class="card-footer text-muted small">
❯ More demos at <a class="text-muted" href="https://quarantine.country">Coronavirus Dashboard</a> ⚙ Build even more with <a class="text-muted" href="https://github.com/Yatko/Coronavirus-API">Coronavirus API</a>
</div>
</div>
<!--/card-->
</div>
</div>
</div>
<script src="tracker.js" type="text/javascript"></script>
</body>
</html>
- tracker.js
/*
Available Spots and Summary:
Total Cases, Active Cases, Deaths, Recovered, Tested, Critical, Change Ratio %, Summary
Historical data:
Day, Week, Month, Year, Change per Day, Difference, Summary
Regions:
World, Regions and Countries
Read documentation for more functionality - https://rapidapi.com/Yatko/api/coronavirus-live
See all available countries - https://api.quarantine.country/api/v1/summary/latest
*/
var countryFeedKey = 'usa'; //try china, spain, italy, etc.
var countryName = 'USA'; //try 中国, España, Italia, etc.
function ready(cb) {
if( document.readyState !== 'loading' ) {
cb();
} else {
document.addEventListener('DOMContentLoaded', function () {
cb();
});
}
}
function fetchData(url) {
return fetch(url)
.then(function(response) {
if(response.ok) {
return response.json();
}
})
.then(function(payload) {
return payload['data'] || {};
});
}
function formatNumber(number, precision, separate, separator, comma) {
if(!number) {
return '';
}
var re = '\\d(?=(\\d{' + (separate || 3) + '})+' + (precision > 0 ? '\\D' : '$') + ')',
num = number.toFixed(Math.max(0, ~~precision));
return (coma ? num.replace('.', comma) : num).replace(new RegExp(re, 'g'), '$&' + (separator || ','));
};
function fillPlaceholders(data) {
var i;
var varEl = document.querySelectorAll('[data-var-placeholder]');
for(i = 0; i < varEl.length; i++) {
var placeholder = varEl[i].getAttribute('data-var-placeholder');
if(placeholder && placeholder != '') {
switch(placeholder) {
case 'country':
varEl[i].innerText = countryName;
break;
}
}
}
var countryPlaceholderEl = document.querySelectorAll('[data-country-placeholder]');
for(i = 0; i < countryPlaceholderEl.length; i++) {
var placeholder = countryPlaceholderEl[i].getAttribute('data-country-placeholder');
if(placeholder && placeholder != '' && data['summary'][placeholder]) {
countryPlaceholderEl[i].innerText = parseInt(data['summary'][placeholder]).toLocaleString();
}
}
}
ready(
function() {
var url = 'https://api.quarantine.country/api/v1/summary/region?region=' + countryFeedKey;
fetchData(url)
.then(fillPlaceholders);
setInterval(
function() {
fetchData(url)
.then(fillPlaceholders);
},
10000
);
}
);
