html WFH：开放式办公室流感爆发风险计算器

Posted 2021-05-10

WFH: Open Office Influenza Outbreak Risk Calculator
---------------------------------------------------
A calculator for open office floorplans. Based on the CDC's actual formula to determine outbreaks of Influenza and Influenza-Like Illnesses.

A [Pen](https://codepen.io/harunpehlivan/pen/aqgeWv) by [HARUN PEHLİVAN](https://codepen.io/harunpehlivan) on [CodePen](https://codepen.io).

[License](https://codepen.io/harunpehlivan/pen/aqgeWv/license).

body,
html { height: 100%; }
body { 
  min-height: 100%; 
  background-color: green;
  color: #fff;
  font-size: 2.4vw;
  padding: 1vw;
  text-align: center;
  
  main {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    
    > div {
      width: 24%;
    }
  }
}

input, span {
  text-align: center;
  font-size: 8vw;
  border: 3px solid #fff;
  border-radius: 3vw;
  padding: 10vh 0vw;
  display: block;
  max-width: 100%;
  margin-top: 1vw;
  margin-bottom: 2vw;
}

label {
}

var startColor = {
  red: 0,
  green: 128      ,
  blue: 0
};

var endColor = {
  red: 255,
  green: 0,
  blue: 0
};

var days = 5;

var calculateOutbreak = function(){
  //console.log('001: Calculating Outbreak');
    var passengers = parseInt(document.querySelector('#passengers').value);
    var cases = parseInt(document.querySelector('#cases').value);
    var numOutbreak = document.querySelector('#numOutbreak');
    var numInfected = document.querySelector('#numInfected');
    // console.log('002: Getting values', passengers, cases);
    
    // CDC Influenza/ILI Outbreak Calculator
    // https://www.cdc.gov/quarantine/cruise/reporting-deaths-illness/how-calculate-influenza-influenza-like-illness-case-outbreak-threshold-cumulative-reports.html
    var outbreakThreshold = function() {
      return (1.38*(passengers * days))/1000;
    }

    // Total percent infected
    var infectionRate = cases / passengers;
    // console.log('003: Infection Rate ', infectionRate);
    
    // Percent of outbreak contamination
    var percentFade = infectionRate/outbreakThreshold();
    numInfected.textContent = Math.floor( (cases/passengers) * 100 )+"%";
    numOutbreak.textContent = Math.floor(percentFade *100)+"%";
  
    // console.log('004: Total Outbreak Percentage ', percentFade);

    var diffRed = endColor.red - startColor.red;
    var diffGreen = endColor.green - startColor.green;
    var diffBlue = endColor.blue - startColor.blue;

    diffRed = Math.ceil((diffRed * percentFade) + startColor.red);
    diffGreen = Math.ceil((diffGreen * percentFade) + startColor.green);
    diffBlue = Math.ceil((diffBlue * percentFade) + startColor.blue);

    var rgb = 'rgb('+ diffRed + ',' + diffGreen + ',' + diffBlue + ')';
  
    // console.log('004: Setting color to ', rgb);

    document.body.style.backgroundColor = rgb;
  
};

var inputs = document.querySelectorAll('input');

for(var i=0;i<inputs.length;i++) {
  inputs[i].addEventListener('change', calculateOutbreak);
}

<h1>OPEN OFFICE INFLUENZA OUTBREAK CALCULATOR</h1>

<main>
  <div>
    <label for="cases">Total<br/>Sick</label>
    <input id="cases" type="number" value="0">
  </div>
  <div>
    <label for="passengers">Total<br/>Employees</label>
    <input id="passengers" type="number" value="30">
  </div>
  <div>
    <label for="numInfected">Percent<br/>Infected</label>
    <span id="numInfected">0%</span>
  </div>
  <div>
    <label for="numOutbreak">Outbreak Risk<br/>Threshold</label>
    <span id="numOutbreak">0%</span>
  </div>
</main>