Skip to content

Commit 91b6a61

Browse files
miriamjornamiriamjorna
committed
To do list homework
1 parent 10b3ac9 commit 91b6a61

4 files changed

Lines changed: 74 additions & 42 deletions

File tree

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

Lines changed: 43 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,52 @@
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>
2027

21-
<ul id="todo-list" class="todo-list">
22-
</ul>
28+
<ul id="todo-list" class="todo-list">
29+
<button id="delete-completed-btn">Delete completed tasks</button>
30+
</ul>
2331

24-
<!--
32+
<!--
2533
This is a template for the To-do list item.
2634
It can simplify the creation of list item node in JS script.
2735
-->
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>
36+
<template id="todo-item-template">
37+
<li class="todo-item">
38+
<!-- include class "completed" if the task completed state is true -->
39+
<span class="description">Task description</span>
40+
<div class="actions">
41+
<button class="complete-btn">
42+
<span class="fa-solid fa-check" aria-hidden="true"></span>
43+
</button>
44+
<button class="delete-btn">
45+
<span class="fa-solid fa-trash" aria-hidden="true"></span>
46+
</button>
47+
</div>
48+
</li>
49+
</template>
50+
</div>
51+
</body>
4052
</html>

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

Lines changed: 15 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
@@ -9,14 +9,20 @@ window.addEventListener("load", () => {
99
document.getElementById("add-task-btn").addEventListener("click", addNewTodo);
1010

1111
// Populate sample data
12-
Todos.addTask(todos, "Wash the dishes", false);
12+
Todos.addTask(todos, "Wash the dishes", false);
1313
Todos.addTask(todos, "Do the shopping", true);
1414

15+
document
16+
.getElementById("delete-completed-btn")
17+
.addEventListener("click", () => {
18+
Todos.deleteCompleted(todos);
19+
render();
20+
});
21+
1522
render();
1623
});
1724

18-
19-
// A callback that reads the task description from an input field and
25+
// A callback that reads the task description from an input field and
2026
// append a new task to the todo list.
2127
function addNewTodo() {
2228
const taskInput = document.getElementById("new-task-input");
@@ -45,12 +51,11 @@ function render() {
4551
});
4652
}
4753

48-
4954
// Note:
5055
// - First child of #todo-item-template is a <li> element.
5156
// We will create each ToDo list item as a clone of this node.
5257
// - This variable is declared here to be close to the only function that uses it.
53-
const todoListItemTemplate =
58+
const todoListItemTemplate =
5459
document.getElementById("todo-item-template").content.firstElementChild;
5560

5661
// Create a <li> element for the given todo task
@@ -62,15 +67,15 @@ function createListItem(todo, index) {
6267
li.classList.add("completed");
6368
}
6469

65-
li.querySelector('.complete-btn').addEventListener("click", () => {
70+
li.querySelector(".complete-btn").addEventListener("click", () => {
6671
Todos.toggleCompletedOnTask(todos, index);
6772
render();
6873
});
69-
70-
li.querySelector('.delete-btn').addEventListener("click", () => {
74+
75+
li.querySelector(".delete-btn").addEventListener("click", () => {
7176
Todos.deleteTask(todos, index);
7277
render();
7378
});
7479

7580
return li;
76-
}
81+
}

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,10 @@ export function toggleCompletedOnTask(todos, taskIndex) {
2626
if (todos[taskIndex]) {
2727
todos[taskIndex].completed = !todos[taskIndex].completed;
2828
}
29-
}
29+
}
30+
31+
export function deleteCompleted(todoList) {
32+
const completed = todoList.filter((todo) => !todo.completed);
33+
todoList.length = 0;
34+
todoList.push(...completed);
35+
}

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,3 +130,12 @@ describe("toggleCompletedOnTask()", () => {
130130
});
131131
});
132132

133+
test("deleteCompleted removes all completed tasks", () => {
134+
const todoList = [
135+
{ task: "Wash dishes", completed: true },
136+
{ task: "Do shopping", completed: false },
137+
{ task: "Read book", completed: true },
138+
];
139+
Todos.deleteCompleted(todoList);
140+
expect(todoList).toEqual([{ task: "Do shopping", completed: false }]);
141+
});

0 commit comments

Comments
 (0)