JSFiddle - React, Tailwind, and code Playground

by Minko Gechev

HTML

<div data-ng-app="todo">
    <div data-ng-controller="ToDoCtrl">
        <table>
            <tr>
                <td>
                    Search:
                </td>
                <td>
                    <input type="text" data-ng-model="query" />
                </td>
            </tr>
            <tr>
                <td>
                    Add:
                </td>
                <td>
                    <input type="text" id="newToDoInput" /><button data-ng-click="addToDo()">+</button>
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: center;">
                    <button data-ng-click="save()">Save</button>
                </td>
            </tr>
        </table>
        <ul>
            <li data-ng-repeat="item in items | filter: query" data-ng-class="{ completed: item.done }">
                <input type="checkbox" data-ng-model="item.done" />
                <span class="todo-label" data-ng-bind="item.label"></span>
                <button data-ng-click="remoteToDo(item)">X</button>
            </li>
        </ul>
    </div>
</div>

CSS

.completed {
    font-style: italic;
}
li {
    list-style: none;
}
.todo-label {
    width: 100px;
    display: inline-block;
}

JavaScript

var todo = angular.module('todo', []);

todo.factory('localStorage', function () {
    return {
        get: function () {
            return JSON.parse(localStorage.getItem('todo'));
        },
        put: function (todo) {
            localStorage.setItem('todo', JSON.stringify(todo));
        }
    };
});

function ToDoCtrl($scope, localStorage) {    
    $scope.items = localStorage.get() || [];    
    $scope.query = "";
    
    $scope.remoteToDo = function (toDo) {
        $scope.items.splice($scope.items.indexOf(toDo), 1);
    };
    $scope.addToDo = function () {
        var todo = document.getElementById('newToDoInput').value;
        $scope.items.push({
            label: todo,
            done: false
        });
    };
    $scope.save = function () {
        localStorage.put($scope.items);
    };
}