XmbgaP

index.html

<div class="container" ng-app="toDoListApp">
  <div ng-controller="myController">
    <div class"row">
      <h2 class="center-align"><i class="zmdi zmdi-assignment-check"></i>
 Basic ToDoList</h2>
    </div>
    <div id="card" class="row card-panel hoverable">
    <form ng-submit="addActivity()">
      <div class="row">
        <div class="col s1">
        <i class="material-icons medium">edit</i>
        </div>
        <div class="col s11">
          <input type="text" ng-model="newActivity.description"></div>
      </div>
      <div class="row">
        <div class="col s1">
        <i class="material-icons medium">event_note</i>
        </div>
        <div class="col s11">
      <input type="datetime-local" class="datepicker" ng-model="newActivity.date">
        </div>
      </div>
      <button class="left-align btn-floating btn-large waves-effect waves-light orange"><i class="material-icons">add</i></button>
      <button ng-click="clean()" class="right btn-floating btn-large waves-effect waves-light red"><i class="material-icons">close</i></button>
    </form>
      <br>
      <h4><i class="material-icons small">event_available</i>Tasks</h4>
      <ul>
    <li ng-repeat = "activity in toDo">
      {{activity.description}} - {{activity.date | date: 'short'}}
    </li>
    </ul>
      <br>
      <blockquote> Agregar material design al DatePicker
        </blockquote>
      <h5>@francves</h5>
      </div>
    </div>
</div>

script.js

var app = angular.module("toDoListApp",["LocalStorageModule"])
.controller("myController",function($scope,localStorageService){
  if(localStorageService.get("angular-myToDoList")){
    $scope.toDo = localStorageService.get("angular-myToDoList");
  }
  else{
  $scope.toDo = [];
  }
  $scope.$watchCollection('toDo',function(newValue,oldValue){
  localStorageService.set("angular-myToDoList",$scope.toDo)    ;
});
  $scope.addActivity = function(){
    $scope.toDo.push($scope.newActivity);
    $scope.newActivity = {};
 //   localStorageService.set("angular-myToDoList",$scope.toDo); Al tener el wath nos ahorramos esta línea
    //angular-myToDoList es mi lista por hacer que va a ser buscada en el localstorage para agregar o mostrar listas de tareas. / angular-myToDoList is my list to do to be sought in the localStorage to add or display lists.
  }
    $scope.clean = function(){
      $scope.toDo = [];
   // localStorageService.set("angular-myToDoList",$scope.toDo); Al tener el wath nos ahorramos esta línea
  }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-local-storage/0.2.2/angular-local-storage.min.js"></script>

style.css

h2{
  font-family: 'Lobster', cursive;
  color: #F2F2F2;
}
html{
  background: #0C6FF2;
}
#card{
  border-radius: 25px;
}
h4{
  font-family: 'Lobster', cursive;
  color: #F27D29;
}
h5{
  font-family: 'Lobster', cursive;
  color: #F27D29;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.2/css/material-design-iconic-font.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

XmbgaP.markdown

XmbgaP

A Pen by Francisco Velasquez on CodePen.

License.