JSFiddle - React, Tailwind, and code Playground

by Masayoshi Kuroda

HTML

<h1 id='title'>Title</h1>

<div id='question'>
    <p>Tell me your name?</p>
    <input id='btnEnter' type='button' value='enter' />
</div>
<div id='result'>
    <p>Hello! <span id='yname'></span>-san.</p>
    <input id='btnReset' type='button' value='reset' />
</div>

CSS

#btnEnter {
    background-color: green;
}
#btnReset {
    background-color: yellow;
}
}

JavaScript

$(function () {
    $('#title').text('Name resolv');
    $('#question').show();
    $('#result').hide();

    $('#btnEnter').click(function () {
        var name = prompt('Enter your name:');
        if (name !== '') {
            $('#yname').text(name);

            toggle();
        }
    });

    $('#btnReset').click(function () {
        toggle();
    });

    function toggle() {
        $('#question').toggle();
        $('#result').toggle();
    }
});