Skip to content

London | 26-ITP-Jan | Abdul Moiz | Sprint 3 | ToDo List #952

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
A-Moiz wants to merge 1 commit into
base: main
Choose a base branch
from
+117 −57
Open

London | 26-ITP-Jan | Abdul Moiz | Sprint 3 | ToDo List #952

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
75 changes: 45 additions & 30 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,55 @@
<!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
Copy link

@JaypeeLan JaypeeLan Feb 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works fine, and I know you are doing some validation with JavaScript. But since this is a required field, you can do some validation with HTML only. Check on how to do simple validation on input fields using HTML.

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

<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>
<template id="todo-item-template">
<li class="todo-item">
<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>
<button class="clear-completed" id="clear-completed">
Delete completed tasks
</button>
</div>
</body>
</html>
35 changes: 24 additions & 11 deletions Sprint-3/todo-list/script.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// Store everything imported from './todos.mjs' module as properties of an object named Todos
// Store everything imported from './todos.mjs' module as properties of an object named Todos
import * as Todos from "./todos.mjs";

// To store the todo tasks
Expand All @@ -7,26 +7,31 @@ 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("clear-completed")
.addEventListener("click", deleteCompletedTasks);

// Populate sample data
Todos.addTask(todos, "Wash the dishes", false);
Todos.addTask(todos, "Wash the dishes", false);
Todos.addTask(todos, "Do the shopping", true);

render();
});


// A callback that reads the task description from an input field and
// A callback that reads the task description from an input field and
// append a new task to the todo list.
function addNewTodo() {
const taskInput = document.getElementById("new-task-input");
const deadlineInput = document.getElementById("new-task-deadline");
const task = taskInput.value.trim();
const deadline = deadlineInput.value || null;
if (task) {
Copy link

@JaypeeLan JaypeeLan Feb 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works. To improve the user experience, please throw an error to the user if there is no valid input (task in this case).

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

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

// Note:
Expand All @@ -45,32 +50,40 @@ function render() {
});
}


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

// Create a <li> element for the given todo task
function createListItem(todo, index) {
const li = todoListItemTemplate.cloneNode(true); // true => Do a deep copy of the node
const deadline = li.querySelector(".deadline");
if (todo.deadline && !todo.completed) {
deadline.textContent = `Deadline: ${todo.deadline}`;
}

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

li.querySelector('.complete-btn').addEventListener("click", () => {
li.querySelector(".complete-btn").addEventListener("click", () => {
Todos.toggleCompletedOnTask(todos, index);
render();
});
li.querySelector('.delete-btn').addEventListener("click", () => {

li.querySelector(".delete-btn").addEventListener("click", () => {
Todos.deleteTask(todos, index);
render();
});

return li;
}
}

function deleteCompletedTasks() {
Todos.deleteCompleted(todos);
render();
}
11 changes: 10 additions & 1 deletion Sprint-3/todo-list/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ h1 {
.todo-input button {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
background-color: #4caf50;
color: white;
border: none;
border-radius: 6px;
Expand Down Expand Up @@ -105,3 +105,12 @@ h1 {
text-decoration: line-through;
color: gray;
}

.clear-completed {
padding: 10px;
font-size: 20px;
font-weight: bold;
background-color: red;
color: white;
cursor: pointer;
}
14 changes: 11 additions & 3 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,12 @@ export function toggleCompletedOnTask(todos, taskIndex) {
if (todos[taskIndex]) {
todos[taskIndex].completed = !todos[taskIndex].completed;
}
}
}

// Delete all completed Tasks from given list
export function deleteCompleted(todoList) {
let notCompleted = todoList.filter((task) => !task.completed);
if (todoList.length > 0 && todoList.some((task) => task.completed)) {
todoList.splice(0, todoList.length, ...notCompleted);
}
}
39 changes: 27 additions & 12 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 @@ -13,7 +13,7 @@ function createMockTodos() {
{ 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 4 description", completed: false },
];
}

Expand All @@ -23,16 +23,25 @@ const theTask = { task: "The Task", completed: false };
describe("addTask()", () => {
test("Add a task to an empty ToDo list", () => {
let todos = [];
Todos.addTask(todos, theTask.task, theTask.completed);
const theTask = {
task: "Read book",
completed: false,
deadline: null,
};
Todos.addTask(todos, theTask.task, theTask.completed, theTask.deadline);
expect(todos).toHaveLength(1);
expect(todos[0]).toEqual(theTask);
});

test("Should append a new task to the end of a ToDo list", () => {

const todos = createMockTodos();
const lengthBeforeAddition = todos.length;
Todos.addTask(todos, theTask.task, theTask.completed);
const theTask = {
task: "Read book",
completed: false,
deadline: null,
};
Todos.addTask(todos, theTask.task, theTask.completed, theTask.deadline);
// todos should now have one more task
expect(todos).toHaveLength(lengthBeforeAddition + 1);

Expand All @@ -42,7 +51,6 @@ describe("addTask()", () => {
});

describe("deleteTask()", () => {

test("Delete the first task", () => {
const todos = createMockTodos();
const todosBeforeDeletion = createMockTodos();
Expand All @@ -53,7 +61,7 @@ describe("deleteTask()", () => {

expect(todos[0]).toEqual(todosBeforeDeletion[1]);
expect(todos[1]).toEqual(todosBeforeDeletion[2]);
expect(todos[2]).toEqual(todosBeforeDeletion[3]);
expect(todos[2]).toEqual(todosBeforeDeletion[3]);
});

test("Delete the second task (a middle task)", () => {
Expand All @@ -66,7 +74,7 @@ describe("deleteTask()", () => {

expect(todos[0]).toEqual(todosBeforeDeletion[0]);
expect(todos[1]).toEqual(todosBeforeDeletion[2]);
expect(todos[2]).toEqual(todosBeforeDeletion[3]);
expect(todos[2]).toEqual(todosBeforeDeletion[3]);
});

test("Delete the last task", () => {
Expand All @@ -79,7 +87,7 @@ describe("deleteTask()", () => {

expect(todos[0]).toEqual(todosBeforeDeletion[0]);
expect(todos[1]).toEqual(todosBeforeDeletion[1]);
expect(todos[2]).toEqual(todosBeforeDeletion[2]);
expect(todos[2]).toEqual(todosBeforeDeletion[2]);
});

test("Delete a non-existing task", () => {
Expand All @@ -94,7 +102,6 @@ describe("deleteTask()", () => {
});

describe("toggleCompletedOnTask()", () => {

test("Expect the 'completed' property to toggle on an existing task", () => {
const todos = createMockTodos();
const taskIndex = 1;
Expand All @@ -111,13 +118,12 @@ describe("toggleCompletedOnTask()", () => {
const todos = createMockTodos();
const todosBeforeToggle = createMockTodos();
Todos.toggleCompletedOnTask(todos, 1);
expect(todos[0]).toEqual(todosBeforeToggle[0]);

expect(todos[0]).toEqual(todosBeforeToggle[0]);
expect(todos[2]).toEqual(todosBeforeToggle[2]);
expect(todos[3]).toEqual(todosBeforeToggle[3]);
});


test("Expect no change when toggling on a non-existing task", () => {
const todos = createMockTodos();
const todosBeforeToggle = createMockTodos();
Expand All @@ -130,3 +136,12 @@ describe("toggleCompletedOnTask()", () => {
});
});

describe("deleteCompleted()", () => {
test("Delete all completed tasks from list", () => {
const todos = createMockTodos();
const todosBeforeDeleting = createMockTodos();
Todos.deleteCompleted(todos);
expect(todos).toHaveLength(2);
expect(todos[0]).toEqual(todosBeforeDeleting[1]);
});
});