corona_impf_tracker.php
Quell Code
<style> body{ width:100vw; display:flex; text-align:center; flex-direction:column; } table{ margin: 0 auto; border:1px solid black; width:100%; max-width:760px; overflow:scroll; } table th, table td{ border:1px solid black; border-collapse:collapse; } .deta span{ display:none; } .deta{ font-size:22px; font-weight:900; background:black; color:white; } .deta:hover span{ display:block; position:absolute; border:2px solid black; background:rgba(2,2,2,0.8); color:white; width:60vw; border-radius:10px; padding:10px; } #vaccitracker{ margin: 0 auto; display:flex; width:100%; max-width:760px; justify-content:space-around; flex-wrap:wrap; } .vacinfo{ width:30px; display:flex; justify-content:center; font-size:23px; cursor:pointer; height:30px; background:lightblue; border-radius:50%; font-weight:900; line-height:30px; } .column > div:not(.vacinfo){ font-size:26px; width:calc(100% - 30px) } .vacinfo:hover span{ display:block; position:absolute; border:2px solid black; background:rgba(0,0,0,0.8); color:white; padding:10px; border-radius:10px; } .vacinfo span{ display:none; } .column{ display:flex; } .flexcolumn{ display:flex; flex-direction:column; width:30%; border:1px solid black; border-radius:6px; padding:10px; margin:6px 50px; } </style> <body> <h1>COVID19 IMPFUNG TRACKER</h1> <div id="vaccitracker"> <div class="flexcolumn"> <label>Gesamtzahl der Kandidaten</label> <div class="column"><div id="tot"></div> <div class="vacinfo">i<span>Gesammtzahl der Impfstoffkanidaten Moment</span></div></div> </div> <div class="flexcolumn"> <label>Phase 3</label> <div class="column"><div id="pha3"></div> <div class="vacinfo">i<span>Größere Studie mit Tausende von Menschen</span></div></div> </div> <div class="flexcolumn"> <label>Phase 2/3</label> <div class="column"><div id="pha23"></div> <div class="vacinfo">i<span>Kombination aus Phase 2 und 3 </span></div></div> </div> <div class="flexcolumn"> <label>Phase 2</label> <div class="column"><div id="pha2"></div> <div class="vacinfo">i<span>Größere Studie mit Hunderte von Menschen</span></div></div> </div> <div class="flexcolumn"> <label>Phase 1/2</label> <div class="column"><div id="pha12"></div> <div class="vacinfo"> i<span>Kombination aus Phase 1 und 2 </span></div></div> </div> <div class="flexcolumn"> <label>Phase 1</label> <div class="column"><div id="pha1"></div> <div class="vacinfo">i<span>Umfasst eine kleine Gruppe von Erwachsene</span></div></div> </div> <div class="flexcolumn"> <label>Pre-clinical</label> <div class="column"><div id="pre"></div> <div class="vacinfo">i<span>Laborforschungen</span></div> </div> </div> </div> <table id="example"> <thead> <tr> <th> Kandidat</th> <th>Details</th> <th>Institutions</th> <th>Mechanismus</th> <th>Sponsors</th> <th>TrialPhase</th> </tr> </thead> <tbody id="tablein"> </tbody> </table> <script> async function getUpdate(){ var sam='<tr>'; const data = await fetch('https://disease.sh/v3/covid-19/vaccine') const json = await data.json() var menge=json.data.length; document.getElementById('tot').innerHTML=json.totalCandidates; document.getElementById('pha3').innerHTML=json.phases[0].candidates; document.getElementById('pha23').innerHTML=json.phases[1].candidates; document.getElementById('pha2').innerHTML=json.phases[2].candidates; document.getElementById('pha12').innerHTML=json.phases[3].candidates; document.getElementById('pha1').innerHTML=json.phases[4].candidates; document.getElementById('pre').innerHTML=json.phases[5].candidates; console.log(json) sam=''; for(x=0;x<json.totalCandidates;x++){ let can=json.data[x].candidate; let det=json.data[x].details; let inmenge=json.data[x].institutions.length-1; var samin='<th>'; for(y=0;y<inmenge;y++){ samin+=`${json.data[x].institutions[y]},`; } samin+='</th>'; let mec=json.data[x].mechanism; let spomenge=json.data[x].sponsors.length; let samsp='<th>'; for(y=0;y<spomenge;y++){ samsp+=`${json.data[x].sponsors[y]},`; } samsp+='</th>'; tri=json.data[x].trialPhase; sam=` <th>${can}</th> <th class="deta">i<span>${det}</span></th> ${samin} <th>${mec}</th> ${samsp} <th>${tri}</th> `; tr=document.createElement('tr'); tr.innerHTML=sam; document.getElementById('tablein').append(tr); } } getUpdate() </script> </body>
Comments