isa44.74/To-do-List-App
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

enhancing ui

Browse source
This commit is contained in:
imelilabourne 2020-09-18 12:59:13 +08:00
parent 820107933c
commit 466d4736c1
6 changed files with 21 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
db.json
View file

@ -1,10 +1,16 @@
{
"tasks": [
{
"title": "Drink Coffee",
"title": "30 secs side plank",
"completed": false,
"editing": false,
"id": 1
"id": 4
},
{
"title": "sleep",
"completed": false,
"editing": false,
"id": 5
}
]
}

5
src/app/Todo-List-App/components/todo-empty/todo-empty.component.css
View file

@ -1,8 +1,9 @@
h3{
h5{
font-size: 2em;
margin-top: 1em;
}
.img-div, h3{
.img-div, h5{
display: flex;
justify-content: center;
}

6
src/app/Todo-List-App/components/todo-empty/todo-empty.component.html
View file

@ -1,6 +1,6 @@
<div @fade>
<h3>All Task Accomplished 👻</h3>
<div class="img-div">
<h5>Yey! All task has been completed 👻</h5>
<!-- <div class="img-div">
<img src="../../../../assets/to-do.png" alt="to-do">
</div>
</div> -->
</div>

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

@ -32,6 +32,8 @@ li > *{
margin: 2px;
}
.main{
max-width: 50%;
box-shadow: 8px 6px#858181;

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

@ -4,9 +4,7 @@
<div class="header">
<h1>TODO LIST <i class="fa fa-pencil"></i></h1>
</div>
<div *ngIf="remaining() !== 0">
<div class="info selectall"><input type="checkbox" (change)="selectAll()">Select All</div>
</div>
<div class="info selectall"><input type="checkbox" (change)="selectAll()">Select All</div>
<div class="inputDiv">
<input type="text" class="form-control addInput" placeholder="Things you want to do today?" [(ngModel)]="taskTitle" (keyup.enter) = "addTask()">
</div>
@ -23,15 +21,15 @@
</ng-template>
<!-- buttons switching -->
<div *ngIf="!task.editing; else doneBtn" ><button [ngClass] = "{disabled: task.completed}" class="btn btn-success listBtn"(click)="toggleEdit(task)" ><i class="fa fa-edit"> Edit</i></button></div>
<div *ngIf="!task.editing; else doneBtn" ><button [ngClass] = "{disabled: task.completed}" class="btn btn-success listBtn"(click)="toggleEdit(task)" ><i class="fa fa-edit"> </i>Edit</button></div>
<ng-template #doneBtn>
<div>
<button class="btn btn-success listBtn"(click)="editTask(task); toggleEdit(task)" ><i class="fa fa-edit">Done</i></button>
<button class="btn btn-success listBtn"(click)="editTask(task); toggleEdit(task)" ><i class="fa fa-edit"></i> Done</button>
</div>
</ng-template>
<div>
<button class="btn btn-danger listBtn" (click)="deleteTask(task)"><i class="fa fa-trash"> Del</i></button>
<button class="btn btn-danger listBtn" (click)="deleteTask(task)"><i class="fa fa-trash"> </i> Del</button>
</div>
</li>
</ul>

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

@ -26,7 +26,7 @@ export class TodoList{
taskId: number;
taskTitle: string;
editing: boolean = false;
tasks:Tasks[];
tasks:Tasks[] = [];
beforeEditing: string;
today: number = Date.now();