<form oninput="
var batteryLifepanBeforeValue = Number(batteryLifeSpanBefore.value)
var likelyhoodValue = Number(likelyhood.value) / 100
var builtInEmissionsValue = Number(builtInEmissions.value)
var energySavedValue = Number(energySaved.value)
var strengthValue = Number(strength.value)
var numberValue = Number(number.value)
var likelyhoodBefore = 1 - (1 - likelyhoodValue) ** batteryLifepanBeforeValue
var lifespanBefore = batteryLifepanBeforeValue * likelyhoodBefore
var carbonIntensityBefore = builtInEmissionsValue / lifespanBefore
var batteryLifespanAfter = batteryLifepanBeforeValue + (batteryLifepanBeforeValue * energySavedValue / 100) * (strengthValue / 100)
var likelyhoodAfter = 1 - (1 - likelyhoodValue) ** batteryLifespanAfter
var lifespanAfter = batteryLifespanAfter * likelyhoodAfter
var carbonIntensityAfter = builtInEmissionsValue / lifespanAfter
var savedCarbonPerDevice = carbonIntensityBefore - carbonIntensityAfter
var totalSavedCarbon = savedCarbonPerDevice * numberValue
var equivalentInCars = totalSavedCarbon / 4600
co2kg.value = Math.round(totalSavedCarbon)
cars.value = Math.round(equivalentInCars)">
<h2>Dark mode emissions intensity calculator</h2>
<label>Carbon emmissions from building, transporting, packaging, and end-of-life per device <span class="hidden">(kg)</span>
  <div class="slider">
    <input type="range" min="0.01" max="1000" step="0.01" value="60.02" oninput="this.nextElementSibling.value = this.value">
    <input type="text" inputmode="numeric" pattern="[0-9]*" class="number-input" id="builtInEmissions" name="builtInEmissions" value="60.02" oninput="this.previousElementSibling.value = this.value" >
    <span aria-hidden>kg</span>
  </div>
</label>
<label>Average lifetime of battery before dark-mode intervention <span class="hidden">(years)</span>
<div class="slider">
  <input type="range" min="0.1" max="30" step=".1" value="4" oninput="this.nextElementSibling.value = this.value">
  <input type="text" inputmode="numeric" pattern="[0-9]*" class="number-input" id="batteryLifeSpanBefore" name="batteryLifeSpanBefore" value="4" oninput="this.previousElementSibling.value = this.value" >
  <span aria-hidden>years</span>
</div>
</label>
<label>
  Average amount of energy saved using dark mode <span class="hidden">(%)</span>
  <div class="slider">
      <input type="range" min="0.1" max="100" step=".1" value="10" oninput="this.nextElementSibling.value = this.value">
      <input type="text" inputmode="numeric" pattern="[0-9]*" class="number-input" id="energySaved" name="energySaved" value="10" oninput="this.previousElementSibling.value = this.value" >
      <span aria-hidden>%</span>
  </div>
</label>
<label>Strength of relationship between battery usage, and battery life-time <span class="hidden">(%)</span>
  <div class="slider">
      <input type="range" min="0.1" max="100" step="0.1" value="70" oninput="this.nextElementSibling.value = this.value">
      <input type="text" inputmode="numeric" pattern="[0-9]*" class="number-input" id="strength" name="strength" value="70" width="3rem" oninput="this.previousElementSibling.value = this.value" >
      <span aria-hidden>%</span>
  </div>
</label>
<label>Likelyhood someone will replace their device for a non-battery related reason any given year <span class="hidden">(%)</span>
  <div class="slider">
      <input type="range" min="0.1" max="100" step=".1" value="20" oninput="this.nextElementSibling.value = this.value">
      <input type="text" inputmode="numeric" pattern="[0-9]*" class="number-input" id="likelyhood" name="likelyhood" value="20" oninput="this.previousElementSibling.value = this.value" >
      <span aria-hidden>%</span>
  </div>
</label>
<label>Number of devices
  <div class="slider">
      <input type="range" min="1" max="1000000000" step="1" value="100000000" oninput="this.nextElementSibling.value = this.value">
      <input type="text" inputmode="numeric" pattern="[0-9]*" class="number-input" id="number" name="number" value="100000000" oninput="this.previousElementSibling.value = this.value">
      <span></span>
  </div>
</label>
  <ul>
<li><output name="co2kg">140023112</output> kg of CO<sub>2</sub> per year

<li>Equivalent to the emissions of <output name="cars">56967</output> cars per year (USA)
  </ul>
</form>

<br>

<p>To learn more about what this tool does, read the article <a href="https://endtimes.dev/actually-dark-mode-can-save-the-planet">Actually, dark mode can save the planet</a>.</p>
<p>Also availble to read on <a href="">dev.to</a>.</p>

:root {
  font-family:monospace;
  line-height:1.7;
   font-size:16px;
}

* {
  max-width:30rem;
}

body {
  background:#000;
  color:#fff;
}

input {
  background:#333;
  color:#fff;
  border:solid 2px #ccc;
  text-align:right;
  font-size:18px;
}

input[type=text]{
    max-width:8rem;
  padding:4px;
}

label, ul, li {
  display:block;
  margin-top:2rem;
}

.slider {
  margin-top:1rem;
  display:flex;
  align-items:center;
}

.slider > * {
 margin-right:1rem;
}

output {
  border:dashed 2px #fff;
  padding:.8rem;
}

ul {
padding:0;
}

a {
  color:#aaf
}