Corona zahlen
Mit der API kann man ganz einfach die Coronazahlen weltweit abfragen
Der hier verwendete Code
<!doctype html>
<html lang="de"><head>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
font-family: monospace;
}
body {
background: #252423;
overflow:scroll
}
.preloader {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
background-color: #181818;
z-index: 999;
visibility: visible;
overflow: hidden;
pointer-events: none;
user-select: none;
cursor: default;
-webkit-tap-highlight-color: transparent;
-webkit-user-drag: none;
}
.preloader--hidden {
animation-name: hide;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-direction: normal;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.preloader__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
}
.preloader__loader {
margin: 0 auto;
width: 70px;
height: 70px;
border: 8px solid #f0f0f0;
border-top: 8px solid #696969;
border-radius: 50%;
animation: spin 2s linear infinite;
}
.preloader__txt {
padding: 10px;
color: #f0f0f0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #f0f0f0;
}
@media screen and (max-width: 576px) {
.container {
display: block;
}
}
.container .statistics {
margin: 15px;
position: relative;
width:100%;
}
.container .statistics .global {
position: relative;
}
.container .statistics .global__title {
margin: 15px 0;
text-transform: uppercase;
font-size: xx-large;
font-weight: bold;
}
.container .statistics .global__cases {
margin: 15px 15px 0 0;
display: inline-block;
}
@media screen and (max-width: 576px) {
.container .statistics .global__cases {
display: block;
}
}
.container .statistics .global__cases h1 {
color: #eff318;
}
.container .statistics .global__recovered {
margin: 15px 15px 0 0;
display: inline-block;
}
@media screen and (max-width: 576px) {
.container .statistics .global__recovered {
display: block;
}
}
.container .statistics .global__recovered h1 {
color: #9c9;
}
.container .statistics .global__deaths {
margin: 15px 15px 0 0;
display: inline-block;
}
@media screen and (max-width: 576px) {
.container .statistics .global__deaths {
display: block;
}
}
.container .statistics .global__deaths h1 {
color: #fb5e53;
}
.container .statistics > input[type="text"] {
margin: 15px 0;
width: 200px;
display: inline-block;
background-color: #181818;
color: #f0f0f0;
padding: 9px 15px;
font-size: 18px;
border: 1px solid #696969;
}
@media screen and (max-width: 576px) {
.container .statistics > input[type="text"] {
display: block;
}
}
.container .statistics > .custom-select {
margin: 15px 0;
width: 200px;
display: inline-block;
background-color: #181818;
color: #f0f0f0;
padding: 9px 15px;
font-size: 18px;
border: 1px solid #696969;
}
@media screen and (max-width: 576px) {
.container .statistics > .custom-select {
display: block;
}
}
.container .statistics .table {
border-collapse: collapse;
width: 100%;
min-width: 320px;
}
@media screen and (max-width: 576px) {
.container .statistics .table thead,
.container .statistics .table tbody,
.container .statistics .table th,
.container .statistics .table td,
.container .statistics .table tr {
display: block;
}
}
.container .statistics .table > thead {
background-color: #181818;
}
@media screen and (max-width: 576px) {
.container .statistics .table > thead {
display: none;
}
}
.container .statistics .table > thead > tr > th {
text-align: left;
font-size: 22px;
}
.container .statistics .table > thead > tr > th:not(:first-child) {
text-align: right;
}
@media screen and (max-width: 576px) {
.container .statistics .table td:nth-of-type(1)::before {
content: "Country";
}
.container .statistics .table td:nth-of-type(2)::before {
content: "Cases";
}
.container .statistics .table td:nth-of-type(3)::before {
content: "Deaths";
}
.container .statistics .table td:nth-of-type(4)::before {
content: "Recovered";
}
}
.container .statistics .table th,
.container .statistics .table td {
border: 1px solid #696969;
padding: 9px 15px;
white-space: nowrap;
}
.container .statistics .table > tbody > tr > td {
font-size: 18px;
}
.container .statistics .table > tbody > tr > td img {
width: 24px;
vertical-align: baseline;
margin-right: 10px;
}
@media screen and (max-width: 576px) {
.container .statistics .table > tbody > tr > td {
position: relative;
text-align: right;
}
.container .statistics .table > tbody > tr > td:first-child {
background-color: #181818;
padding-left: 100px;
white-space: normal;
}
.container .statistics .table > tbody > tr > td::before {
position: absolute;
top: 0;
left: 0;
padding: 9px 15px;
white-space: nowrap;
}
}
.container .statistics .table > tbody > tr > td:not(:first-child) {
text-align: right;
}
.container .statistics .hidden {
display: none !important;
}
.container .arrow {
position: fixed;
right: 0;
bottom: 0;
}
.container .arrow__up {
position: relative;
cursor: pointer;
background-color: rgba(155, 155, 155, 0.5);
width: 40px;
height: 40px;
border-radius: 5px;
margin: 0 25px 3px 0;
}
.container .arrow__up::before {
content: "";
position: absolute;
border-top: solid 4px #f0f0f0;
border-right: solid 4px #f0f0f0;
width: 16px;
height: 16px;
left: 10px;
top: 14px;
transform: rotate(-45deg);
}
.container .arrow__down {
position: relative;
cursor: pointer;
background-color: rgba(155, 155, 155, 0.5);
width: 40px;
height: 40px;
border-radius: 5px;
margin: 0 25px 25px 0;
}
.container .arrow__down::before {
content: "";
position: absolute;
border-top: solid 4px #f0f0f0;
border-right: solid 4px #f0f0f0;
width: 16px;
height: 16px;
left: 10px;
bottom: 14px;
transform: rotate(135deg);
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
@keyframes hide {
0% {
opacity: 1;
visibility: visible;
}
99% {
opacity: 0;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
.corana_tipp:hover div{
display:block;
}
.corana_tipp div{
position:absolute;
display:none;
width:150px;
height:100px;
border-radius:10px;
background:black;
color:white;
padding:5px 10px;
border:1px solid white;
}
.tipp_fett{
font-weight:900;
}
.fertig{
font-weight:900;
color:green;
}
</style>
</head>
<body>
<div class="preloader">
<div class="preloader__content">
<div class="preloader__loader"></div>
<div class="preloader__txt">Loading ...</div>
</div>
</div>
<div class="container">
<div class="statistics">
<div class="global">
<div class="global__title">
corona virus disease 19 (covid-19)
</div>
<div class="global__cases">
<h1></h1>
<h2>Total Cases</h2>
</div>
<div class="global__deaths">
<h1></h1>
<h2>Total Deaths</h2>
</div>
<div class="global__recovered">
<h1></h1>
<h2>Total Recovered</h2>
</div>
</div>
<input type="text" id="search" name="country" placeholder="Search Countries">
<select class="custom-select" id="select" onchange="changeOrder()">
<option selected="" disabled="">Sort By</option>
<option value="cases">Total Cases</option>
<option value="deaths">Total Deaths</option>
<option value="recovered">Total Recoveries</option>
</select>
<table class="table">
<thead>
<tr>
<th>Country</th>
<th>Infizierte</th>
<th>Gestorben</th>
<th>Geheilt</th>
<th>Letztes Update</th>
<!--
<th>countryInfo
<td>_id</td>
<td>iso2</td>
<td>iso3</td>
<td>lat</td>
<td>long</td>
<td>flag</td>
</th>
-->
<th>todayCases</th>
<th>todayDeaths</th>
<th>todayRecovered</th>
<th>active</th>
<th>critical</th>
<th>casesPerOneMillion</th>
<th>deathsPerOneMillion</th>
<th>tests</th>
<th>testsPerOneMillion</th>
<th>population</th>
<th>continent</th>
<th>oneCasePerPeople</th>
<th>oneDeathPerPeople</th>
<th>oneTestPerPeople</th>
<th>activePerOneMillion</th>
<th>recoveredPerOneMillion</th>
<th>criticalPerOneMillion </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="arrow">
<div class="arrow__up">
</div>
<div class="arrow__down">
</div>
</div>
</div>
<script>
// Add a request interceptor
axios.interceptors.request.use(
function (config) {
//console.log("request sent", new Date());
return config;
},
function (error) {
preloader.classList.add("preloader--hidden");
alert(error);
return Promise.reject(error);
}
);
var preloader = document.querySelector(".preloader");
// Add a response interceptor
axios.interceptors.response.use(
function (response) {
preloader.classList.add("preloader--hidden");
return response;
},
function (error) {
preloader.classList.add("preloader--hidden");
alert(error);
return Promise.reject(error);
}
);
function getGlobalData() {
return axios.get("https://corona.lmao.ninja/v2/all");
}
function getCountriesData() {
return axios.get("https://corona.lmao.ninja/v2/countries");
}
axios
.all([getGlobalData(), getCountriesData()])
.then(
axios.spread(function (global, countries) {
//global
console.log("%c全球 Global", "color: #fb5e53");
console.log("確診 Cases", global.data.cases);
console.log("死亡 Deaths", global.data.deaths);
console.log("康復 Recovered", global.data.recovered);
var totalCases = global.data.cases.toLocaleString();
var totalDeaths = global.data.deaths.toLocaleString();
var totalRecovered = global.data.recovered.toLocaleString();
document.getElementsByClassName(
"global__cases"
)[0].childNodes[1].innerHTML = totalCases;
document.getElementsByClassName(
"global__recovered"
)[0].childNodes[1].innerHTML = totalRecovered;
document.getElementsByClassName(
"global__deaths"
)[0].childNodes[1].innerHTML = totalDeaths;
//countries
const tbody = document.getElementsByTagName("tbody")[0];
var countries = countries.data;
countries.forEach(function (element, index, array) {
const tr = document.createElement("tr");
// 國旗 flag
const img = document.createElement("img");
country_id=element.countryInfo._id,
land_kuerzel=element.countryInfo.iso2,
iso3=element.countryInfo.iso3,
lat=element.countryInfo.lat,
long=element.countryInfo.long,
flagg=element.countryInfo.flag,
img.src = element.countryInfo.flag;
img.alt = element.countryInfo.iso2;
prozentual=100-element.active/(element.cases/100);
prozent_land=100-element.cases/(element.population/100); img.setAttribute("title", element.countryInfo.iso2);
if(prozentual.toFixed(0)>=100){
var color='fertig';
}else{
var color='tipp_fett';
}
if(prozentual.toFixed(0)>91){
var color='fast_fertig';
}else{
var color='tipp_fett';
}
var values = [
element.country,
`${element.cases}<span class='corana_tipp'>[?]<div>
${element.country} <br>ist zu<br><span class='${color}'> ${prozentual.toFixed(3)}% </span> <br> Corona frei.</div>
</span>`,
element.deaths,
element.recovered,
element.updated,
element.todayCases,
element.todayDeaths,
element.todayRecovered,
element.active,
element.critical,
element.casesPerOneMillion,
element.deathsPerOneMillion,
element.tests,
element.testsPerOneMillion,
element.population,
element.continent,
element.oneCasePerPeople,
element.oneDeathPerPeople,
element.oneTestPerPeople,
element.activePerOneMillion,
element.recoveredPerOneMillion,
element.criticalPerOneMillion
];
values.forEach(function (element, index, array) {
const td = document.createElement("td");
element =
validation.isNumber(element) === "NaN"
? element
: element.toLocaleString();
if (!index) {
let text = document.createTextNode(element);
td.appendChild(img);
td.appendChild(text);
} else {
td.innerHTML = element;
}
tr.appendChild(td);
});
tbody.appendChild(tr);
});
})
)
.catch(function (error) {
console.log(error);
});
var validation = {
isNumber: function (str) {
// /^\d+$/g is equal to /^[0-9]+$/g;
var patt = /^\d+$/g;
return patt.test(str);
}
};
var search = document.getElementById("search");
search.addEventListener("keyup", function () {
var value = this.value.toLowerCase();
console.log("value", value);
const rows = document.querySelectorAll("tbody tr");
const rowsArray = Array.prototype.slice.call(rows);
rowsArray.forEach(function (element, index, array) {
var tdCountry = element.childNodes[0].innerHTML.toLowerCase();
if (tdCountry.indexOf(value) > -1) {
//console.log(tdCountry, tdCountry.indexOf(value));
element.classList.remove("hidden");
} else {
element.classList.add("hidden");
}
});
});
function changeOrder() {
const value = document.getElementById("select").value;
const index = document.getElementById("select").selectedIndex;
//console.log(value, index);
const rows = document.querySelectorAll("tbody tr");
const rowsArray = Array.prototype.slice.call(rows);
rowsArray
.sort(function (A, B) {
var num1 = A.childNodes[index].innerHTML;
num1 = num1.replace(",", "");
var num2 = B.childNodes[index].innerHTML;
num2 = num2.replace(",", "");
return num2 - num1;
})
.forEach(function (tr) {
tr.parentElement.appendChild(tr);
});
//console.log(rowsArray);
}
document.querySelector(".arrow__up").addEventListener("click", function () {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
document.querySelector(".arrow__down").addEventListener("click", function () {
window.scrollTo({
top: document.body.scrollHeight,
behavior: "smooth"
});
});
</script>
</body>
</html>
Comments