JSFiddle - React, Tailwind, and code Playground

by raddevus

HTML

<button onclick="incdec(1)">+</button>
<button onclick="incdec(-1)">-</button>
<p id="element1"></p>
<p id="element2"></p>

JavaScript

// initialize from localStorage if possible, otherwise set to 12
var fontSize1 = Number(localStorage.getItem("fontSize1")) > 0 ? Number(localStorage.getItem("fontSize1")) : 12;
var fontSize2 = Number(localStorage.getItem("fontSize2")) > 0 ? Number(localStorage.getItem("fontSize2")) : 12;

var items = [{
    "el": "#element1",
    "maxSize": 14,
    "minSize": 12
}, {
    "el": "#element2",
    "maxSize": 16,
    "minSize": 14
}];


initialize();

function initialize(){
    
    var el = document.querySelector("#element1");
    var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
    el.style.fontSize = fontSize1 + "px";
    el.innerHTML = "Element has font size " + fontSize1 + "px";
    el = document.querySelector("#element2");
    el.style.fontSize = fontSize1 + "px";
    style = window.getComputedStyle(el, null).getPropertyValue('font-size');
    el.innerHTML = "Element has font size " + fontSize2 + "px";
}

var incdec = function(dir) {
		var count = 0;
    items.forEach(function(item) {
    		console.log(item)
        size(dir, item)
        count++;
        console.log("count: " + count);
    });
};

var size = function(dir, item) {
    
		console.log(item.el)
    var el = document.querySelector(item.el);
    console.log(el)
    var max = item.maxSize;
    var min = item.minSize;
    console.log(dir, min, max)
    var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
    
    var fontSize = parseFloat(style);
    if (dir === 1 && fontSize < max) {
        el.style.fontSize = (fontSize + 1) + 'px';
        el.innerHTML = "Element has font size : " + el.style.fontSize;
    } else if (dir === -1 && fontSize > min) {
        el.style.fontSize = (fontSize - 1) + 'px';
        el.innerHTML = "Element has font size : " + el.style.fontSize;
    }
    switch (item.el){
    		case "#element1" : {
        		console.log("el 1")
            localStorage.setItem("fontSize1", el.style.fontSize);
        		break;
        }
     ...