Corona neuinfektion
Zeigt die aktuellen Neuinfektion von Deutschland und der ganzen Welt an.
Nach fast 3 Jahren Corona übermittelt nicht jeder mehr neu Infektionszahlen.Es könnten einige Länder da stehen ohne neue Daten
Der hier verwendete Code
<!doctype html>
<html lang="de">
<head>
<script src="/js_webseite/jquery.js"></script>
<style>
#pandemiebox{
width:97%;
max-width:900px;
display:flex;
flex-direction:column;
border:1px solid black;
background:#123456;
color:white;
}
#pandemiebox h2{
margin:4px;
padding:5px;
}
#pandemiebox h2 #coinfo{
color:red;
font-size:18px;
font-weight:900;
margin-left:20px;
}
#pandemiekurz{
display:flex;
}
#pandemiekurz div{
flex:1;
border:1px solid grey;
padding:10px;
}
#pandemiekurz div h5{
margin:5px 0 0 0;
padding:5px 0 0 0;
font-size:20px;
text-decoration:underline;
}
#lander{
width:95%;
margin:0 auto;
border:1px solid black;
}
#lander td,
#lander th{
border:1px solid black;
}
#lander th{
background:rgba(0,0,0,0.7);
}
#mehrcorona{
display:none;
}
#pandemiebox label{
cursor:pointer;
}
#pandemiebox label:hover{
color:blue;
}
#mehrcorona:checked ~ #lander{
display:block;
}
#mehrcorona:checked ~ label{
background:green;
color:white;
padding:5px 15px;
margin:3px;
}
#mehrcorona ~ label{
padding:5px 15px;
margin:3px;
border:1px solid black;
}
#lander{
display:none;
}
</style>
</head>
<body>
<div id="pandemiebox">
<h2>Corona Zahlen<span id="coinfo">Stark steigend</span></h2>
<div id="pandemiekurz">
<div id="weltweit"></div>
<div id="germany"></div>
</div>
<input type="checkbox" id="mehrcorona">
<label for="mehrcorona">Complette Liste Weltweit</label>
<table id="lander"></table>
</div>
<script>
$.ajax({
type: 'GET',
url:'https://api.covid19api.com/summary',
//data: {link:link,punkte:ggg},
success: function(data){
let welt=`
<h5>Weltweit</h5>
<span class="wascor">Neuinfektionen </span>
<span class="ergebcoron">${data.Global.NewConfirmed}</span><br>
<span class="wascor">Verstorben</span>
<span class="ergebcoron"> ${data.Global.NewDeaths}</span><br>
<span class="wascor">Geheilt</span>
<span class="ergebcoron"> ${data.Global.NewRecovered}</span>
<h5>Seid Pandemie beginn</h5>
<span class="wascor">Infizierte</span>
<span class="ergebcoron"> ${data.Global.TotalConfirmed}</span><br>
<span class="wascor">Verstorbene</span>
<span class="ergebcoron"> ${data.Global.TotalDeaths}</span><br>
<span class="wascor">Geheilte</span>
<span class="ergebcoron"> ${data.Global.TotalRecovered}</span>`;
document.getElementById('weltweit').innerHTML=welt;
land=`<tr><th>Land</th><th>Update</th><th>Neu Infektionen</th><th>Neu verstorben</th><th>Neu Geheilt</th><th>Gesamt infektionen</th><th>Gesammt verstorben</th><th>Gesammt Infektionen</th></tr>`;
for(z=0;z<data.Countries.length;z++){
l=data.Countries[z];
datum=l.Date.split('-');
time=datum[2].split('T');
Uhrzeit=time[1].split('Z');
ne=time[0]+'-'+datum[1]+'-'+datum[0]+' '+Uhrzeit[0];
lands=`<tr>
<td>${l.Country}</td>
<td>${ne}</td>
<td>${l.NewConfirmed}</td>
<td>${l.NewDeaths}</td>
<td>${l.NewRecovered}</td>
<td>${l.TotalConfirmed}</td>
<td>${l.TotalDeaths}</td>
<td>${l.TotalRecovered}</td>
</tr>`;
land+=lands;
if(l.Country=='Germany'){
let germ=`
<h5>Deutschland</h5>
<span class="wascor">Neuinfektionen</span>
<span class="ergebcoron">${l.NewConfirmed}</span><br>
<span class="wascor">Verstorben</span>
<span class="ergebcoron">${l.NewDeaths}</span><br>
<span class="wascor">Geheilt</span>
<span class="ergebcoron">${l.NewRecovered}</span>
<h5>Seid Pandemie beginn</h5>
<span class="wascor">Infizierte</span> <span class="ergebcoron">${l.TotalConfirmed}</span><br>
<span class="wascor">Verstorbene</span> <span class="ergebcoron">${l.TotalDeaths}</span><br>
<span class="wascor">Geheilte</span>
<span class="ergebcoron">${l.TotalRecovered}</span>`;
document.getElementById('germany').innerHTML=germ;
}
}
document.getElementById('lander').innerHTML=land;
}
});
</script>
</body>
</html>