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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!