JSFiddle - React, Tailwind, and code Playground

by phoenix4rmhell

HTML

<input id="listItem">
<button>Add</button>
<ul></ul>

CSS

ul { list-style: none; font-family: monospace}
ul:before {
    content: "To do list";
}
ul:after {
    content: "Uncheck when done.";
    display: block;
}

JavaScript

$(function() {
    var openTag = '<li><input type="checkbox" checked="checked">';
    var endTag = '</li>';
    $('button').click(function() {
        if( $('#listItem').val() === ""){
            return;
        }
        $('ul').append(openTag + $('#listItem').val() + endTag);
        $('#listItem').val("").focus();
        $(':checkbox').each(function() {
            $(this).click(function() {
                    $(this).parent().remove();
            });
        });
    });
    $("#listItem").keypress(function(event) {
        if (event.which == 13) {
            event.preventDefault();
            $('button').trigger('click');
        }
    });
});