JSFiddle - React, Tailwind, and code Playground

by brennan

HTML

<h1>ToDo List App</h1>
<ul id="list">

</ul>
<input type="text" />
<button>Add</button>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

CSS

#list{
    width:170px;
}
#list li{
    border-top:1px solid #ccc;
    padding:5px
}
.delete{
    color:#ff0000;
    float:right;
}

JavaScript

$(document).ready(function(){

    $('button').click(function(){
        var item = $('input').val();
        if(item.length > 0){
            $('#list').append(itemTemplate(item));
            $('input').val('')
        }
    });
    
    $('.delete').live({
        click: function(){
            $(this).parent().remove();
            return false;
        }
    });
    
    function itemTemplate(item){
        var html = '<li>'+
                        '<a href="#" class="delete">x</a>'+
                        item+
                   '</li>';
        
        return html;
    }

});