Meine Codepens

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 (1)

New

slope unblockedsays...

To play Slope Unblocked , open your web browser and search for the game or visit a site offering unblocked games. Click to start, and use the left and right arrow keys to steer the ball down an endless, neon-lit slope. Your objective is to navigate the ball, avoiding obstacles and edges while maintaining control as the speed increases. The game tests your reflexes and precision, requiring quick reactions to survive as long as possible. With its simple controls and progressively challenging game play, Slope Unblocked provides an engaging and exciting experience. Try to beat your high score with each run!

corona_impf_tracker.php

Quell Code

Add Comment

Comments (1)