JSFiddle - React, Tailwind, and code Playground

by Joe Cisneros

HTML

<form id="calculatorForm">
  <fieldset>
    <input type="checkbox" id="enableCalc">
    <label for="enableCalc">Enable calc</label>
  </fieldset>

  <fieldset name="calculator" disabled>
    <!-- Default formula -->
    <fieldset name="defaultcalc">
      <input type="checkbox" id="default" checked>
      <label for="default">Use default calculation</label>
    </fieldset>

    <!-- Custom formula -->
    <fieldset name="customcalc" disabled>
      <label>Use custom calculation</label>
      <input type="number" value="50" id="c">+
      <input type="number" value="50" id="d">=
      <output id="x" for="c d">100</output>
    </fieldset>
  </fieldset>
</form>

CSS

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, Ubuntu, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
}

fieldset {
  border: none;
  padding: 0
}

fieldset+fieldset {
  margin-top: 24px
}

label {
  display: inline-block
}

form>fieldset {
  padding: 16px
}

form>fieldset[disabled] {
  background-color: #EAEAEA;
  pointer-events: none
}

fieldset>fieldset[disabled] {
  opacity: .5
}

JavaScript

var form = document.getElementById("calculatorForm"),
  a = document.getElementById("enableCalc"),
  b = document.getElementById("default"),
  c = document.getElementById("c"),
  d = document.getElementById("d"),
  x = document.getElementById("x");
a.addEventListener("change", function() {
  form.calculator.disabled = !a.checked
});
b.addEventListener("change", function() {
  form.customcalc.disabled = b.checked
});
form.addEventListener("input", function() {
  x.value = parseInt(c.value) + parseInt(d.value)
});