To-do List

by Nidhi Patel

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-app="myApp">
  <h2 id="heading">
    To Do List
  </h2>
  <div ng-controller="myToDoApp">
    <input type="text" ng-model="data" align="center" /> <button ng-click="add()">Add</button>
    <div class="wrap">
      <div ng-model='newData' ng-repeat="data in newData"> 
      <input type="checkbox" /> 
     <span contenteditable = "true"> {{ data }} </span> 
      <button id="del" class="btn btn-danger btn-sm" style="padding: 1px 6px;" ng-click="remove()">X</button>
      </div>
    </div>
  </div>
</div>

CSS

#heading {
  text-align: center;
  color: red;
}

body {
  margin-left: 20px;
}

p {
  margin-top: 5px;
  margin-bottom: 0px;
}

.wrap {
  width: 210px;
  position:relative;
}

#del {
  position: absolute;
  right: 0;
}

JavaScript

var myApp = angular.module('myApp', []);
myApp.controller('myToDoApp', function($scope) {

  $scope.data = " ";
  $scope.newData = [];
  $scope.add = function() {
    $scope.newData.push($scope.data);
    console.log($scope.newData);
    $scope.data = " ";
  }
  $scope.remove = function() {

  }
});