Skip to content

Commit 5d3ab6a

Browse files
RaihanSharifRaihanSharif
committed
Implement todos app
1 parent 96d077b commit 5d3ab6a

File tree

5 files changed

+126
-53
lines changed

5 files changed

+126
-53
lines changed

‎Sprint-3/todo-list/index.html‎

Lines changed: 45 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,54 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6-
<title>ToDo List</title>
7-
<link rel="stylesheet" href="style.css" />
8-
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>ToDo List</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<link
9+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
10+
rel="stylesheet"
11+
/>
912

10-
<script type="module" src="script.mjs"></script>
11-
</head>
12-
<body>
13-
<div class="todo-container">
14-
<h1>My ToDo List</h1>
13+
<script type="module" src="script.mjs"></script>
14+
</head>
15+
<body>
16+
<div class="todo-container">
17+
<h1>My ToDo List</h1>
1518

16-
<div class="todo-input">
17-
<input type="text" id="new-task-input" placeholder="Enter a new task..." />
18-
<button id="add-task-btn">Add</button>
19-
</div>
19+
<div class="todo-input">
20+
<input
21+
type="text"
22+
id="new-task-input"
23+
placeholder="Enter a new task..."
24+
/>
25+
<button id="add-task-btn">Add</button>
26+
</div>
27+
28+
<div id="additional-buttons">
29+
<button id="delete-all-completed-btn">Delete completed Tasks</button>
30+
</div>
2031

21-
<ul id="todo-list" class="todo-list">
22-
</ul>
32+
<ul id="todo-list" class="todo-list"></ul>
2333

24-
<!--
34+
<!--
2535
This is a template for the To-do list item.
2636
It can simplify the creation of list item node in JS script.
2737
-->
28-
<template id="todo-item-template">
29-
<li class="todo-item"> <!-- include class "completed" if the task completed state is true -->
30-
<span class="description">Task description</span>
31-
<div class="actions">
32-
<button class="complete-btn"><span class="fa-solid fa-check" aria-hidden="true"></span></button>
33-
<button class="delete-btn"><span class="fa-solid fa-trash" aria-hidden="true"></span></button>
34-
</div>
35-
</li>
36-
</template>
37-
38-
</div>
39-
</body>
38+
<template id="todo-item-template">
39+
<li class="todo-item">
40+
<!-- include class "completed" if the task completed state is true -->
41+
<span class="description">Task description</span>
42+
<div class="actions">
43+
<button class="complete-btn">
44+
<span class="fa-solid fa-check" aria-hidden="true"></span>
45+
</button>
46+
<button class="delete-btn">
47+
<span class="fa-solid fa-trash" aria-hidden="true"></span>
48+
</button>
49+
</div>
50+
</li>
51+
</template>
52+
</div>
53+
</body>
4054
</html>

‎Sprint-3/todo-list/script.mjs‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Store everything imported from './todos.mjs' module as properties of an object named Todos
1+
// Store everything imported from './todos.mjs' module as properties of an object named Todos
22
import * as Todos from "./todos.mjs";
33

44
// To store the todo tasks
@@ -7,16 +7,18 @@ const todos = [];
77
// Set up tasks to be performed once on page load
88
window.addEventListener("load", () => {
99
document.getElementById("add-task-btn").addEventListener("click", addNewTodo);
10+
document
11+
.getElementById("delete-all-completed-btn")
12+
.addEventListener("click", deleteAllCompleted);
1013

1114
// Populate sample data
12-
Todos.addTask(todos, "Wash the dishes", false);
15+
Todos.addTask(todos, "Wash the dishes", false);
1316
Todos.addTask(todos, "Do the shopping", true);
1417

1518
render();
1619
});
1720

18-
19-
// A callback that reads the task description from an input field and
21+
// A callback that reads the task description from an input field and
2022
// append a new task to the todo list.
2123
function addNewTodo() {
2224
const taskInput = document.getElementById("new-task-input");
@@ -29,6 +31,11 @@ function addNewTodo() {
2931
taskInput.value = "";
3032
}
3133

34+
function deleteAllCompleted() {
35+
Todos.deleteCompleted(todos);
36+
render();
37+
}
38+
3239
// Note:
3340
// - Store the reference to the <ul> element with id "todo-list" here
3441
// to avoid querying the DOM repeatedly inside render().
@@ -45,12 +52,11 @@ function render() {
4552
});
4653
}
4754

48-
4955
// Note:
5056
// - First child of #todo-item-template is a <li> element.
5157
// We will create each ToDo list item as a clone of this node.
5258
// - This variable is declared here to be close to the only function that uses it.
53-
const todoListItemTemplate =
59+
const todoListItemTemplate =
5460
document.getElementById("todo-item-template").content.firstElementChild;
5561

5662
// Create a <li> element for the given todo task
@@ -62,15 +68,15 @@ function createListItem(todo, index) {
6268
li.classList.add("completed");
6369
}
6470

65-
li.querySelector('.complete-btn').addEventListener("click", () => {
71+
li.querySelector(".complete-btn").addEventListener("click", () => {
6672
Todos.toggleCompletedOnTask(todos, index);
6773
render();
6874
});
69-
70-
li.querySelector('.delete-btn').addEventListener("click", () => {
75+
76+
li.querySelector(".delete-btn").addEventListener("click", () => {
7177
Todos.deleteTask(todos, index);
7278
render();
7379
});
7480

7581
return li;
76-
}
82+
}

‎Sprint-3/todo-list/style.css‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ h1 {
4141
.todo-input button {
4242
padding: 10px 20px;
4343
font-size: 16px;
44-
background-color: #4CAF50;
44+
background-color: #4caf50;
4545
color: white;
4646
border: none;
4747
border-radius: 6px;
@@ -105,3 +105,24 @@ h1 {
105105
text-decoration: line-through;
106106
color: gray;
107107
}
108+
109+
#additional-buttons {
110+
display: flex;
111+
gap: 10px;
112+
margin-bottom: 20px;
113+
/* justify-items: flex-end; */
114+
justify-content: end;
115+
}
116+
#delete-all-completed-btn {
117+
padding: 10px 20px;
118+
font-size: 16px;
119+
background-color: #e70909;
120+
color: white;
121+
border: none;
122+
border-radius: 6px;
123+
cursor: pointer;
124+
}
125+
126+
#delete-all-completed-btn:hover {
127+
background-color: #d60707;
128+
}

‎Sprint-3/todo-list/todos.mjs‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,11 @@ export function toggleCompletedOnTask(todos, taskIndex) {
2626
if (todos[taskIndex]) {
2727
todos[taskIndex].completed = !todos[taskIndex].completed;
2828
}
29-
}
29+
}
30+
31+
// filters and then splices
32+
export function deleteCompleted(todos) {
33+
const incompleteOnly = todos.filter((item) => !item.completed);
34+
todos.splice(0, todos.length, ...incompleteOnly);
35+
return todos;
36+
}

‎Sprint-3/todo-list/todos.test.mjs‎

Lines changed: 35 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ function createMockTodos() {
1313
{ task: "Task 1 description", completed: true },
1414
{ task: "Task 2 description", completed: false },
1515
{ task: "Task 3 description", completed: true },
16-
{ task: "Task 4 description", completed: false },
16+
{ task: "Task 4 description", completed: false },
1717
];
1818
}
1919

@@ -29,7 +29,6 @@ describe("addTask()", () => {
2929
});
3030

3131
test("Should append a new task to the end of a ToDo list", () => {
32-
3332
const todos = createMockTodos();
3433
const lengthBeforeAddition = todos.length;
3534
Todos.addTask(todos, theTask.task, theTask.completed);
@@ -42,7 +41,6 @@ describe("addTask()", () => {
4241
});
4342

4443
describe("deleteTask()", () => {
45-
4644
test("Delete the first task", () => {
4745
const todos = createMockTodos();
4846
const todosBeforeDeletion = createMockTodos();
@@ -53,7 +51,7 @@ describe("deleteTask()", () => {
5351

5452
expect(todos[0]).toEqual(todosBeforeDeletion[1]);
5553
expect(todos[1]).toEqual(todosBeforeDeletion[2]);
56-
expect(todos[2]).toEqual(todosBeforeDeletion[3]);
54+
expect(todos[2]).toEqual(todosBeforeDeletion[3]);
5755
});
5856

5957
test("Delete the second task (a middle task)", () => {
@@ -66,7 +64,7 @@ describe("deleteTask()", () => {
6664

6765
expect(todos[0]).toEqual(todosBeforeDeletion[0]);
6866
expect(todos[1]).toEqual(todosBeforeDeletion[2]);
69-
expect(todos[2]).toEqual(todosBeforeDeletion[3]);
67+
expect(todos[2]).toEqual(todosBeforeDeletion[3]);
7068
});
7169

7270
test("Delete the last task", () => {
@@ -79,7 +77,7 @@ describe("deleteTask()", () => {
7977

8078
expect(todos[0]).toEqual(todosBeforeDeletion[0]);
8179
expect(todos[1]).toEqual(todosBeforeDeletion[1]);
82-
expect(todos[2]).toEqual(todosBeforeDeletion[2]);
80+
expect(todos[2]).toEqual(todosBeforeDeletion[2]);
8381
});
8482

8583
test("Delete a non-existing task", () => {
@@ -94,7 +92,6 @@ describe("deleteTask()", () => {
9492
});
9593

9694
describe("toggleCompletedOnTask()", () => {
97-
9895
test("Expect the 'completed' property to toggle on an existing task", () => {
9996
const todos = createMockTodos();
10097
const taskIndex = 1;
@@ -111,13 +108,12 @@ describe("toggleCompletedOnTask()", () => {
111108
const todos = createMockTodos();
112109
const todosBeforeToggle = createMockTodos();
113110
Todos.toggleCompletedOnTask(todos, 1);
114-
115-
expect(todos[0]).toEqual(todosBeforeToggle[0]);
111+
112+
expect(todos[0]).toEqual(todosBeforeToggle[0]);
116113
expect(todos[2]).toEqual(todosBeforeToggle[2]);
117114
expect(todos[3]).toEqual(todosBeforeToggle[3]);
118115
});
119116

120-
121117
test("Expect no change when toggling on a non-existing task", () => {
122118
const todos = createMockTodos();
123119
const todosBeforeToggle = createMockTodos();
@@ -130,3 +126,32 @@ describe("toggleCompletedOnTask()", () => {
130126
});
131127
});
132128

129+
describe("deleteCompleted()", () => {
130+
const todos = createMockTodos();
131+
const afterDelete = [
132+
{ task: "Task 2 description", completed: false },
133+
{ task: "Task 4 description", completed: false },
134+
];
135+
136+
test("Expect completed tasks to be deleted, if there are any", () => {
137+
expect(Todos.deleteCompleted(todos)).toEqual(afterDelete);
138+
});
139+
140+
test("Expect nothing to be delete if there are no tasks to be deleted", () => {
141+
const noCompletedTodos = [
142+
{ task: "Task 2 description", completed: false },
143+
{ task: "Task 4 description", completed: false },
144+
];
145+
expect(Todos.deleteCompleted(noCompletedTodos)).toEqual(noCompletedTodos);
146+
});
147+
148+
test("Expect empty array if all tasks are completed", () => {
149+
const allTaskCompleted = [
150+
{ task: "Task 1 description", completed: true },
151+
{ task: "Task 2 description", completed: true },
152+
{ task: "Task 3 description", completed: true },
153+
{ task: "Task 4 description", completed: true },
154+
];
155+
expect(Todos.deleteCompleted(allTaskCompleted)).toEqual([]);
156+
});
157+
});

0 commit comments

Comments
 (0)