checkbox alignment

db.json

@@ -1,16 +1,10 @@
 {
   "tasks": [
     {
-      "title": "30 secs side plank",
+      "title": "ty po sa milktea hahaha",
       "completed": false,
       "editing": false,
-      "id": 4
-    },
-    {
-      "title": "sleep",
-      "completed": false,
-      "editing": false,
-      "id": 5
+      "id": 2
     }
   ]
 }

src/app/Todo-List-App/containers/TodoList/todo-list.component.css

@@ -86,10 +86,6 @@ li{
     margin-top: -30px;
 }
 
-input[type="checkbox"]{
-    margin: 0 10px;
-}
-
 .dateClass{
     font-size: 1em;
     float: right;

src/app/Todo-List-App/containers/TodoList/todo-list.component.html

@@ -4,7 +4,7 @@
         <div class="header">
             <h1>TODO LIST <i class="fa fa-pencil"></i></h1>
         </div>
-        <div class="info selectall"><input type="checkbox" (change)="selectAll()">Select All</div>
+        <div class="info selectall"><label class="checkbox-inline"><input type="checkbox" (change)="selectAll()">Select All</label></div>
         <div class="inputDiv">
             <input type="text" class="form-control addInput" placeholder="Things you want to do today?" [(ngModel)]="taskTitle" (keyup.enter) = "addTask()">
         </div>
@@ -43,7 +43,7 @@
                 <div>{{ remaining()}} uncompleted tasks</div>
             </div>
             <div *ngIf="atleastOneCompleted()">
-                <button class="btn btn-warning btn-block" (click) ="clearCompleted()">Clear Completed</button> 
+                <button class="btn btn-warning btn-block" (click) ="clearCompleted(tasks)">Clear Completed</button> 
                 <div class="alert alert-warning">You've selected an item</div>
             </div>
             

src/app/Todo-List-App/containers/TodoList/todo-list.component.ts

@@ -122,10 +122,12 @@ export class TodoList{
 
 
     clearCompleted(tasks: Tasks){
-        this.tasks = this.tasks.filter(task => !task.completed);
+        // this.tasks = this.tasks.filter(task => !task.completed);
 
-        this.todoService.deleteTask(tasks)
-            .subscribe(data => this.tasks.filter(task => !task.completed))
+        // this.todoService.deleteAllTask(tasks)
+        //     .subscribe(data => this.tasks.filter(task => {
+        //         return task.completed !== data;
+        //     }))
     }
 
     selectAll():void{

src/app/Todo-List-App/services/todo.service.ts

@@ -30,5 +30,10 @@ export class TodoService{
         return this.http.delete(URL + '/' + task.id);
     }
 
+    deleteAllTask(task: Tasks){
+        return this.http.delete(URL + '/' + task.id);
+    }
+
+
 
 }