JSFiddle - React, Tailwind, and code Playground

by AaronLayton

HTML

<ul id="score-board" class="ui-list">
    <!-- auto generated -->
    <li>Loading...</li>
</ul>

<form id="add-form">
    <label class="ui-label">Name</label>
    <input type="text" id="new-item-name" class="ui-input" />
    <br/>
    <label class="ui-label">Time</label>
    <input type="text" id="new-item-time" class="ui-input" />
    <button type="submit">Add</button>
</form>

<template id="itemTemplate">
    <li>{{name}}<div class="ui-list__remove pull-right">x</div></li>
</template>

SCSS

.ui-list {
    border-bottom:1px solid #eee;
    border-top:1px solid #eee;
    font-family:open sans, sans-serif;
    font-size:12px;
    list-style:none;
    margin:15px 0;
    padding:0;
    
    li {
        border-top:1px solid #eee;
        padding:12px 15px;
        
        &:first-child {
            border-top:none;
        }
    }
}
.ui-list__remove {
    color:#C45050;
    cursor:pointer;
    height:15px;
    line-height:15px;
    text-align:center;
    width:15px;
    
    &:hover {
        background:#eee;
    }
}

.pull-right {
    float:right;
}
.ui-label {
    display:inline-block;
    font-family:open sans, sans-serif;
    font-size:12px;    
    margin:15px;
    margin-right:0;
    width:45px;
}

.ui-input {
    font-family:open sans, sans-serif;
    font-size:12px;
    margin:15px;
}

JavaScript

//https://api.myjson.com/bins/1zqwr
var db;

loadDB();

$("#add-form").on("submit", function(e){
    e.preventDefault();
    
    var newEntry = {
        name: $("#new-item-name").val(),
        time: $("#new-item-time").val()
    };
    
    db.scores.push(newEntry);
    
    updateBoard();
    saveDB();
});

function updateBoard(){
    var board = $("#score-board"),
        template = $("#itemTemplate").html().trim(),
        newList = "";
    
    board.empty();
    
    db.scores.forEach(function(entry){
        var templateItem = template;
        
        for (var key in entry) {
            templateItem = templateItem.replace("{{" + key + "}}", entry[key]);
        }
        console.log(templateItem);
        
        newList += templateItem;       
    });
            
    board.html(newList);
}

function loadDB() {
    $.get("https://api.myjson.com/bins/1zqwr", function(data, textStatus, jqXHR) {
        db = data;
        
        updateBoard();
    });   
}
function saveDB() {
    
    $.ajax({
        url:"https://api.myjson.com/bins/1zqwr",
        type:"PUT",
        data: db,
        contentType:"application/json; charset=utf-8",
        dataType:"json",
        success: function(data, textStatus, jqXHR){
            console.log("Updated");
        }
    });   
}