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

Closed
carlosyabreu wants to merge 14 commits into from
Closed

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

Show file tree
Hide file tree
Changes from all 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
1 change: 1 addition & 0 deletions Sprint-3/todo-list/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ <h1>My ToDo List</h1>

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

Expand Down
9 changes: 6 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 @@ -10,7 +10,7 @@ window.addEventListener("load", () => {

// Populate sample data
Todos.addTask(todos, "Wash the dishes", false);
Todos.addTask(todos, "Do the shopping", true);
Todos.addTask(todos, "Do the shopping", false); // if 2nd argument is true the msg 'Do the shopping' is crossed out

render();
});
Expand All @@ -21,8 +21,11 @@ window.addEventListener("load", () => {
function addNewTodo() {
const taskInput = document.getElementById("new-task-input");
const task = taskInput.value.trim();
const deadlineInput = document.getElementById("new-task-deadline");
const deadline = deadlineInput.value || null;

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

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

return li;
}
}
191 changes: 150 additions & 41 deletions Sprint-3/todo-list/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,106 +2,215 @@
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
background-color: #f4f4f4;
padding: 40px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 40px 20px;
display: flex;
align-items: center;
justify-content: center;
}

.todo-container {
max-width: 500px;
max-width: 650px;
width: 100%;
margin: 0 auto;
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.98);
border-radius: 32px;
padding: 36px 32px 44px;
box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
transition: transform 0.2s ease;
}

.todo-container:hover {
transform: scale(1.01);
}

h1 {
text-align: center;
margin-bottom: 20px;
font-size: 2.2rem;
font-weight: 700;
background: linear-gradient(120deg, #2d3748, #4a5568);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
margin-bottom: 32px;
letter-spacing: -0.5px;
}

/* Input area – both field and button fully inside the rounded container */
.todo-input {
display: flex;
gap: 10px;
margin-bottom: 20px;
gap: 14px;
margin-bottom: 36px;
background: #f8fafc;
/* Extra right padding to give more space after the Add button */
padding: 10px 18px 10px 10px;
border-radius: 80px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.02), 0 2px 6px rgba(0,0,0,0.05);
min-height: 70px;
align-items: center;
}

.todo-input input {
flex: 1;
padding: 10px;
font-size: 16px;
border-radius: 6px;
border: 1px solid #ccc;
padding: 16px 22px;
font-size: 1rem;
border: none;
background: white;
border-radius: 60px;
outline: none;
transition: all 0.2s;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
font-weight: 500;
color: #1a202c;
}

.todo-input input:focus {
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
background: #ffffff;
}

.todo-input button {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
padding: 14px 32px;
font-size: 1rem;
font-weight: 600;
background: linear-gradient(95deg, #4c6ef5, #3b4fcf);
color: white;
border: none;
border-radius: 6px;
border-radius: 60px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 8px 18px rgba(60, 80, 200, 0.3);
letter-spacing: 0.5px;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 8px;
/* No margin-right needed; the parent's padding-right provides the space */
}

.todo-input button:hover {
background-color: #45a049;
background: linear-gradient(95deg, #5f7cf5, #4a62e0);
transform: translateY(-2px);
box-shadow: 0 14px 24px -8px rgba(60, 80, 200, 0.5);
}

.todo-input button:active {
transform: translateY(1px);
box-shadow: 0 6px 12px rgba(60, 80, 200, 0.25);
}

/* Todo list styling */
.todo-list {
list-style-type: none;
padding-left: 0;
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 12px;
}

.todo-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 6px;
background-color: #fff;
padding: 14px 20px;
background: #ffffff;
border-radius: 80px;
border: 1px solid #edf2f7;
transition: all 0.2s;
box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.todo-item:hover {
background: #fafcff;
border-color: #cbd5e1;
box-shadow: 0 6px 14px -8px rgba(0,0,0,0.12);
}

.description {
flex: 1;
margin-right: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 16px;
font-size: 1rem;
font-weight: 500;
color: #2d3e50;
word-break: break-word;
white-space: normal;
line-height: 1.4;
}

/* Completed tasks */
.todo-item.completed .description {
text-decoration: line-through;
color: #94a3b8;
}

/* Action buttons */
.actions {
display: flex;
gap: 10px;
gap: 12px;
}

.actions button {
background: none;
border: none;
cursor: pointer;
font-size: 18px;
display: flex;
font-size: 1.2rem;
width: 40px;
height: 40px;
border-radius: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
transition: all 0.2s;
background: #f1f5f9;
color: #475569;
}

.complete-btn i {
color: green;
.actions button:hover {
transform: scale(1.05);
}

.delete-btn i {
color: red;
.complete-btn:hover {
background: #e0f2fe;
color: #0f6b3a;
}

.todo-item.completed .description {
text-decoration: line-through;
color: gray;
.delete-btn:hover {
background: #fee2e2;
color: #c2410c;
}

/* Responsive */
@media (max-width: 550px) {
.todo-container {
padding: 24px 18px 32px;
}
.todo-input {
flex-wrap: wrap;
background: transparent;
padding: 0;
border-radius: 0;
gap: 16px;
min-height: auto;
}
.todo-input input,
.todo-input button {
width: 100%;
border-radius: 60px;
}
.todo-item {
flex-wrap: wrap;
gap: 12px;
border-radius: 32px;
padding: 16px;
}
.actions {
width: 100%;
justify-content: flex-end;
}
}
24 changes: 16 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,35 @@
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;
}
}
}

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