JSFiddle - React, Tailwind, and code Playground

by Mattia Astorino

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)});