modified design

db.json

@@ -1,40 +1,10 @@
 {
   "tasks": [
     {
-      "title": "configure proxy config",
+      "title": "Drink Iced Coffee",
       "completed": false,
       "editing": false,
       "id": 1
-    },
-    {
-      "title": "study routing",
-      "completed": false,
-      "editing": false,
-      "id": 2
-    },
-    {
-      "title": "go to the gym",
-      "completed": false,
-      "editing": false,
-      "id": 3
-    },
-    {
-      "title": "nap for 10 mins",
-      "completed": false,
-      "editing": false,
-      "id": 4
-    },
-    {
-      "title": "buy milk",
-      "completed": false,
-      "editing": false,
-      "id": 5
-    },
-    {
-      "title": "karaoke",
-      "completed": false,
-      "editing": false,
-      "id": 6
     }
   ]
 }

package-lock.json

@@ -830,6 +830,22 @@
         "@types/jasmine": "*"
       }
     },
+    "@types/jquery": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.1.tgz",
+      "integrity": "sha512-Tyctjh56U7eX2b9udu3wG853ASYP0uagChJcQJXLUXEU6C/JiW5qt5dl8ao01VRj1i5pgXPAf8f1mq4+FDLRQg==",
+      "requires": {
+        "@types/sizzle": "*"
+      }
+    },
+    "@types/jqueryui": {
+      "version": "1.12.13",
+      "resolved": "https://registry.npmjs.org/@types/jqueryui/-/jqueryui-1.12.13.tgz",
+      "integrity": "sha512-IIOytTkwN6mBcJqi5SP8T8zqDGKy9hIpifQ0aGj1/ZjqshOoMo0yZdLp2uLIg7mQDJOwMCSC3EY1QZC/qZzvLQ==",
+      "requires": {
+        "@types/jquery": "*"
+      }
+    },
     "@types/node": {
       "version": "8.9.5",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-8.9.5.tgz",
@@ -847,6 +863,11 @@
       "integrity": "sha512-tGomyEuzSC1H28y2zlW6XPCaDaXFaD6soTdb4GNdmte2qfHtrKqhy0ZFs4r/1hpazCfEZqeTSRLvSasmEx89uw==",
       "dev": true
     },
+    "@types/sizzle": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz",
+      "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg=="
+    },
     "@types/source-list-map": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@@ -2186,9 +2207,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001129",
+      "version": "1.0.30001131",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001129.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001131.tgz",
-      "integrity": "sha512-9945fTVKS810DZITpsAbuhQG7Lam0tEfVbZlsBaCFZaszepbryrArS05PWmJSBQ6mta+v9iz0pUIAbW1eBILIg=="
+      "integrity": "sha512-4QYi6Mal4MMfQMSqGIRPGbKIbZygeN83QsWq1ixpUwvtfgAZot5BrCKzGygvZaV+CnELdTwD0S4cqUNozq7/Cw=="
     },
     "caseless": {
       "version": "0.12.0",
@@ -3106,9 +3127,9 @@
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
     },
     "electron-to-chromium": {
-      "version": "1.3.567",
+      "version": "1.3.568",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.567.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.568.tgz",
-      "integrity": "sha512-1aKkw0Hha1Bw9JA5K5PT5eFXC/TXbkJvUfNSNEciPUMgSIsRJZM1hF2GUEAGZpAbgvd8En21EA+Lv820KOhvqA=="
+      "integrity": "sha512-j9MlEwgTHVW/lq93Hw8yhzA886oLjDm3Hz7eDkWP2v4fzLVuqOWhpNluziSnmR/tBqgoYldagbLknrdg+B7Tlw=="
     },
     "elliptic": {
       "version": "6.5.3",
@@ -3346,9 +3367,9 @@
       }
     },
     "escalade": {
-      "version": "3.0.2",
+      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.0.tgz",
-      "integrity": "sha512-gPYAU37hYCUhW5euPeR+Y74F7BL+IBsV93j5cvGriSaD1aG6MGsqsV1yamRdrWrb2j3aiZvb0X+UBOWpx3JWtQ=="
+      "integrity": "sha512-mAk+hPSO8fLDkhV7V0dXazH5pDc6MrjBTPyD3VeKzxnVFjH1MIxbCdqGZB9O8+EwWakZs3ZCbDS4IpRt79V1ig=="
     },
     "escape-goat": {
       "version": "2.1.1",
@@ -8690,9 +8711,9 @@
       }
     },
     "rxjs-compat": {
-      "version": "6.6.3",
+      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/rxjs-compat/-/rxjs-compat-6.6.3.tgz",
+      "resolved": "https://registry.npmjs.org/rxjs-compat/-/rxjs-compat-6.3.3.tgz",
-      "integrity": "sha512-y+wUqq7bS2dG+7rH2fNMoxsDiJ32RQzFxZQE/JdtpnmEZmwLQrb1tCiItyHxdXJHXjmHnnzFscn3b6PEmORGKw=="
+      "integrity": "sha512-caGN7ixiabHpOofginKEquuHk7GgaCrC7UpUQ9ZqGp80tMc68msadOeP/2AKy2R4YJsT1+TX5GZCtxO82qWkyA=="
     },
     "safe-buffer": {
       "version": "5.1.2",

package.json

@@ -21,13 +21,14 @@
     "@angular/platform-browser": "^6.1.0",
     "@angular/platform-browser-dynamic": "^6.1.0",
     "@angular/router": "^6.1.0",
+    "@types/jqueryui": "^1.12.13",
     "angular-autofocus-fix": "^0.1.2",
     "bootstrap": "^3.4.1",
     "core-js": "^2.5.4",
     "font-awesome": "^4.7.0",
     "json-server": "^0.16.1",
     "rxjs": "~6.2.0",
-    "rxjs-compat": "^6.6.3",
+    "rxjs-compat": "^6.3.3",
     "zone.js": "~0.8.26"
   },
   "devDependencies": {

src/app/Todo-List-App/components/todo-empty/todo-empty.component.ts

@@ -8,8 +8,8 @@ import { animate, style, transition, trigger } from '@angular/animations';
   animations: [
     trigger('fade', [
         transition(':enter', [
-            style({opacity: 0, transform: 'translateX(-30px)'}),
+            style({opacity: 0, transform: 'translateX(-10px)'}),
-            animate(1200, style({opacity:0, transform: 'translateY(0px)'}))
+            animate(1000, style({opacity:0, transform: 'translateY(0px)'}))
         ]),
         transition(':leave', [
             style({opacity: 0, transform: 'translateX(0px)'}),

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

@@ -34,7 +34,7 @@ li > *{
 
 .main{
     max-width: 50%;
-    box-shadow: 8px 4px#9cb1a0;
+    box-shadow: 8px 4px#ffffff;
     border-radius: 20px;
     padding: 0;
 }
@@ -45,7 +45,7 @@ li > *{
 }
 
 .nav{
-    background-color:#bfdbc546;
+    /* background-color:#000000; */
     display: block;
     /* color: white; */
     line-height: 3em;
@@ -55,7 +55,7 @@ li > *{
 }
 
 .main-container{
-    margin: 4%;
+    margin: 2%;
 }
 
 .main{
@@ -63,13 +63,14 @@ li > *{
 }
 
 li{
-    background-color:	#b9ecc24d;
+    background-color:	#ffffff85;
     margin: 4px;
     display: flex;
     align-items: center;
     padding-left: 10px;
     font-size: 2rem;
     line-height: 1.5em;
+    border-radius: 10px;
 }
 
 .info{
@@ -77,6 +78,10 @@ li{
     justify-content: flex-end;
 }
 
+.selectall{
+    margin-top: -30px;
+}
+
 input[type="checkbox"]{
     margin: 0 10px;
 }
@@ -84,6 +89,11 @@ input[type="checkbox"]{
 .dateClass{
     font-size: 1.5em;
     float: right;
-    padding-right: 20px;
+    margin-right: 20px;
-    color: rgb(42, 59, 59);
+    color: rgb(0, 0, 0);
+    background-color: rgb(255, 255, 255);
+    padding: 0 10px;
+    border-radius: 20px;
 }
+
+

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

@@ -1,20 +1,17 @@
 <div class="container main">
-    <div class="nav">Hello! <span class="dateClass">{{today | date: 'short'}}</span></div>
+    <div class="nav"><span class="dateClass"><i class="fa fa-calendar"></i> {{today | date: 'short'}}</span></div>
     <div class="main-container">
         <div class="header">
             <h1>TODO LIST <i class="fa fa-pencil"></i></h1>
         </div>
         <div *ngIf="remaining() !== 0">
-            <div class="info"><input type="checkbox" (change)="selectAll()">Select All</div>
+            <div class="info selectall"><input type="checkbox" (change)="selectAll()">Select All</div>
         </div>
         <div class="inputDiv">
             <input type="text" class="form-control addInput" placeholder="Things you want to do today?" [(ngModel)]="taskTitle" (keyup.enter) = "addTask()">
         </div>
         <div class="content">
-            <!-- all task completed template-->
+            
-            <div *ngIf="remaining() === 0">
-                <todo-empty></todo-empty>
-            </div>
             <ul>
                 <li *ngFor= "let task of tasks" @fade>
                     <input type="checkbox" [(ngModel)]="task.completed">
@@ -39,6 +36,10 @@
                     </div>
                 </li>
             </ul>
+            <!-- all task completed template-->
+            <div *ngIf="remaining() === 0">
+                <todo-empty></todo-empty>
+            </div>
             <div class="info">
                 <div>{{ remaining()}} uncompleted tasks</div>
             </div>

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

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

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

@@ -29,4 +29,6 @@ export class TodoService{
     deleteTask(task: Tasks){
         return this.http.delete(URL + '/' + task.id);
     }
+
+
 }