Skip to content

London | 26-ITP-Jan | Carlos Abreu |Sprint 3 | Todo List #1147

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
carlosyabreu wants to merge 14 commits into
base: main
Choose a base branch
from
Open

London | 26-ITP-Jan | Carlos Abreu |Sprint 3 | Todo List #1147

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
426d6eb
Committed index.html, script.mjs, todos.mjs and todos.test.mjs files
carlosyabreu Mar 29, 2026
6b1ae1a
Update index.html based on voluntier feedback
carlosyabreu Apr 12, 2026
b7e0ecf
Update todos.mjs based on voluntier feedback
carlosyabreu Apr 12, 2026
e529e16
Created webapp.js based on voluntier feedback
carlosyabreu Apr 12, 2026
3ad8ce9
Little change to todos.mjs
carlosyabreu Apr 12, 2026
3ca4d4b
Little change to webapp.js
carlosyabreu Apr 12, 2026
00a584b
Delete webapp.js file
carlosyabreu Apr 21, 2026
e3b382f
Update index.html
carlosyabreu Apr 21, 2026
0c06712
Update script.mjs
carlosyabreu Apr 21, 2026
1669629
Change deadline argument to true
carlosyabreu Apr 22, 2026
958fcfe
Add a new class inside div
carlosyabreu Apr 22, 2026
196ca03
Add new argument to ajust for change in index.html
carlosyabreu Apr 22, 2026
bf2eb25
Enlarged the container and ensured the Add button fits completely ins…
carlosyabreu Apr 22, 2026
fbca2df
The deleteCompleted function has been added to todos.mjs to match the…
carlosyabreu Apr 23, 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
176 changes: 144 additions & 32 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,152 @@
<!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">

<script type="module" src="script.mjs"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List App</title>
<style>
body {
Copy link
Copy Markdown

@Luro91 Luro91 Apr 13, 2026

Choose a reason for hiding this comment

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

Why did you move the styles to the html file?

font-family: Arial, sans-serif;
max-width: 600px;
margin: 50px auto;
padding: 20px;
background-color: #f5f5f5;
}

h1 {
color: #333;
text-align: center;
}

.add-task-form {
background: white;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.add-task-form input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}

.add-task-form input[type="text"] {
font-size: 16px;
}

.add-task-form input[type="datetime-local"] {
font-size: 14px;
}

.add-task-form button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}

.add-task-form button:hover {
background-color: #45a049;
}

.todo-list {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.todo-item {
padding: 15px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}

.todo-item span {
flex: 1;
word-break: break-word;
}

.completed {
background-color: #e8f5e8;
text-decoration: line-through;
color: #666;
}

.todo-item button {
padding: 5px 10px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}

.todo-item button:first-of-type {
background-color: #2196F3;
color: white;
}

.todo-item button:first-of-type:hover {
background-color: #0b7dda;
}

.todo-item button:last-of-type {
background-color: #f44336;
color: white;
}

.todo-item button:last-of-type:hover {
background-color: #da190b;
}

@media (max-width: 500px) {
.todo-item {
flex-direction: column;
align-items: stretch;
}

.todo-item button {
width: 100%;
margin: 5px 0;
}
}

.empty-message {
text-align: center;
color: #999;
padding: 20px;
}
</style>
</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>
<h1>📝 Todo List</h1>

<div class="add-task-form">
<input type="text" id="taskInput" placeholder="Enter task description (e.g., Finish project report)">
<input type="datetime-local" id="deadlineInput">
<button id="addBtn">➕ Add Task</button>
Copy link
Copy Markdown

@Luro91 Luro91 Apr 13, 2026

Choose a reason for hiding this comment

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

The add task button does not work for me. Nothing happens when I click it

</div>

<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>

<div class="todo-list">
<h3>Your Tasks</h3>
<div id="todoList"></div>
</div>

<script type="module" src="web-app.js"></script>
Copy link
Copy Markdown

@Luro91 Luro91 Apr 13, 2026

Choose a reason for hiding this comment

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

Why did you change the name of the script file?

</body>
</html>
13 changes: 12 additions & 1 deletion Sprint-3/todo-list/script.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,16 @@ const todos = [];
window.addEventListener("load", () => {
document.getElementById("add-task-btn").addEventListener("click", addNewTodo);

document
.getElementById("delete-completed-btn")
.addEventListener("click", deleteCompletedTasks);

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

Todos.addTask(todos, "Finish assignment", false, "2026-04-01");

render();
});

Expand Down Expand Up @@ -73,4 +79,9 @@ function createListItem(todo, index) {
});

return li;
}
}

function deleteCompletedTasks() {
Todos.deleteCompleted(todos);
render();
}
15 changes: 7 additions & 8 deletions Sprint-3/todo-list/todos.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,26 @@
the following manner:

[
{ task: "Description of task 1", completed: false},
{ task: "Description of task 2", completed: true}
{ task: "Description of task 1", completed: false, deadline: null },
{ task: "Description of task 2", completed: true, deadline: "2026-12-31T23:59" }
]

*/

// 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) {
Copy link
Copy Markdown

@Luro91 Luro91 Apr 6, 2026

Choose a reason for hiding this comment

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

How can a user choose a deadline for the task?

Copy link
Copy Markdown
Author

@carlosyabreu carlosyabreu Apr 6, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

If addTask function had a deadline parameter but the function body doesn't actually use it (it still only creates { task, completed }), there are a few ways a user could choose a deadline:

Modify the function to include deadline in the task object
First, it needs to update the function implementation to actually store the deadline:

// Updated todos.mjs
export function addTask(todos, task, completed = false, deadline = null) {
todos.push({ task, completed, deadline });
}

Then a user could specify a deadline when calling the function:

// Pass deadline as the 4th parameter
const deadline = new Date("2026-12-31");
Todos.addTask(todos, "Finish project", false, deadline);

// Or with different deadlines
Todos.addTask(todos, "Morning meeting", false, new Date("2026-04-07T09:00:00"));
Todos.addTask(todos, "Submit report", false, new Date("2026-04-10"));

Copy link
Copy Markdown

@Luro91 Luro91 Apr 7, 2026

Choose a reason for hiding this comment

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

How would an end user call a function when using the web page?

Copy link
Copy Markdown
Author

@carlosyabreu carlosyabreu Apr 8, 2026

Choose a reason for hiding this comment

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

That's an interesting question.
I would expose this functionality to end users through a web page creating a UI that allows users to interact with these functions.

Here's how I could build a web interface using HTML and CSS:

<title>Todo List App</title> <style> .todo-item { margin: 10px 0; padding: 10px; border: 1px solid #ccc; } .completed { text-decoration: line-through; background-color: #e0ffe0; } button { margin-left: 10px; } </style>

Todo List

<!-- Add Task Form -->
<div>
    <input type="text" id="taskInput" placeholder="Enter task description">
    <input type="datetime-local" id="deadlineInput">
    <button id="addBtn">Add Task</button>
</div>

<!-- Todo List Display -->
<div id="todoList"></div>

<script type="module" src="web-app.js"></script>

JavaScript Frontend (web-app.js):

// Import the todos module
import * as Todos from "./todos.mjs";

// Initialize empty todo list
let todos = [];

// DOM elements
const taskInput = document.getElementById('taskInput');
const deadlineInput = document.getElementById('deadlineInput');
const addBtn = document.getElementById('addBtn');
const todoListDiv = document.getElementById('todoList');

// Function to render the todo list to the page
function renderTodos() {
if (!todoListDiv) return;

todoListDiv.innerHTML = '';

todos.forEach((todo, index) => {
    const todoDiv = document.createElement('div');
    todoDiv.className = 'todo-item';
    if (todo.completed) {
        todoDiv.classList.add('completed');
    }
    
    // Task text with deadline info
    let taskHtml = `<strong>${todo.task}</strong>`;
    if (todo.deadline) {
        const deadlineDate = new Date(todo.deadline);
        taskHtml += ` <small>(Due: ${deadlineDate.toLocaleString()})</small>`;
    }
    
    // Toggle completed button
    const toggleBtn = document.createElement('button');
    toggleBtn.textContent = todo.completed ? '✓ Completed' : '○ Incomplete';
    toggleBtn.onclick = () => {
        Todos.toggleCompletedOnTask(todos, index);
        renderTodos(); // Re-render to show changes
    };
    
    // Delete button
    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = 'Delete';
    deleteBtn.onclick = () => {
        Todos.deleteTask(todos, index);
        renderTodos(); // Re-render to show changes
    };
    
    todoDiv.innerHTML = taskHtml;
    todoDiv.appendChild(toggleBtn);
    todoDiv.appendChild(deleteBtn);
    todoListDiv.appendChild(todoDiv);
});

// Show message if list is empty
if (todos.length === 0) {
    todoListDiv.innerHTML = '<p>No tasks yet. Add one above!</p>';
}

}

// Add task function (connects UI to the todos module)
function addTaskFromUI() {
const taskText = taskInput.value.trim();

if (!taskText) {
    alert('Please enter a task description');
    return;
}

// Get deadline from input
let deadline = null;
if (deadlineInput.value) {
    deadline = new Date(deadlineInput.value);
}

// Call the addTask function with deadline
// Note: You need to update todos.mjs to actually use the deadline parameter
Todos.addTask(todos, taskText, false, deadline);

// Clear inputs
taskInput.value = '';
deadlineInput.value = '';

// Re-render the updated list
renderTodos();

}

// Event listeners
addBtn.addEventListener('click', addTaskFromUI);
taskInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
addTaskFromUI();
}
});

// Initial render
renderTodos();

The end users would interact adding a task with deadline:
Type task description in the text box.
Select a date/time from the datetime-local input (this is how users choose a deadline)
Click "Add Task" button or press Enter
Toggling task completion:
Clicking the Completed or Incomplete button next to any task, then the task's appearance will change.
Deleting a task:
Click the Delete button next to any task

Copy link
Copy Markdown

@Luro91 Luro91 Apr 9, 2026

Choose a reason for hiding this comment

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

Why didn't you commit this changes? At the moment the code includes parts that are not really functional. They should either be removed or additional code should be added to make it work

Copy link
Copy Markdown
Author

@carlosyabreu carlosyabreu Apr 12, 2026

Choose a reason for hiding this comment

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

You're absolutely right!
Looking more closely to the code it had a critical issue the todos.mjs function wasn't actually storing the deadline parameter. I refactored the code based on your feedback.
Thank you

todos.push({ task, completed, deadline });
}

// Delete todos[taskIndex] if it exists
// Delete todos[taskIndex]
export function deleteTask(todos, taskIndex) {
if (todos[taskIndex]) {
todos.splice(taskIndex, 1);
}
}

// Toggle the "completed" property of todos[taskIndex] if the task exists.
// Toggle the "completed" property of todos[taskIndex]
export function toggleCompletedOnTask(todos, taskIndex) {
if (todos[taskIndex]) {
todos[taskIndex].completed = !todos[taskIndex].completed;
}
}
}
51 changes: 46 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: "2026-04-01" },
{ task: "Task 2 description", completed: false, deadline: null },
{ task: "Task 3 description", completed: true, deadline: "2026-04-05" },
{ 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,44 @@ describe("toggleCompletedOnTask()", () => {
});
});

describe("deleteCompleted()", () => {
Copy link
Copy Markdown

@Luro91 Luro91 Apr 13, 2026

Choose a reason for hiding this comment

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

All 3 tests fail for me with the error "Todos.deleteCompleted is not a function"

Copy link
Copy Markdown

@Luro91 Luro91 Apr 23, 2026

Choose a reason for hiding this comment

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

The tests are still failing.


test("Remove all completed tasks", () => {
const todos = createMockTodos();

Todos.deleteCompleted(todos);

// Only incomplete tasks should remain
expect(todos).toHaveLength(2);
expect(todos[0].completed).toBe(false);
expect(todos[1].completed).toBe(false);

expect(todos[0].task).toBe("Task 2 description");
expect(todos[1].task).toBe("Task 4 description");
});

test("No change if no tasks are completed", () => {
const todos = [
{ task: "Task A", completed: false },
{ task: "Task B", completed: false }
];

const before = JSON.parse(JSON.stringify(todos));

Todos.deleteCompleted(todos);

expect(todos).toEqual(before);
});

test("All tasks removed if all are completed", () => {
const todos = [
{ task: "Task A", completed: true },
{ task: "Task B", completed: true }
];

Todos.deleteCompleted(todos);

expect(todos).toHaveLength(0);
});

});
Loading
Loading