JSFiddle - React, Tailwind, and code Playground

by vkarpov15

HTML

<input type="text" id="inputName" />
<div id="name-wrapper">
    Welcome,
    <span id="name"></span>
</div>
<div>
    <input type="button" id="clear" value="Clear" />
</div>

CSS

#name-wrapper {
    display: none;
}

JavaScript

$(function() {
    var onChange = function() {
        var name = $('#inputName').val();
        $('#name').html(name);
        if (name.length == 0) {
            $('#name-wrapper').hide();
        } else {
            $('#name-wrapper').show();
        }
    };
    
    $('#inputName').keyup(onChange);
    
    $('#clear').click(function() {
        $('#inputName').val('');
        onChange();
    });
});