ToDo list using AngularJS and Firebase

by Patricio Bustos

HTML

<script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://cdn.rawgit.com/adonespitogo/angular-base64-upload/master/src/angular-base64-upload.js"></script>
<div ng-controller="TodoCtrl" class="container" ng-app="TodoApp">

<h2>ToDo list using AngularJS and Firebase</h2>
<h4>See real time binding by opening two browsers and adding, updating, or removing a TODO</h4>


<!--ADD ITEM FORM-->
<form name="todoForm">

    <div>
        <input type="text"
               name="todoNameField"
               ng-model="todoName"
               placeholder="Add new task (min 3 chars)"
               required ng-minlength="3"
               class="form-control"
               ng-keyup="($event.keyCode == 13 && todoName.length > 2) ? addItem() : return"
               style="margin-bottom: 10px"
                />
        <input type="text"
               name="todoNameField"
               ng-model="todoName2"
               placeholder="Add new task (min 3 chars)"
               required ng-minlength="3"
               class="form-control"
               ng-keyup="($event.keyCode == 13 && todoName.length > 2) ? addItem() : return"
               style="margin-bottom: 10px"
                />
                
        <input type="file" 
               name="file"
               ng-model="file"  
               base-sixty-four-input 
               required onload="onLoad" 
               maxsize="500" 
               accept="image/*">
                
        <button ng-click="addTodo()"
                ng-hide="myForm.todoNameField.$invalid"
               ...

CSS

.list-item {
    padding: 10px 0;
    border: 1px solid #ccc;
}

JavaScript

var todoApp = angular.module('TodoApp', ['firebase', 'naif.base64']);


todoApp.controller('TodoCtrl', ['$scope', '$firebaseArray', '$http', '$window', '$rootScope',
    function($scope, $firebaseArray, $http, $window, $rootScope) {
   
    // CREATE A FIREBASE REFERENCE
    var todosRef = new Firebase('https://pattest.firebaseio.com/');

    // GET TODOS AS AN ARRAY
    $scope.todos = $firebaseArray(todosRef);

    // ADD TODO ITEM METHOD
    $scope.addTodo = function () {

        // CREATE A UNIQUE ID
        var timestamp = new Date().valueOf();

        $scope.todos.$add({
            id: timestamp,
            name: $scope.todoName,
            name2: $scope.todoName2,
            imagen: $scope.file,
            status: 'pending'
        });

        $scope.todoName = "";
        $scope.todoName2 = "";
        $scope.file = "";

    };

    // REMOVE TODO ITEM METHOD
    $scope.removeTodo = function (index, todo) {
        
        // CHECK THAT ITEM IS VALID
        if (todo.id === undefined)return;

        // FIREBASE: REMOVE ITEM FROM LIST
        $scope.todos.$remove(todo);

    };

    // MARK TODO AS IN PROGRESS METHOD
    $scope.startTodo = function (index, todo) {

        // CHECK THAT ITEM IS VALID
        if (todo.id === undefined)return;

        // UPDATE STATUS TO IN PROGRESS AND SAVE
        todo.status = 'in progress';
        $scope.todos.$save(todo);

    };

    // MARK TODO AS COMPLETE METHOD
    $scope.completeTodo = function (index, todo) {

        // CHECK THAT ITEM IS VALID
        if (todo.id === undefined)return;

        // UPDATE STATUS TO COMPLETE AND SAVE
        todo.status = 'complete';
        $scope.todos.$save(todo);
    };
    
  
 // BASE 64
  $scope.onChange = function (e, fileList) {
    alert('this is on-change handler!');
  };
  
  $scope.onLoad = function (e, reader, file, fileList, fileOjects, fileObj) {
    alert('this is handler for file reader onload event!');
  };

  var uploadedCount = 0;

  $scope.files =...