JSFiddle - React, Tailwind, and code Playground

by kalar su

HTML

<h1><input type="text" id="new-text" placeholder="Input text here..."/></h1>
<ul id="todo-list">

</ul>
<br>

<input type="checkbox" id="toggle-all"/>
<br>
<br>
<button type="checkbox" id="clearcompleted">Clear completed</button>

CSS

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.4em;
    background: #f5f5f5;
    color: #4d4d4d;
    margin: 0 auto;
}

button {
    outline: none;
}

input[type="checkbox"] {
    width: auto;
}

#new-text {
    background: white;
    font-size: 24px;
    margin: 130px 0 40px 0;
    position: relative;
}

#toggle-all {
    position: relative;
    top: 0px;
    left: 0px;
    width: 40px;
    height: 20px;
}

#todo-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

#todo-list li {
    position: relative;
    font-size: 24px;
    border-bottom: 1px solid lightgrey;
}

#todo-list li .toggle {
    text-align: center;
    width: 40px;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    appearance: none;
}

#todo-list li span {
    white-space: pre;
    padding: 15px 60px 15px 15px;
    color: black;
    margin-left: 45px;
    display: block;
    line-height: 1.2;
}

#todo-list li .destroy {
    display: none;
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    width: 40px;
    height: 40px;
    margin: auto 0;
    font-size: 30px;
    color: #cc9a9a;
    margin-bottom: 11px;
}

#todo-list li .destroy:after {
    content: 'Ă—';
}

#todo-list li:hover .destroy {
    display: block;
}

.in-edit-text{

    padding: 15px 60px 15px 15px;
    margin-left: 45px;
    font-size: 24px;
}

JavaScript

function addListItem() {

    var text = $('#new-text').val();
    $("#todo-list").append('<li ><input type="checkbox" class="toggle"/ ><span class="text">' +
        text + ' </span><button class="destroy"></button></li>');
    $("#new-text").val('');

}

function clearCompleted() {

    $("#todo-list .toggle:checked").parent().remove();

}

function deleteItem() {

    $(this).parent().remove();

}

function completed() {
    if ($(this).parent().css('textDecoration') == 'line-through') {
        $(this).parent().css('textDecoration', 'none');
        $(this).parent().css('opacity', '1');
    } else{
        $(this).parent().css('textDecoration', 'line-through');
        $(this).parent().css('opacity', '0.50');
    }

}


$(document).ready(function() {

    $('#new-text').keyup(function(e) {

        if (e.keyCode === 13){
            addListItem();
        }

    });

    $(document).on('click', '.destroy', deleteItem);

    $("#toggle-all").click(function(){
            $('input:checkbox').not(this).prop('checked', this.checked);
            
            if ($('li').css('textDecoration') == 'line-through') {
                $('li').css('textDecoration', 'none');
                $('li').parent().css('opacity', '1');
            }else{
                $('li').css('textDecoration', 'line-through');
                $('li').parent().css('opacity', '0.5');
            }

		});

    $(document).on('click', '.toggle', completed);

    $("#clearcompleted").click(clearCompleted);

    $('#todo-list').on('dblclick', 'span', function(){
            var thisData = this.innerHTML,
                $el = $('<input type="text" class="in-edit-text"/>');
            $(this).replaceWith($el);
            $el.val(thisData).focus();
            $(this).find(".text").hide();
            $(this).find(".destroy").hide();

        }
    );

    $('#todo-list').on('keyup', '.in-edit-text', (function(e){
            if (e.keyCode === 13)

            {
               ...