Skip to content

Instantly share code, notes, and snippets.

@Yatko

Yatko/dabblet.css

Created April 18, 2020 13:03
Show Gist options
  • Save Yatko/37392e15f1f14dfa8773c3fb202c267c to your computer and use it in GitHub Desktop.
Save Yatko/37392e15f1f14dfa8773c3fb202c267c to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
.fixwidth {min-width: 10rem;}
Raw
dabblet.html
<!DOCTYPE html>
<html lang=en>
<head>
<title>Coronavirus App Example</title>
<link href="https://quarantine.country/assets/bootstrap.min.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>
</div>
<hr />
<!--active-->
<div class="d-inline qc_data-cases qc_data-cases-all">
<button class="btn btn-warning fixwidth">
<strong>
<span data-country-placeholder="active_cases">0</span>
</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><span data-country-placeholder="deaths">0</span></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>
</div>
</div>
</div>
<div class="card-footer text-muted small">
&#9881; Build more with the <a class="text-muted" href="https://github.com/Yatko/Coronavirus-API">Coronavirus API</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
dabblet.js
/*
Available Spots and Summary:
Total Cases, Active Cases, Deaths, Recovered, 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 placeholderEl = document.querySelectorAll('[data-placeholder]');
// for(i = 0; i < placeholderEl.length; i++) {
// var placeholder = placeholderEl[i].getAttribute('data-placeholder');
// if(placeholder && placeholder != '' && data['summary'][placeholder]) {
// placeholderEl[i].innerText = parseInt(data['summary'][placeholder]).toLocaleString();
// }
// }
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
);
}
);
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment