To-Do List Application using DOM and Event Delegation
1. HTML, CSS, and JavaScript Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>To-Do List Application</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #f4f6f8;
}
.container {
max-width: 600px;
margin: 40px auto;
background: #ffffff;
padding: 20px;
border-radius: 8px;
}
[Link] span {
text-decoration: line-through;
color: gray;
}
</style>
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<input type="text" id="taskInput" placeholder="Enter new task" />
<button id="addTaskButton">Add Task</button>
<ul id="taskList"></ul>
</div>
<script>
const taskInput = [Link]('taskInput');
const addTaskButton = [Link]('addTaskButton');
const taskList = [Link]('taskList');
[Link]('click', () => {
const taskText = [Link]();
if (taskText === '') return;
const listItem = [Link]('li');
[Link] = `
<input type="checkbox" class="completeCheckbox" />
<span>${taskText}</span>
<button class="editButton">Edit</button>
<button class="removeButton">Remove</button>
`;
[Link](listItem);
[Link] = '';
});
[Link]('click', (event) => {
const target = [Link];
const listItem = [Link]('li');
if ([Link]('removeButton')) {
[Link](listItem);
}
if ([Link]('editButton')) {
const taskSpan = [Link]('span');
const updatedTask = prompt('Edit task:', [Link]);
if (updatedTask) [Link] = updatedTask;
}
});
[Link]('change', (event) => {
if ([Link]('completeCheckbox')) {
[Link]('li').[Link]('completed');
}
});
</script>
</body>
</html>
2. Explanation of Code Intent
The purpose of this application is to demonstrate dynamic DOM manipulation and efficient
event handling. DOM methods such as [Link]() and appendChild() are
used to add tasks dynamically, while removeChild() updates the document structure in
response to user actions (Shute, 2019). Event delegation is implemented by attaching a
single event listener to the task list container, allowing all Edit, Remove, and checkbox
interactions to be handled efficiently. This approach improves performance and aligns with
best practices recommended in MDN Web Docs (2023).
3. Screenshots of Output
[Insert Screenshot 1 here: Initial to-do list interface]
[Insert Screenshot 2 here: Edit task dialog box]
4. Use of Descriptive Naming
Variable names such as taskInput, addTaskButton, and taskList clearly indicate their roles
within the application. Class names like removeButton and editButton reflect the user
actions they represent, improving readability and maintainability of the code.
5. References (APA)
MDN Web Docs. (2023). Document Object Model (DOM). [Link]
US/docs/Web/API/Document_Object_Model
MDN Web Docs. (2023). Introduction to Events.
[Link]
Shute, Z. (2019). Advanced JavaScript: Speed up web development with the powerful
features and benefits of JavaScript. Packt Publishing.
Jeansoulin, R. (2018). JavaScript and Open Data. John Wiley & Sons.