Angular To-do List

by Adam Doherty

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/css/foundation.min.css">
<div ng-app="todoList" ng-controller="todoListCtrl" id="todoList">
    <div class="row">
        <div class="small-push-2 small-8 columns">
            <div class="row">
                <div>
                     <h3>{{title}}{{getRemainingTodos()}}</h3>
                </div>
            </div>
            <div class="row">
                <div class="columns small-12 noPadLeft noPadRight" ng-repeat="t in todos">
                    <input type="checkbox" class="checkbox" ng-model="t.completed" id="{{t.id}}"></input>
                    <label for="{{t.id}}">{{t.todo}}</label>
                </div>
            </div>
            <div class="row">
                <form ng-submit="addTodo()">
                    <div class="small-6 columns noPadLeft">
                        <input placeholder="Add reminder..." type="text" ng-model="reminderText" required></input>
                    </div>
                    <div class="small-6 columns noPadRight">
                        <button type="submit">Add Reminder</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

CSS

#todoList {
    margin: 20px 0;
}
.noPadLeft {
    padding-left: 0;
}
.noPadRight {
    padding-right: 0;
}
.todoTable {
    width: 100%;
}
button {
    font-size: inherit;
    padding: 0.2em;
    /*margin: 0.1em 0.2em;*/
    /* the following ensures they're all using the same box-model for rendering */
    -moz-box-sizing: content-box;
    /* or `border-box` */
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 32px;
    width: 100%;
    border-radius: 3px;
}
/* Style checkboxes as buttons */
 input[type="checkbox"] {
    display: none;
}
input[type="checkbox"] + label, input[type="checkbox"] + label:after {
    padding: 6px 9px;
    display: inline-block;
    width: 100%;
}
input[type="checkbox"] + label {
    position: relative;
    /* style */
    color: #444;
    margin: 1px;
}
input[type="checkbox"] + label:after {
    position: absolute;
    /* style */
    top: -22%;
    left: -3px;
    font-size: 180%;
}
/* style */
 input[type="checkbox"].checkbox + label:hover:after {
    text-shadow: 0 0 7px rgba(255, 255, 255, 0.1);
    color: rgba(0, 0, 0, 0);
}
input[type="checkbox"].checkbox:checked + label:hover:after {
    text-shadow: none;
    color: inherit;
}
input[type="checkbox"].checkbox + label:hover, input[type="checkbox"].checkbox:checked + label:hover {
}
input[type="checkbox"].checkbox:checked + label {
    color: rgba(0, 0, 0, 0.9);
    text-decoration: line-through;
    font-style: italic;
    color: grey;
}

JavaScript

angular.module('todoList', [])
    .controller('todoListCtrl', ['$scope', function ($scope) {
        $scope.title = "To-Dos: ";
    $scope.todos = [{
        id: 1,
        todo: "Eat breakfast",
        completed: true
    }, {
        id: 2,
        todo: "Walk dog",
        completed: false
    }];
    $scope.count = $scope.todos.length;

    $scope.addTodo = function () {
        $scope.count++;
        $scope.todos.push({
            id: $scope.count,
            todo: $scope.reminderText,
            completed: false
        });
        $scope.reminderText = '';
    };

    $scope.getRemainingTodos = function () {
        $scope.remaining = [];
        angular.forEach($scope.todos, function(t){
            if(!t.completed){$scope.remaining.push(t)};
        });
        return $scope.remaining.length;
    };

}]);