Meine Codepens ,My Codepens ,COVID19 CORONA IMPFUNG TRACKER

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>