JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<div id="font-sizer">
    <a href="#" id="more">+</a>
    <a href="#" id="less">-</a>
</div>

<p id="test">Elementum ut a placerat, in enim, ut urna, et nunc tempor mus pulvinar et duis nec sit nisi, phasellus. Aliquet, lundium rhoncus! Adipiscing urna, aliquam. Mauris vut? Vel. Ridiculus arcu, pulvinar! Dapibus, adipiscing odio, vel, placerat. Dolor enim quis? Porta, nisi porta? Tincidunt in et, massa urna dignissim! Tincidunt mus aenean augue, platea odio arcu aliquam, eros phasellus integer arcu ac sed, amet, in. In, scelerisque, turpis amet montes lacus mattis pid dictumst eros sed, lundium montes ut eros enim! Dolor, magna natoque turpis eu, phasellus facilisis odio augue odio cras quis mattis quis dapibus scelerisque aenean parturient! Lundium! Velit, diam lacus sed! Quis, a! Enim turpis auctor enim magna! Etiam non vel cursus, amet? Massa tortor ridiculus risus. Et.</p>

CSS

#font-sizer {
    text-align: center;
    margin-bottom: 1em;
}

#font-sizer a {
    display: inline-block;
    background: #000;
    width: 32px;
    height: 32px;
    text-align: center;
    color: #fff;
    line-height: 32px;
    border-radius: 50%;
    text-align: center;
    text-decoration: none;
    font-size: 1.4em;
}

JavaScript

var FontResizer = function(element) {

    element = $(element);

    var more = $('#more'),
        less = $('#less');

    var increment = function() {
        var origSize = element.css('fontSize');
        var absSize = parseInt(origSize);
        absSize++;
        element.css('fontSize', absSize + 'px');
    }


    var decrement = function() {
        var origSize = element.css('fontSize');
        var absSize = parseInt(origSize);
        absSize--;
        element.css('fontSize', absSize + 'px');
    }


    this.resize = function() {

        more.click(function() {

            increment();

            return false;

        });

        less.click(function() {

            decrement();


            return false;


        });


    };






}


var resizer = new FontResizer('#test');
resizer.resize();