Skip to content

Commit 8b0f436

Browse files
miriamjornamiriamjorna
committed
To do list in new(er) branch
1 parent 10b3ac9 commit 8b0f436

6 files changed

Lines changed: 80 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/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
{
23
"name": "todo-list",
34
"version": "1.0.0",
@@ -21,3 +22,4 @@
2122
"jest": "^30.0.4"
2223
}
2324
}
25+

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

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

45
// To store the todo tasks
@@ -9,14 +10,20 @@ window.addEventListener("load", () => {
910
document.getElementById("add-task-btn").addEventListener("click", addNewTodo);
1011

1112
// Populate sample data
12-
Todos.addTask(todos, "Wash the dishes", false);
13+
Todos.addTask(todos, "Wash the dishes", false);
1314
Todos.addTask(todos, "Do the shopping", true);
1415

16+
document
17+
.getElementById("delete-completed-btn")
18+
.addEventListener("click", () => {
19+
Todos.deleteCompleted(todos);
20+
render();
21+
});
22+
1523
render();
1624
});
1725

18-
19-
// A callback that reads the task description from an input field and
26+
// A callback that reads the task description from an input field and
2027
// append a new task to the todo list.
2128
function addNewTodo() {
2229
const taskInput = document.getElementById("new-task-input");
@@ -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: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
* {
23
box-sizing: border-box;
34
margin: 0;

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
/*
23
A ToDo List (todos) is expected to be represented as an array of objects in
34
the following manner:
@@ -26,4 +27,10 @@ export function toggleCompletedOnTask(todos, taskIndex) {
2627
if (todos[taskIndex]) {
2728
todos[taskIndex].completed = !todos[taskIndex].completed;
2829
}
29-
}
30+
}
31+
32+
export function deleteCompleted(todoList) {
33+
const completed = todoList.filter((todo) => !todo.completed);
34+
todoList.length = 0;
35+
todoList.push(...completed);
36+
}

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
// The tests is prepared to demonstrate we can test the functions
23
// in a module independently.
34

@@ -130,3 +131,12 @@ describe("toggleCompletedOnTask()", () => {
130131
});
131132
});
132133

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

0 commit comments

Comments
 (0)