A to-do list is a simple and effective tool for managing tasks and organizing your day. It helps you outline and prioritize the things you need to accomplish, making it easier to stay focused and productive. The goal of a to-do list is to help you manage your time and tasks efficiently, reduce stress, and enhance productivity.
HTML
The HTML file begins with the usual document type declaration (<!DOCTYPE html>) and contains the basic structure of an HTML document.
The <head> section includes metadata like character set, viewport settings, and the title of the page.
The <body> section contains the main content of the application.
Follow the following video for complete guidance :
https://www.youtube.com/watch?v=9stcEPfjYyY&ab_channel=LetsTryThis%21
CSS
The CSS styles define the appearance of the to-do list application.
It sets the background color, font-family, and styling for the container, task list, task items, checkboxes, and delete buttons.
JavaScript
The JavaScript code is embedded within the <script> tag at the end of the HTML file.
Complete Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List App</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
#todo-container {
max-width: 400px;
margin: auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-top: 50px;
}
#task-list {
list-style-type: none;
padding: 0;
}
.task-item {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ddd;
padding: 10px 0;
}
.task-item input[type="checkbox"] {
margin-right: 10px;
}
.delete-btn {
background-color: #e74c3c;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 3px;
}
</style>
</head>
<body>
<div id="todo-container">
<h2>Todo List</h2>
<input type="text" id="task-input" placeholder="Add a new task">
<button onclick="addTask()">Add Task</button>
<ul id="task-list"></ul>
</div>
<script>
function addTask() {
var taskInput = document.getElementById('task-input');
var taskList = document.getElementById('task-list');
if (taskInput.value.trim() === '') {
alert('Please enter a task.');
return;
}
var listItem = document.createElement('li');
listItem.className = 'task-item';
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.addEventListener('change', function() {
toggleTaskStatus(listItem);
});
var taskText = document.createTextNode(taskInput.value);
var deleteButton = document.createElement('button');
deleteButton.className = 'delete-btn';
deleteButton.textContent = 'Delete';
deleteButton.addEventListener('click', function() {
deleteTask(listItem);
});
listItem.appendChild(checkbox);
listItem.appendChild(taskText);
listItem.appendChild(deleteButton);
taskList.appendChild(listItem);
taskInput.value = ''; // Clear the input field
}
function toggleTaskStatus(taskItem) {
taskItem.classList.toggle('completed');
}
function deleteTask(taskItem) {
taskItem.parentNode.removeChild(taskItem);
}
</script>
</body>
</html>
Todo List Container
There is a container div with the id todo-container. It has a maximum width, a white background, padding, border-radius, and a box-shadow to give it a simple, card-like appearance.
Task Input and Buttons
The container includes an input field (task-input) for entering new tasks and a button (Add Task) to add tasks to the list.
Task List
The task list is represented by an unordered list (ul) with the id task-list.
Each task is represented as a list item (li) with the class task-item. Each list item contains a checkbox, the task text, and a delete button.
JavaScript Functions
addTask(): This function is called when the “Add Task” button is clicked. It creates a new list item, adds a checkbox, the task text, and a delete button. The new list item is then appended to the task list (ul).
toggleTaskStatus(taskItem): This function is called when the checkbox of a task is changed. It toggles the completed class on the task item, which changes its appearance to indicate completion.
deleteTask(taskItem): This function is called when the delete button of a task is clicked. It removes the corresponding task item from the list.
This simple to-do list application allows users to add tasks, mark them as completed using checkboxes, and delete tasks. It’s a good starting point for understanding the basics of HTML, CSS, and JavaScript interactions in a web application.
