The ToDo List web application is a simple task management tool designed to help users organize their daily tasks efficiently. Developed using HTML, CSS, and JavaScript, this application provides a user-friendly interface for adding, managing, and deleting tasks.
Add Tasks: Users can easily add new tasks by typing in the input field and clicking the “Add Task” button.
Show All/Incomplete/Completed Tasks: The application allows users to filter tasks based on their completion status, providing options to show all tasks, only incomplete tasks, or only completed tasks.
Delete Completed Tasks: Users can delete all completed tasks with a single click using the “Delete Completed Tasks” button.
HTML Structure: The HTML file defines the structure of the web page, including the task input field, task list, and control buttons.
CSS Styling: CSS styles are applied to make the application visually appealing and ensure a good user experience.
JavaScript Functionality: JavaScript is used to implement the dynamic functionality of the application, such as adding tasks, deleting completed tasks, and updating task completion status.
Adding Tasks: When the user enters a task and clicks “Add Task,” the task is added to the list displayed on the page. The task is also saved in the browser’s local storage to persist between sessions.
Deleting Completed Tasks: Clicking the “Delete Completed Tasks” button removes all completed tasks from the list and updates the local storage accordingly.
Task Filtering: Users can filter tasks by clicking on the “Show All Tasks,” “Show Incomplete Tasks,” or “Show Completed Tasks” buttons. This functionality helps users focus on specific sets of tasks based on their completion status.
The ToDo List web application provides a straightforward and effective way for users to manage their tasks. It demonstrates the integration of HTML, CSS, and JavaScript to create a responsive and interactive user interface. This project serves as a practical example of web development techniques and can be extended further with additional features like task editing, due dates, and priority levels.
html full code:
<!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="./style.css">
<title>ToDo</title>
</head>
<body>
<div class="container">
<div class="header">
<h1>ToDo List</h1>
</div>
<div class="input-container">
<input type="text" id="taskInput" placeholder="Enter your task">
<button id="addTask">Add Task</button>
</div>
<ul id="taskList" class="task-list"></ul>
</div>
<div class="buttons-container">
<button id="showAll">Show All Tasks</button>
<button id="showIncomplete">Show Incomplete Tasks</button>
<button id="showCompleted">Show Completed Tasks</button>
<button id="deleteCompleted">Delete Completed Tasks</button>
</div>
<script src="script.js"></script>
</body>
</html>
css full code:
body {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 50px auto;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
}
.header {
text-align: center;
}
.header h1 {
margin: 0;
color: #333;
}
.input-container {
margin-bottom: 20px;
}
.input-container input[type="text"] {
width: 70%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-right: 10px;
}
.input-container button {
padding: 10px 20px;
border: none;
background-color: #007bff;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.task-list {
list-style-type: none;
padding: 0;
margin-top: 20px;
}
.task-list li {
margin-bottom: 10px;
padding: 10px;
background-color: #f0f0f0;
border-radius: 5px;
display: flex;
align-items: center;
}
.task-list li.completed {
text-decoration: line-through;
color: #888;
}
.task-list li input[type="checkbox"] {
margin-right: 10px;
}
.task-list li span {
flex-grow: 1;
}
.buttons-container {
margin-top: 20px;
text-align: center;
}
.buttons-container button {
margin: 0 10px;
padding: 10px 20px;
border: none;
background-color: #007bff;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.buttons-container button:hover {
background-color: #0056b3;
}
javascript full code:
document.addEventListener('DOMContentLoaded', function () {
var taskInput = document.getElementById('taskInput');
var addTaskBtn = document.getElementById('addTask');
var taskList = document.getElementById('taskList');
var deleteCompletedBtn = document.getElementById('deleteCompleted');
var savedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
savedTasks.forEach(function (taskText) {
addTaskToList(taskText);
});
function addTaskToList(taskText) {
var listItem = document.createElement('li');
listItem.innerHTML = `
<input type="checkbox">
<span>${taskText}</span>
`;
taskList.appendChild(listItem);
}
addTaskBtn.addEventListener('click', function () {
var taskText = taskInput.value.trim();
if (taskText !== '') {
addTaskToList(taskText);
savedTasks.push(taskText);
localStorage.setItem('tasks', JSON.stringify(savedTasks));
taskInput.value = '';
}
});
deleteCompletedBtn.addEventListener('click', function () {
var completedTasks = taskList.querySelectorAll('input:checked');
completedTasks.forEach(function (completedTask) {
var listItem = completedTask.closest('li');
var taskText = listItem.querySelector('span').textContent;
var index = savedTasks.indexOf(taskText);
if (index !== -1) {
savedTasks.splice(index, 1);
}
listItem.remove();
});
localStorage.setItem('tasks', JSON.stringify(savedTasks));
});
taskList.addEventListener('change', function (event) {
if (event.target.tagName === 'INPUT' && event.target.type === 'checkbox') {
var listItem = event.target.closest('li');
if (listItem) {
if (event.target.checked) {
listItem.classList.add('completed');
} else {
listItem.classList.remove('completed');
}
}
}
});
});
To report issues or provide feedback, please enter your problem in the console below and click “Send”.