Skip to content

CAPE TOWN | 26-ITP-May | ASANDA DUNN | Sprint 3| Todo list #1471

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
asandagwala wants to merge 2 commits into
base: main
Choose a base branch
from
Open

CAPE TOWN | 26-ITP-May | ASANDA DUNN | Sprint 3| Todo list #1471

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2b1b28b
Add mass delete for completed todos
asandagwala Sep 16, 2026
e8b253a
Add mass delete for completed todos
asandagwala Sep 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 45 additions & 31 deletions Sprint-3/todo-list/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,54 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>ToDo List</title>
<link rel="stylesheet" href="style.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ToDo List</title>
<link rel="stylesheet" href="style.css" />
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
rel="stylesheet"
/>

<script type="module" src="script.mjs"></script>
</head>
<body>
<div class="todo-container">
<h1>My ToDo List</h1>
<script type="module" src="script.mjs"></script>
</head>
<body>
<div class="todo-container">
<h1>My ToDo List</h1>

<div class="todo-input">
<input type="text" id="new-task-input" placeholder="Enter a new task..." />
<button id="add-task-btn">Add</button>
</div>
<div class="todo-input">
<input
type="text"
id="new-task-input"
placeholder="Enter a new task..."
/>
<input type="date" id="deadline-input" />
<button id="add-task-btn">Add</button>
</div>

<button id="delete-completed-btn">Delete completed tasks</button>

<ul id="todo-list" class="todo-list">
</ul>
<ul id="todo-list" class="todo-list"></ul>

<!--
<!--
This is a template for the To-do list item.
It can simplify the creation of list item node in JS script.
-->
<template id="todo-item-template">
<li class="todo-item"> <!-- include class "completed" if the task completed state is true -->
<span class="description">Task description</span>
<div class="actions">
<button class="complete-btn"><span class="fa-solid fa-check" aria-hidden="true"></span></button>
<button class="delete-btn"><span class="fa-solid fa-trash" aria-hidden="true"></span></button>
</div>
</li>
</template>

</div>
</body>
<template id="todo-item-template">
<li class="todo-item">
<!-- include class "completed" if the task completed state is true -->
<span class="description">Task description</span>
<span class = "deadline"></span>
<div class="actions">
<button class="complete-btn">
<span class="fa-solid fa-check" aria-hidden="true"></span>
</button>
<button class="delete-btn">
<span class="fa-solid fa-trash" aria-hidden="true"></span>
</button>
</div>
</li>
</template>
</div>
</body>
</html>
6 changes: 3 additions & 3 deletions Sprint-3/todo-list/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
"description": "You must update this package",
"type": "module",
"scripts": {
"serve": "http-server",
"test": "NODE_OPTIONS=--experimental-vm-modules jest"
"serve": "http-server",
"test": "set NODE_OPTIONS=--experimental-vm-modules && jest"
},
"repository": {
"type": "git",
Expand All @@ -17,7 +17,7 @@
},
"homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme",
"devDependencies": {
"http-server": "^14.1.1",
"http-server": "^14.1.1",
"jest": "^30.0.4"
}
}
21 changes: 18 additions & 3 deletions Sprint-3/todo-list/script.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const todos = [];
// Set up tasks to be performed once on page load
window.addEventListener("load", () => {
document.getElementById("add-task-btn").addEventListener("click", addNewTodo);
document.getElementById("delete-completed-btn").addEventListener("click",deleteCompletedTodos);

// Populate sample data
Todos.addTask(todos, "Wash the dishes", false);
Expand All @@ -20,13 +21,23 @@ window.addEventListener("load", () => {
// append a new task to the todo list.
function addNewTodo() {
const taskInput = document.getElementById("new-task-input");
const deadlineInput = document.getElementById("deadline-input");

const task = taskInput.value.trim();
const deadline = deadlineInput.value || null;

if (task) {
Todos.addTask(todos, task, false);
Todos.addTask(todos, task, false, deadline);
render();
}

taskInput.value = "";
deadlineInput.value = "";
}

function deleteCompletedTodos() {
Todos.deleteCompleted(todos);
render();
}

// Note:
Expand Down Expand Up @@ -58,9 +69,13 @@ function createListItem(todo, index) {
const li = todoListItemTemplate.cloneNode(true); // true => Do a deep copy of the node

li.querySelector(".description").textContent = todo.task;
if (todo.completed) {
li.classList.add("completed");

if (todo.deadline){
li.querySelector(".deadline").textContent = `Deadline: ${todo.deadline}`;
}
if (todo.completed) {
li.classList.add("completed");
}

li.querySelector('.complete-btn').addEventListener("click", () => {
Todos.toggleCompletedOnTask(todos, index);
Expand Down
13 changes: 11 additions & 2 deletions Sprint-3/todo-list/todos.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
*/

// Append a new task to todos[]
export function addTask(todos, task, completed = false) {
todos.push({ task, completed });
export function addTask(todos, task, completed = false, deadline = null) {
todos.push({ task, completed, deadline });
}

// Delete todos[taskIndex] if it exists
Expand All @@ -26,4 +26,13 @@ export function toggleCompletedOnTask(todos, taskIndex) {
if (todos[taskIndex]) {
todos[taskIndex].completed = !todos[taskIndex].completed;
}
}

// Delete all completed tasks
export function deleteCompleted(todos) {
for (let i = todos.length - 1; i >= 0; i--) {
if (todos[i].completed) {
todos.splice(i, 1);
}
}
}
30 changes: 25 additions & 5 deletions Sprint-3/todo-list/todos.test.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ import * as Todos from "./todos.mjs";
// Return a mock ToDo List data with exactly 4 elements.
function createMockTodos() {
return [
{ task: "Task 1 description", completed: true },
{ task: "Task 2 description", completed: false },
{ task: "Task 3 description", completed: true },
{ task: "Task 4 description", completed: false },
{ task: "Task 1 description", completed: true, deadline: null },
{ task: "Task 2 description", completed: false, deadline:null},
{ task: "Task 3 description", completed: true, deadline: null },
{ task: "Task 4 description", completed: false, deadline: null },
];
}

// A mock task to simulate user input
const theTask = { task: "The Task", completed: false };
const theTask = { task: "The Task", completed: false, deadline: null };

describe("addTask()", () => {
test("Add a task to an empty ToDo list", () => {
Expand Down Expand Up @@ -130,3 +130,23 @@ describe("toggleCompletedOnTask()", () => {
});
});

describe("deleteCompleted()", () => {
test("Delete all completed tasks", () => {
const todos = createMockTodos();

Todos.deleteCompleted(todos);

expect(todos).toHaveLength(2);
expect(todos[0]).toEqual({
task: "Task 2 description",
completed: false,
deadline: null
});
expect(todos[1]).toEqual({
task: "Task 4 description",
completed: false,
deadline: null
});
});
});

Loading