JSFiddle - React, Tailwind, and code Playground

by Alesei Narkevitch

HTML

<header>
    <h1>TODO App</h1>
    <button id="addTodo">Add</button>
</header>
<section>
    <ul class="todo-list"></ul>
</section>

JavaScript

// 1. Add a to-do
// 2. Mark complete
// 3. Un-mark complete
// 4. Delete an item


var templates = {
    'item': '<li class="todo-item"><input class="todo-input" type="text" /><span class="todo-title"></span><button class="deleteTodo">Delete</button></li>'
};

var app = {
    
    'addTodo': function addTodo () {
        var item = $(templates.item),
            todoList = $('.todo-list'),
            todoItemsLength = $('.todo-list').length;
        
        item.attr('id',todoItemsLength + 1);
        
        $('.deleteTodo',item).on('click', app.removeTodo);
        
        $('.todo-input',item).keypress(app.updateTodoTitle);
        
        todoList.append(item);

    },
    'removeTodo': function removeTodo (event) {
        $(event).parent('li').attr('id').remove();  
    },
    'updateTodoTitle': function updateTodoTitle (event) {
        var input = $(event.target),
            todoTitle = input.siblings('.todo-title');
        
        if (event.which == 13) {
            input.hide();
            todoTitle.text(input.val());
        }
    },
    'initialize': function initialize () {
       $('#addTodo').on('click', app.addTodo);
    }
};


$(function(){
    app.initialize();
});