JSFiddle - React, Tailwind, and code Playground

by Vasyl Pylypiv

HTML

<h1>List</h1>
<input type="text" id="new-text"/>
<ul id="todolist">
</ul>
<br>
<input type="checkbox" id="select_all" />Select all

JavaScript

function addListItem() {
    var text = $('#new-text').val();
    $("#todolist").append('<li><input type="checkbox" class="edit" />' + text + ' <button class="delete">Delete</button></li>');
    $("#new-text").val('');
};

function deleteItem() {
 $(this).parent().remove();
}

function finishItem() {
    if ( $(this).parent().css('textDecoration') == 'line-through' ) {
        $(this).parent().css('textDecoration', 'none')
    }   else    {

        $(this).parent().css('textDecoration', 'line-through');
    }
}

function editItem (e) {
    var $input = $(e.target).closest('li').addClass('editing').find('.edit');
    $input.val($input.val()).focus(); }

    $(function() {
    $('#new-text').keyup(function(e){
        if (e.keyCode === 13) {
            addListItem();
        }
    });
    $(document).on('click', '.delete', deleteItem);
    $(document).on('click', '.edit', finishItem);
    $(document).on('dblclick', '.edit', editItem);
    $("#select_all").click(function () {
        $('input:checkbox').not(this).prop('checked', this.checked);
        if ( $('li').css('textDecoration') == 'line-through' ) {
            $('li').css('textDecoration', 'none')
        }   else    {

            $('li').css('textDecoration', 'line-through');
        }
    });

});