JSFiddle - React, Tailwind, and code Playground

by David_Knowles

HTML

<p>Some paragraph text</p>
    <h1>some heading 1 text</h1>
    <h2>some heading 2 text</h2>

    <a href="#" id="size-12">12</a>
    <a href="#" id="size-14">14</a>
    <a href="#" id="size-16">16</a>

CSS

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

h1 {
  font-size: 1.5em;
}
h2 {
  font-size: 1.2em;
}

JavaScript

// why doesn't this work without closure

function makeSizer(size) {
//  return function() {
    document.body.style.fontSize = size + 'px';
    alert('yu')
//  };
}

//var size12 = makeSizer(12);
//var size14 = makeSizer(14);
var size16 = makeSizer(16);

//document.getElementById('size-12').onclick = size12;
//document.getElementById('size-12').onclick = makeSizer(12);

document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;
document.getElementById('size-16').onclick = makeSizer(16);