Font Size Preference Widget

index.html

<form id="font-size-widget" class="widget">
  <h2 id="font-size"><noscript>Please enable JavaScript to </noscript>Choose a Font Size</h2>
  <fieldset>
    <legend>Font Size</legend>

    <div>
      <input type="radio" name="fontsize" id="fontsize__normal" value="normal" checked disabled>
      <label for="fontsize__normal">Normal</label>
    </div>

    <div> <input type="radio" name="fontsize" id="fontsize__medium" value="medium" disabled>
      <label for="fontsize__medium">Medium</label></div>

    <div>
      <input type="radio" name="fontsize" id="fontsize__large" value="large" disabled>
      <label for="fontsize__large">Large</label>
    </div>

  </fieldset>
</form>

script.js

document.getElementById('font-size-widget').addEventListener('change', function(event) {
    document.body.setAttribute('data-font-size', event.target.value);
    localStorage.setItem('fontSize', event.target.value);
});

try {
  if(localStorage.getItem('fontSize'))  {
    const checkedInput = document.querySelector(`input[value="${localStorage.getItem('fontSize')}"]`);
    checkedInput.checked = true;
    document.body.setAttribute('data-font-size', checkedInput.value);
  }
} catch(e) {}

const disabledInputs = document.querySelectorAll('input[disabled]');
for(let i = 0; i < disabledInputs.length; i++) {
  disabledInputs[i].removeAttribute('disabled');
}

style.css

body {
  font-size:  var(--font-size, 100%);
}

body[data-font-size="medium"] {
  --font-size: 120%;
}

body[data-font-size="large"] {
  --font-size: 140%;
}

body {
  text-align: center;
  padding-top:10vh;
}

fieldset {
  text-align: left;
}

.widget {
  max-width: 18em;
  margin: 0 auto;
}

http://codepen.io/jpdevries/pen/ObKKyP