How can a user choose a deadline for the task?

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"));

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

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:

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

This works correctly. You can also research build in array functions that allow you to filter elements

Thank you for pointing that out.
Definitely I'll research that option of building an array functions that allows element filtering to expand my knowledge.