Skip to content

Instantly share code, notes, and snippets.

@jpdevries jpdevries/index.html
Last active Dec 30, 2016

Embed
What would you like to do?
Font Size Preference Widget
<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>
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');
}
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;
}
@jpdevries

This comment has been minimized.

Copy link
Owner Author

commented Dec 30, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.