JSFiddle - React, Tailwind, and code Playground

by Aravind Baskaran

HTML

<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div id="dialog-confirm" title="Continue?">
    <p>Looks like you have entered some information. Closing it will cause you to lose it, do you want to close?</p>
</div>
<div id="dialog-form" title="Create new user">
    <p class="validateTips">All form fields are required.</p>
    <form>
        <fieldset>
            <label for="name">Name</label>
            <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
            <label for="email">Email</label>
            <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all">
            <label for="password">Password</label>
            <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all">
        </fieldset>
    </form>
</div>
<div id="users-contain" class="ui-widget">
     <h1>Existing Users:</h1>

    <table id="users" class="ui-widget ui-widget-content">
        <thead>
            <tr class="ui-widget-header ">
                <th>Name</th>
                <th>Email</th>
                <th>Password</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>[email protected]</td>
                <td>johndoe1</td>
            </tr>
        </tbody>
    </table>
</div>
<button id="create-user">Create new user</button>

JavaScript

$(function () {
    var name = $("#name"),
        email = $("#email"),
        password = $("#password"),
        allFields = $([]).add(name).add(email).add(password),
        tips = $(".validateTips");

    $("#dialog-form").dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "Create an account": function () {
                $("#users tbody").append("<tr>" +
                    "<td>" + name.val() + "</td>" +
                    "<td>" + email.val() + "</td>" +
                    "<td>" + password.val() + "</td>" +
                    "</tr>");
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        },
        beforeClose: function (e) {
            var somethingEntered = allFields[0].value || allFields[1].value || allFields[2].value;
            if (somethingEntered) {
                e.preventDefault();
                // call prompt to confirm whether the user wishes to discard entered info
                $("#dialog-confirm").dialog("open")
            }
        },
        close: function () {
            allFields.val("").removeClass("ui-state-error");
        }
    });

    $("#create-user")
        .button()
        .click(function () {
        $("#dialog-form").dialog("open");
    });
    $("#dialog-confirm").dialog({
        resizable: false,
        autoOpen: false,
        height: 300,
        modal: true,
        buttons: {
            "OK": function () {
                $(this).dialog("close");
                $("#dialog-form").dialog("close");
            },
                "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });
});