Exercise 2: To-Do List
HTML (index.html):
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”styles.css”>
<title>To-Do List</title>
</head>
<body>
<div class=”todo-container”>
<h1>To-Do List</h1>
<input type=”text” id=”taskInput” placeholder=”Add a new task”>
<button onclick=”addTask()”>Add Task</button>
<ul id=”taskList”></ul>
</div>
<script src=”script.js”></script>
</body>
</html>
CSS (styles.css):
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.todo-container {
text-align: center;
}
input {
padding: 10px;
font-size: 16px;
}
button {
padding: 10px;
font-size: 16px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 5px;
padding: 10px;
border: 1px solid #ccc;
display: flex;
justify-content: space-between;
}
.delete-btn {
cursor: pointer;
color: red;
font-weight: bold;
}
JavaScript (script.js):
function addTask() {
const taskInput = document.getElementById(‘taskInput’);
const taskList = document.getElementById(‘taskList’);
if (taskInput.value.trim() === ”) {
alert(‘Please enter a task.’);
return;
}
const li = document.createElement(‘li’);
li.innerHTML = `
${taskInput.value}
<span class=”delete-btn” onclick=”deleteTask(this)”>Delete</span>
`;
taskList.appendChild(li);
taskInput.value = ”;
}
function deleteTask(element) {
element.parentElement.remove();
}
The provided code is a part of a basic To-Do List application written in JavaScript. Let’s go through each part of the code and understand its functionality:
1. function addTask() { … }
function addTask() {
const taskInput = document.getElementById(‘taskInput’);
const taskList = document.getElementById(‘taskList’);
if (taskInput.value.trim() === ”) {
alert(‘Please enter a task.’);
return;
}
const li = document.createElement(‘li’);
li.innerHTML = `
${taskInput.value}
<span class=”delete-btn” onclick=”deleteTask(this)”>Delete</span>
`;
taskList.appendChild(li);
taskInput.value = ”;
}
- const taskInput = document.getElementById(‘taskInput’);
This line retrieves the input element with the id ‘taskInput’ from the HTML document and stores it in the taskInput variable.
- const taskList = document.getElementById(‘taskList’);
This line retrieves the unordered list element with the id ‘taskList’ from the HTML document and stores it in the taskList variable.
- if (taskInput.value.trim() === ”) { … }
This condition checks if the value of the task input (after trimming any leading or trailing whitespaces) is an empty string.
If the input is empty, it displays an alert asking the user to enter a task and then exits the function using return.
- const li = document.createElement(‘li’);
This line creates a new li (list item) element using the document.createElement method.
- li.innerHTML = …;
This sets the inner HTML of the newly created li element. It includes the task text and a “Delete” button represented by a span element.
The onclick attribute of the “Delete” button calls the deleteTask function, passing the span element as an argument.
- taskList.appendChild(li);
This line appends the newly created li element to the task list (taskList).
- taskInput.value = ”;
This line resets the value of the task input to an empty string, clearing the input field after adding a task.
2. function deleteTask(element) { … }
function deleteTask(element) {
element.parentElement.remove();
}
- element.parentElement.remove();
This line removes the parent element of the provided element from the DOM.
In this context, it removes the entire li element (representing a task) when the “Delete” button is clicked.
Summary:
- The addTask function adds a new task to the list by creating a new li element and appending it to the task list. It also checks if the task input is empty and displays an alert if so.
- The deleteTask function is responsible for deleting a task when the “Delete” button associated with that task is clicked. It removes the parent li element from the DOM.
Together, these functions enable the addition and deletion of tasks in a basic To-Do List application.