JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<div class="todo-container">
    <h1>Stuff To Do</h1>
    <ul class="todo-list"></ul>
    <input type="text" value="">
    <button class="action-add">Add</button>
</div>

CSS

body {
    padding: 10px;
    font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;  
}

h1 {
    font-weight: bold;
}

.todo-list {
    list-style: none;    
    margin-left: 0;
    paddng-left: 0;
}

.todo-done > .todo-item {
    text-decoration: line-through;
}

JavaScript

/*global $ */
(function() {
    'use strict';
    
    var ToDo = function(el) {
        this.el = el;
        this.listEl = this.el.find('.todo-list').first();
        this.inputEl = this.el.find('input[type="text"]').first();
        this.buttonEl = this.el.find('.action-add').first();
        
        this.listEl.on('click', 'input[type="checkbox"]', $.proxy(function(e) {
            var item = $(e.target).next('.todo-item').text();
            
            this.toggleDone(item);            
        }, this));
        
        this.buttonEl.on('click', $.proxy(function(e) {
            var item = this.inputEl.val();
            
            this.inputEl.val('');
            
            if (item) {
               this.add(item);
            }            
        }, this));
    };
    
    ToDo.prototype = {
        add: function(item) {
            var html = ['<li>',
                        '<input type="checkbox"> ',
                        '<span class="todo-item">',
                        item,
                        '</span>',
                        '</li>'].join('');
            
            this.listEl.append(html);
        },

        toggleDone: function(item) {
            this.listEl.find('.todo-item').each(function() {
                var el = $(this);
                
                if (el.text() === item) {
                    el.parent().toggleClass('todo-done');              
                }
            });
        }            
    };
    
    var toDo = new ToDo($('.todo-container').first());
    
}());