Skip to content

London | 26-ITP-May | Yonatan Teklemariam | Sprint 3 | Todo List #1408

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
Yonatanteklemariam wants to merge 3 commits into
base: main
Choose a base branch
from
+69 −19
Open

London | 26-ITP-May | Yonatan Teklemariam | Sprint 3 | Todo List #1408

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
28a696f
reverted to original
Yonatanteklemariam Jul 7, 2026
cff19af
reverted to original
Yonatanteklemariam Jul 7, 2026
5459639
improve todo list functionality and add deadline calculation feature
Yonatanteklemariam Aug 8, 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
14 changes: 10 additions & 4 deletions Sprint-3/todo-list/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,30 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<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>

<div class="todo-input">
<input 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 id="todo-list" class="todo-list">
</ul>


<button id="delete-completed-btn">Delete completed tasks</button>
<!--
This is a template for the To-do list item.
It can simplify the creation of list item node in JS script.
Expand All @@ -36,5 +40,7 @@ <h1>My ToDo List</h1>
</template>

</div>
<script type="module" src="script.mjs"></script>
</body>
</html>

</html>
2 changes: 1 addition & 1 deletion Sprint-3/todo-list/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"type": "module",
"scripts": {
"serve": "http-server",
"test": "NODE_OPTIONS=--experimental-vm-modules jest"
"test": "set NODE_OPTIONS=--experimental-vm-modules && jest"
},
"repository": {
"type": "git",
Expand Down
52 changes: 41 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 @@ -8,25 +8,33 @@ const todos = [];
window.addEventListener("load", () => {
document.getElementById("add-task-btn").addEventListener("click", addNewTodo);

// prettier-ignore
document.getElementById("delete-completed-btn").addEventListener("click", () => {
Todos.deleteCompleted(todos);
render();
});

// 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) {
Todos.addTask(todos, task, false);
Todos.addTask(todos, task, false, deadline);
render();
}

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

// Note:
Expand All @@ -45,32 +53,54 @@ 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

li.querySelector(".description").textContent = todo.task;
if (todo.deadline) {
const today = new Date();
const due = new Date(todo.deadline);

const diffMs = due - today;
const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));

let message = "";

if (diffDays > 0) {
message = `${diffDays} days remaining`;
} else if (diffDays === 0) {
message = "Due today!";
} else {
message = `${Math.abs(diffDays)} days overdue`;
}

const deadlineSpan = document.createElement("span");

@LonMcGregor LonMcGregor Aug 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Instead of creating a new element here, is there a better place to put this new span element that is more in line with the existing todo list code you started with?

deadlineSpan.classList.add("deadline");
deadlineSpan.textContent = message;
li.appendChild(deadlineSpan);
}

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;
}
}
20 changes: 17 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,14 @@
*/

// 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) {
const newTask = { task, completed };

if (deadline !== undefined) {

@LonMcGregor LonMcGregor Aug 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Is there a way this if condition could be simplified? (hint: Do you need to use !== undefined if you are checking that at least "some" value is present?)

newTask.deadline = deadline;
}

todos.push(newTask);
}

// Delete todos[taskIndex] if it exists
Expand All @@ -26,4 +32,12 @@ 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);
}
}
}
Loading