Coronavirus Tracker Script (Example)
-
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 ); } );