Link: https://zachary-schroeder.com/covid/

Code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Covid Delta</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>


  </head>
  <body>

      <h1 id="state">Loading</h1>
      <h1 id="totalPopulation">Population: <span id="population">Loading</span></h1>
    <div class="gridCenterState">
      <h1>New Cases <br><span id="newCases">Loading</span></h1>
      <h1>New Deaths <br><span id="newDeaths">Loading</span></h1>
      <h1>Total Cases <br><span id="cases">Loading</span></h1>
      <h1>Total Deaths <br><span id="deaths">Loading</span></h1>  
    </div>

    <br>
    <h1 id="hospitalBeds">Hospital Beds</h1>
    <div class="gridCenterHospital">
      
        <h1>Capacity <br><span id="capacity">Loading</span></h1>
        <h1>Current Usage Total <br><span id="currentUsageTotal">Loading</span></h1>
        <h1>Current Usage Covid <br><span id="currentUsageCovid">Loading</span></h1>
    </div>
    <h1 id="hospitalICU">ICU Beds</h1>
      <div class="grid-item">
        <h1>Capacity <br><span id="currentUsageCapacity">Loading</span></h1>
        <h1>Current Usage Total <br><span id="currentUsagetotal">Loading</span></h1>
        <h1>Current Usage Covid <br><span id="currentUsageCovidICU">Loading</span></h1>
      </div>
    
    
    <br>
    <h1 id="vaccines">Vaccines</h1>
    <div class="vaccinesGrid">
      <h1>Distributed <br><span id="vaccinesDistributed">Loading</span></h1>
      <h1>Initiated <br><span id="vaccinesInitiated">Loading</span></h1>
      <h1>Completed <br><span id="vaccinationsCompleted">Loading</span></h1>
      <h1>Administered <br><span id="vaccinesAdministered">Loading</span></h1>
    </div>
  <br>
   <h1 id="prediction">Prediction</h1>
    <div class="monthlyPrediction">
      <h1>September <br><span id="septemberPrediction">Loading</span></h1>
      <h1>October <br><span id="octoberPrediction">Loading</span></h1>
      <h1>November <br><span id="novemberPrediction">Loading</span></h1>
      <h1>December <br><span id="decemberPrediction">Loading</span></h1>

    </div>
<style></style>
    <script src="script.js"></script>
  </body>
</html>
html{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.box{
  background-color: rgba(92, 92, 92, 0.301);
  position: fixed;
  border-radius: 50%;
}
#state{
  text-align: center;
  font-size: 800%;
  margin: 1px;
}
#totalPopulation{
  text-align: center;
  font-size: 125%;
  margin: -10px 0 10px 0;
}
.gridCenterState{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  text-align: center;
}

.gridCenterHospital{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  text-align: center;
}
.grid-item {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  text-align: center;
}

#hospitalBeds{
  text-align: center;
  font-size: 400%;
  margin: 30px 0 0 0;
}

#hospitalICU{
  text-align: center;
  font-size: 400%;
  margin: 50px 0 0 0;
}

#vaccines{
  text-align: center;
  font-size: 400%;
  margin: 30px 0 0 0;
}

.vaccinesGrid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  text-align: center;
}

#prediction{
  text-align: center;
  font-size: 400%;
  margin: 40px 0 0 0;
}
.monthlyPrediction{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  text-align: center;
}
const api_url = 'https://api.covidactnow.org/v2/states.json?apiKey=42958023f02f479e95f7cb5805b17cf8'

var statesDictionary = {AZ: 'Arizona',
AL: 'Alabama',
AK: 'Alaska',
AR: 'Arkansas',
CA: 'California',
CO: 'Colorado',
CT: 'Connecticut',
DC: 'District of Columbia',
DE: 'Delaware',
FL: 'Florida',
GA: 'Georgia',
HI: 'Hawaii',
ID: 'Idaho',
IL: 'Illinois',
IN: 'Indiana',
IA: 'Iowa',
KS: 'Kansas',
KY: 'Kentucky',
LA: 'Louisiana',
ME: 'Maine',
MD: 'Maryland',
MA: 'Massachusetts',
MI: 'Michigan',
MN: 'Minnesota',
MS: 'Mississippi',
MO: 'Missouri',
MT: 'Montana',
NE: 'Nebraska',
NV: 'Nevada',
NH: 'New Hampshire',
NJ: 'New Jersey',
NM: 'New Mexico',
NY: 'New York',
NC: 'North Carolina',
ND: 'North Dakota',
OH: 'Ohio',
OK: 'Oklahoma',
OR: 'Oregon',
PA: 'Pennsylvania',
RI: 'Rhode Island',
SC: 'South Carolina',
SD: 'South Dakota',
TN: 'Tennessee',
TX: 'Texas',
UT: 'Utah',
VT: 'Vermont',
VA: 'Virginia',
WA: 'Washington',
WV: 'West Virginia',
WI: 'Wisconsin',
WY: 'Wyoming'};

const state = document.getElementById('state');
const population = document.getElementById('population');
const cases = document.getElementById('cases');
const deaths = document.getElementById('deaths');
const capacity = document.getElementById('capacity');
const currentUsageTotal = document.getElementById('currentUsageTotal');
const currentUsageCovid = document.getElementById('currentUsageCovid');
const currentUsageCapacity = document.getElementById('currentUsageCapacity');
const currentUsagetotal = document.getElementById('currentUsagetotal');
const currentUsageCovidICU = document.getElementById('currentUsageCovidICU');
const newCases = document.getElementById('newCases');
const newDeaths = document.getElementById('newDeaths');
const vaccinesDistributed = document.getElementById('vaccinesDistributed');
const vaccinesInitiated = document.getElementById('vaccinesInitiated');
const vaccinesAdministered = document.getElementById('vaccinesAdministered');


const septemberPrediction = document.getElementById('septemberPrediction');
const octoberPrediction = document.getElementById('octoberPrediction');
const novemberPrediction = document.getElementById('novemberPrediction');
const decemberPrediction = document.getElementById('decemberPrediction');

n = 43

async function getCovid(){
  const response = await fetch(api_url);
  const data = await response.json();

  state.innerText = statesDictionary[String(data[n].state)];
  population.innerText = data[n].population.toLocaleString('en-US');
  cases.innerText = data[n].actuals.cases.toLocaleString('en-US');
  deaths.innerText = data[n].actuals.deaths.toLocaleString('en-US');

  capacity.innerText = data[n].actuals.hospitalBeds.capacity.toLocaleString('en-US');
  currentUsageTotal.innerText = data[n].actuals.hospitalBeds.currentUsageTotal.toLocaleString('en-US');
  currentUsageCovid.innerText = data[n].actuals.hospitalBeds.currentUsageCovid.toLocaleString('en-US');

  currentUsageCapacity.innerText = data[n].actuals.icuBeds.capacity.toLocaleString('en-US');
  currentUsagetotal.innerText = data[n].actuals.icuBeds.currentUsageTotal.toLocaleString('en-US');
  currentUsageCovidICU.innerText = data[n].actuals.icuBeds.currentUsageCovid.toLocaleString('en-US');

  newCases.innerText = data[n].actuals.newCases.toLocaleString('en-US');
  newDeaths.innerText = data[n].actuals.newDeaths.toLocaleString('en-US');

  vaccinesDistributed.innerText = data[n].actuals.vaccinesDistributed.toLocaleString('en-US');
  vaccinesInitiated.innerText = data[n].actuals.vaccinationsInitiated.toLocaleString('en-US');
  vaccinationsCompleted.innerText = data[n].actuals.vaccinationsCompleted.toLocaleString('en-US');
  vaccinesAdministered.innerText = data[n].actuals.vaccinesAdministered.toLocaleString('en-US');



  const pSpread = 1.064;
  //const cCases = data[n].actuals.newCases;
  const cCases = 376

  septemberPrediction.innerText = Math.ceil((pSpread)**60*cCases).toLocaleString('en-US');
  octoberPrediction.innerText = Math.ceil((pSpread)**90*cCases).toLocaleString('en-US');
  novemberPrediction.innerText = Math.ceil((1.05)**120*cCases).toLocaleString('en-US');
  decemberPrediction.innerText = Math.ceil((1.045)**150*cCases).toLocaleString('en-US');





  console.log('State: ' + data[n].state);
  console.log('Population: ' + data[n].population);
//  console.log(data[n].actuals);
  console.log('Cases: ' + data[n].actuals.cases);
  console.log('Deaths: ' + data[n].actuals.deaths);
  console.log('Hospital Beds:');
  console.log('Capacity: ' + data[n].actuals.hospitalBeds.capacity);
  console.log('Current Usage Total: ' + data[n].actuals.hospitalBeds.currentUsageTotal);
  console.log('Current Usage Covid: ' + data[n].actuals.hospitalBeds.currentUsageCovid);
  console.log('ICU Beds:');
  console.log('Current Usage Capacity: ' + data[n].actuals.icuBeds.capacity);
  console.log('Current Usage Total: ' + data[n].actuals.icuBeds.currentUsageTotal);
  console.log('Current Usage Covid: ' + data[n].actuals.icuBeds.currentUsageCovid);
  console.log('New Cases: ' + data[n].actuals.newCases);
  console.log('New Deaths: ' + data[n].actuals.newDeaths);

  console.log('Vaccines Distributed: ' + data[n].actuals.vaccinesDistributed);
  console.log('Vaccinations Initiated: ' + data[n].actuals.vaccinationsInitiated);
  console.log('Vaccinations Completed: ' + data[n].actuals.vaccinationsCompleted);
  console.log('Vaccines Administered: ' + data[n].actuals.vaccinesAdministered);





//Dots for number of new deaths
$(document).ready(function(){
  
  function freshDot(){
    this.obj = document.createElement("div");
    this.obj.classList.add("box");
    this.obj.style.top = (window.innerHeight * Math.random()) + 'px';
    this.obj.style.left = (window.innerWidth * Math.random()) + 'px';
    this.size = Math.floor(5 * Math.random()) + 7;
    this.obj.style.height =  this.size + 'px';
    this.obj.style.width = this.size + 'px';
    
    document.body.appendChild(this.obj);
  }
  var dot = [];
  for(var i = 0 ; i < data[n].actuals.newDeaths; i++ ){
    dot.push(new freshDot());
  }
  /*
  $(window).resize(function(){
    for(i=0;i<200;i++){
      document.body.removeChild(dot[i]);
    }
  });
  */
});
}
getCovid()

Similar Posts