JSFiddle - React, Tailwind, and code Playground

by Gabriele Petrioli

HTML

<script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>
  <form id="myform">
    <button>erase</button>
    <select id="fs"> 
        <option value="Arial">Arial</option>
        <option value="Verdana ">Verdana </option>
        <option value="Impact">Impact </option>
        <option value="Comic Sans MS">Comic Sans MS</option>
    </select>

    <select id="size">
        <option value="7">7</option>
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
    </select>
</form>
<textarea id="ta" class="changeMe">Text into textarea</textarea>
    <div id="container" class="changeMe">
        <div id="float">
            <p>
                Text into container
            </p>
        </div>
    </div>

JavaScript

$(window).load(function(){
    function update(){
        var text = '<p>' + $('#ta').val() + '</p>',
            size = $('#size').val(),
            font = $('#fs').val();
        
        $('#float')
            .css({
                fontFamily: font,
                fontSize: size + 'px'
            })
            .html(text)
            .find('p')
            .arctext();
    
        }
        
    $('#ta').keyup( update );
    $("#fs, #size").change( update );
});