JSFiddle - React, Tailwind, and code Playground

HTML

Closures Demo
<br>
Practival Closures
<a href="#" id="size-18">18</a>
<a href="#" id="size-16">16</a>
<a href="#" id="size-14">14</a>
<input type="text" id="inputFontSize" placeholder="Enter Font Size" onkeyup="setFontSizeInput(this.value);" />

CSS

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}

JavaScript

function FontSize(size) {
    var self = this;
    function isInteger(value) {
        return (Object.prototype.toString.call(value) === '[object Integer]');
    }
    function isNumber(value) {
        return (Object.prototype.toString.call(value) === '[object Number]');
    }
    function isMouseEvent(value) {
        return (Object.prototype.toString.call(value) === '[object MouseEvent]');
    }
    function getInt(value) {
        var val = parseInt(value, 10);
        if (isNaN(val)) return 12;  // return a default number
        if (isInteger(val)) return val;  // return int
        if (isNumber(val)) return Math.round(val);  // convert to int
        return null;
    }
    self.fontSize = getInt(size);  // our default font size, defined at construction
    self.set = function (override) {
        var fontSize = self.fontSize;
        if (override && !isMouseEvent(override)) {
            fontSize = getInt(override);  // if it's not a mouse event get override
        }
        console.log("font size:", self.fontSize, ", override font size:", fontSize);		
    	document.body.style.fontSize = fontSize + 'px';
    };
}
function setFontSizeInput(ipval) {
	console.log("font size ipval : "+ipval);
    var inputFontSize = new FontSize(ipval);
    inputFontSize.set();
}

var fontsize18 = new FontSize(18);
var fontsize14 = new FontSize(14);
var fontsize16 = new FontSize(16);
document.getElementById('size-18').onclick = fontsize18.set;
document.getElementById('size-14').onclick = fontsize14.set;
document.getElementById('size-16').onclick = fontsize16.set;