JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

<body onload="startup()">
    <section id="main">
        <header>
            <img src="twinlife.png" alt="The Chamberlain Civic Center" />
            <div>Search
                <input type="search" name="sbox" id="sbox" />
            </div>
        </header>
        <nav class="horizontal">
            <ul>
                <li><a href="#">News</a></li>
                <li><a href="#">Features</a></li>
                <li><a href="#">Articles</a></li>
                <li><a href="#">Twins Store</a></li>
                <li><a href="#">Current Issue</a></li>
                <li><a href="#">Archive</a></li>
                <li><a href="#">Submissions</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </nav>
        <nav class="vertical">
             <h1>Current Issue</h1>
             <ul>
                <h2>Notes</h2>
                <li class="newgroup"><a href="#">From the Editor's Desk</a></li>
                <li><a href="#">Twin Life Staff</a></li>
                <li><a href="#">Event Calendar</a></li>
                <li><a href="#">Mailbag</a></li>
                <h2>Articles</h2>
                <li class="newgroup"><a href="#">Multiple Births on the Rise</a></li>
                <li><a href="#">Chicago Convention: A Great Event</a></li>
                <li><a href="#">Twins in Adolescence</a></li>
                <li><a href="#">Twins and Talking</a></li>
                <li><a href="#">Switching Roles</a></li>
                <h2>Features</h2>
                <li class="newgroup"><a href="#">Twin Tips</a></li>
                <li><a href="#">Photos of the Month</a></li>
                <li><a href="#">Recipe Corner</a></li>
                <li><a href="#">Consumer Report</a></li>
                <li><a href="#">Swap Meet</a></li>
                <li class="newgroup"><a href="#">Reader Survey</a></li>
            </ul>
        </nav>
        <article>
            <hgroup>
                <div id="fontbuttons">
 ...

CSS

nav.horizontal li{
    display: inline-block;
    margin: 5px;
}
.fontsizer {
    margin: 5px;
    padding: 5px;
    background: #ddd;
    border: 1px solid #000;
    display: inline-block;
    width: 16px;
    text-align: center;
}

JavaScript

function startup() {
    var fontButtons = document.getElementsByClassName("fontsizer");
    var i;
    //alert(fontButtons.length);
    for (i = 0; i < fontButtons.length; i++) {
        fontButtons[i].onclick = function () {
            resizeText(this);
        };
    }

    function resizeText (objectButton)
    {
        var fontChange = parseFloat (objectButton.value);

        if (document.body.style.fontSize == "") {
            document.body.style.fontSize = "1.0em";
        }

        var size = document.body.style.fontSize;
        console.log (size);
        var currentFontSize = parseFloat(document.body.style.fontSize);
        console.log (currentFontSize, fontChange);
        currentFontSize += fontChange;
        document.body.style.fontSize = currentFontSize + "em"
    }
}