Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Create a to-do list with JavaScript
A TODO list is a simple application that helps users keep track of tasks they need to complete. It typically allows users to add new tasks, mark them as completed, edit existing tasks, and delete unnecessary ones.
In this tutorial, we'll learn how to create a functional to-do list using JavaScript. Our to-do list will support the following core features:
Add new tasks
Delete tasks
Mark tasks as completed
Edit existing tasks
Basic To-Do List Implementation
Let's start with a simple example that demonstrates adding tasks to a list:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple To-Do List</title>
</head>
<body>
<h2>My To-Do List</h2>
<input type="text" placeholder="Enter your task here..." id="taskInput">
<button onclick="addTask()">Add Task</button>
<ul id="taskList"></ul>
<script>
function addTask() {
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');
if (taskInput.value.trim() === '') {
alert('Please enter a task!');
return;
}
const listItem = `<li>${taskInput.value}</li>`;
taskList.insertAdjacentHTML('beforeend', listItem);
taskInput.value = '';
}
</script>
</body>
</html>
This basic implementation allows users to add tasks to an unordered list. The addTask() function validates input and appends new tasks to the list.
Advanced To-Do List with Delete Functionality
Now let's create a more feature-rich to-do list that includes the ability to remove tasks using querySelector():
<!DOCTYPE html>
<html>
<head>
<title>Advanced To-Do List</title>
<style>
body { background-color: #f0f8ff; font-family: Arial, sans-serif; }
.task-container { margin: 10px 0; padding: 10px; background: white; border-radius: 5px; }
.remove-btn { margin-left: 10px; background: #ff6b6b; color: white; border: none; padding: 5px 10px; border-radius: 3px; cursor: pointer; }
</style>
</head>
<body>
<div id="todoApp">
<h2>Advanced To-Do List</h2>
<input type="text" placeholder="Enter task to complete" id="taskInput">
<button id="addButton">Add Task</button>
<div id="taskContainer"></div>
</div>
<script>
document.querySelector('#addButton').onclick = function() {
const taskInput = document.querySelector('#taskInput');
const taskContainer = document.querySelector('#taskContainer');
if (taskInput.value.trim().length === 0) {
alert("Please enter a task to add!");
return;
}
taskContainer.innerHTML += `
<div class="task-container">
<span>${taskInput.value}</span>
<button class="remove-btn">Remove</button>
</div>
`;
taskInput.value = '';
// Add event listeners to all remove buttons
const removeButtons = document.querySelectorAll(".remove-btn");
for (let i = 0; i < removeButtons.length; i++) {
removeButtons[i].onclick = function() {
this.parentNode.remove();
};
}
};
</script>
</body>
</html>
Complete To-Do List with All Features
Here's a comprehensive to-do list that includes adding, removing, and marking tasks as complete:
<!DOCTYPE html>
<html>
<head>
<title>Complete To-Do List</title>
<style>
.completed { text-decoration: line-through; color: #888; }
.task-item { display: flex; align-items: center; margin: 5px 0; padding: 10px; background: #f9f9f9; border-radius: 5px; }
.task-text { flex-grow: 1; margin-right: 10px; }
button { margin-left: 5px; padding: 5px 10px; border: none; border-radius: 3px; cursor: pointer; }
.complete-btn { background: #4caf50; color: white; }
.delete-btn { background: #f44336; color: white; }
</style>
</head>
<body>
<h2>Complete To-Do List</h2>
<input type="text" id="newTask" placeholder="Enter new task...">
<button onclick="addNewTask()">Add Task</button>
<div id="tasks"></div>
<script>
function addNewTask() {
const input = document.getElementById('newTask');
const tasksDiv = document.getElementById('tasks');
if (input.value.trim() === '') {
alert('Please enter a task');
return;
}
const taskDiv = document.createElement('div');
taskDiv.className = 'task-item';
taskDiv.innerHTML = `
<span class="task-text">${input.value}</span>
<button class="complete-btn" onclick="toggleComplete(this)">Complete</button>
<button class="delete-btn" onclick="deleteTask(this)">Delete</button>
`;
tasksDiv.appendChild(taskDiv);
input.value = '';
}
function toggleComplete(button) {
const taskText = button.parentNode.querySelector('.task-text');
taskText.classList.toggle('completed');
button.textContent = taskText.classList.contains('completed') ? 'Undo' : 'Complete';
}
function deleteTask(button) {
button.parentNode.remove();
}
</script>
</body>
</html>
Key Features Explained
Input Validation: Checks if the input field is not empty before adding tasks
Dynamic HTML: Uses
innerHTMLandcreateElement()to add new elementsEvent Handling: Attaches click events to buttons for interactivity
CSS Classes: Uses classes to style completed tasks differently
Using querySelector() Method
The querySelector() method returns the first element that matches a specified CSS selector. It's essential for DOM manipulation in modern JavaScript.
Syntax
element = document.querySelector(selectors);
Where selectors is a string containing one or more CSS selectors separated by commas.
Conclusion
Creating a to-do list with JavaScript involves DOM manipulation, event handling, and user input validation. The examples shown demonstrate progressively advanced features from basic task addition to complete task management with styling and interactivity.
2K+ Views
