modified design
This commit is contained in:
imelilabourne
parent
247c891a09
commit
c865916256
32
db.json
32
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
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -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",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001129.tgz",
|
||||
"integrity": "sha512-9945fTVKS810DZITpsAbuhQG7Lam0tEfVbZlsBaCFZaszepbryrArS05PWmJSBQ6mta+v9iz0pUIAbW1eBILIg=="
|
||||
"version": "1.0.30001131",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001131.tgz",
|
||||
"integrity": "sha512-4QYi6Mal4MMfQMSqGIRPGbKIbZygeN83QsWq1ixpUwvtfgAZot5BrCKzGygvZaV+CnELdTwD0S4cqUNozq7/Cw=="
|
||||
},
|
||||
"caseless": {
|
||||
"version": "0.12.0",
|
||||
|
|
@ -3106,9 +3127,9 @@
|
|||
"integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
|
||||
},
|
||||
"electron-to-chromium": {
|
||||
"version": "1.3.567",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.567.tgz",
|
||||
"integrity": "sha512-1aKkw0Hha1Bw9JA5K5PT5eFXC/TXbkJvUfNSNEciPUMgSIsRJZM1hF2GUEAGZpAbgvd8En21EA+Lv820KOhvqA=="
|
||||
"version": "1.3.568",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.568.tgz",
|
||||
"integrity": "sha512-j9MlEwgTHVW/lq93Hw8yhzA886oLjDm3Hz7eDkWP2v4fzLVuqOWhpNluziSnmR/tBqgoYldagbLknrdg+B7Tlw=="
|
||||
},
|
||||
"elliptic": {
|
||||
"version": "6.5.3",
|
||||
|
|
@ -3346,9 +3367,9 @@
|
|||
}
|
||||
},
|
||||
"escalade": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.0.2.tgz",
|
||||
"integrity": "sha512-gPYAU37hYCUhW5euPeR+Y74F7BL+IBsV93j5cvGriSaD1aG6MGsqsV1yamRdrWrb2j3aiZvb0X+UBOWpx3JWtQ=="
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.0.tgz",
|
||||
"integrity": "sha512-mAk+hPSO8fLDkhV7V0dXazH5pDc6MrjBTPyD3VeKzxnVFjH1MIxbCdqGZB9O8+EwWakZs3ZCbDS4IpRt79V1ig=="
|
||||
},
|
||||
"escape-goat": {
|
||||
"version": "2.1.1",
|
||||
|
|
@ -8690,9 +8711,9 @@
|
|||
}
|
||||
},
|
||||
"rxjs-compat": {
|
||||
"version": "6.6.3",
|
||||
"resolved": "https://registry.npmjs.org/rxjs-compat/-/rxjs-compat-6.6.3.tgz",
|
||||
"integrity": "sha512-y+wUqq7bS2dG+7rH2fNMoxsDiJ32RQzFxZQE/JdtpnmEZmwLQrb1tCiItyHxdXJHXjmHnnzFscn3b6PEmORGKw=="
|
||||
"version": "6.3.3",
|
||||
"resolved": "https://registry.npmjs.org/rxjs-compat/-/rxjs-compat-6.3.3.tgz",
|
||||
"integrity": "sha512-caGN7ixiabHpOofginKEquuHk7GgaCrC7UpUQ9ZqGp80tMc68msadOeP/2AKy2R4YJsT1+TX5GZCtxO82qWkyA=="
|
||||
},
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ import { animate, style, transition, trigger } from '@angular/animations';
|
|||
animations: [
|
||||
trigger('fade', [
|
||||
transition(':enter', [
|
||||
style({opacity: 0, transform: 'translateX(-30px)'}),
|
||||
animate(1200, style({opacity:0, transform: 'translateY(0px)'}))
|
||||
style({opacity: 0, transform: 'translateX(-10px)'}),
|
||||
animate(1000, style({opacity:0, transform: 'translateY(0px)'}))
|
||||
]),
|
||||
transition(':leave', [
|
||||
style({opacity: 0, transform: 'translateX(0px)'}),
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
color: rgb(42, 59, 59);
|
||||
margin-right: 20px;
|
||||
color: rgb(0, 0, 0);
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 0 10px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -120,11 +120,12 @@ export class TodoList{
|
|||
}))
|
||||
}
|
||||
|
||||
|
||||
clearCompleted(tasks: Tasks){
|
||||
this.tasks = this.tasks.filter(task => !task.completed);
|
||||
|
||||
// this.todoService.deleteTask(tasks)
|
||||
// .subscribe(data => this.tasks.filter(task => !task.completed))
|
||||
this.todoService.deleteTask(tasks)
|
||||
.subscribe(data => this.tasks.filter(task => !task.completed))
|
||||
}
|
||||
|
||||
selectAll():void{
|
||||
|
|
|
|||
|
|
@ -29,4 +29,6 @@ export class TodoService{
|
|||
deleteTask(task: Tasks){
|
||||
return this.http.delete(URL + '/' + task.id);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue