JSFiddle - React, Tailwind, and code Playground

by alirokni

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="wrapper">
    
<h1>My Application</h1>

    <form role="form">
        <select name="selectedItem">
            <option value="active">Mark as Active</option>
            <option value="inactive">Mark as Inactive</option>
            <option value="remove">Remove</option>
        </select>
        <table cellpadding="5" cellspacing="2" id="dataTable" class="table">
            <thead>
                <tr>
                    <th>
                        <label>
                            <input type="checkbox" name="allNone" value="" />
                        </label>
                    </th>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Status</th>
                    <th>Rating</th>
                </tr>
            </thead>
            <tfoot></tfoot>
            <tbody></tbody>
        </table>
    </form>
</div>
<button type="button" class="btn btn-default btn-lg active">ADD</button>
<!-- <div>LEGEND:
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
<span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
<span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
</div>
-->

CSS

body {
    margin-left: 5px;
    font-size:1.2em
}
h1 {
    font-size:100%
}
table {
    width: 80%;
    min-width: 300px;
    border: 1px solid black;
}
select {
    margin-bottom: 10px
}
th, td {
    padding-left:5px;
}
thead {
    background: #b4b4b4;
}
.odd {
    background-color: #eaeaea;
}
.actionItem {
    background-color: #ccc;
}
td, th {
    border-left:1px solid black;
    border-bottom:1px solid black
}

JavaScript

// endpoints
// POST /user/add (these all require user_id)
// POST /user/remove
// POST /user/edit
// GET /user => returns all users
var xhr = {
    post: function (url, data) {
        var jsonData;
        if (Math.random() > 0.75) {
            jsonData = {
                json: JSON.stringify({
                    success: false,
                    error: 'System error, please try again'
                })
            };
        } else if (!data || !('user_id' in data)) {
            jsonData = {
                json: JSON.stringify({
                    error: 'user_id required'
                })
            };
        } else if (url === '/user/add') {
            if (!data.rating && !data.age && !data.name && !data.status) {
                jsonData = {
                    json: JSON.stringify({
                        success: false,
                        error: 'Must specify all fields when adding user'
                    })
                };
            } else {
                jsonData = {
                    json: JSON.stringify({
                        user_id: 5
                    })
                };
            }
        } else if (url === '/user/remove') {
            jsonData = {
                json: JSON.stringify({
                    success: true
                })
            };
        } else if (url === '/user/edit') {
            if ($.inArray(data.user_id, [1, 2, 3, 4, 5]) == -1) {
                jsonData = {
                    json: JSON.stringify({
                        success: false,
                        error: 'Invalid user_id'
                    })
                };
            } else if (!data.rating && !data.age && !data.name && !data.status) {
                jsonData = {
                    json: JSON.stringify({
                        success: false,
                        error: 'No properties specified for editing user'
                    })
                };
            } else if (data.rating < 1 ||...