Introduction
A to-do list is a classic beginner project to learn and practice JavaScript and jQuery. It allows you to get hands-on experience with event handling, DOM manipulation, and dynamic content updates. In this blog, we’ll build a simple, interactive to-do list using jQuery.
What You'll Learn
- Structuring an HTML layout for a to-do list.
- Styling the to-do list with CSS.
- Using jQuery for adding, deleting, and marking tasks as completed.
1. Setting Up the HTML Structure
Start by creating the basic HTML layout for the to-do list.
Example
<!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</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="todo-container">
<h1>My To-Do List</h1>
<div class="input-group">
<input type="text" id="taskInput" placeholder="Add a new task...">
<button id="addTaskBtn">Add</button>
</div>
<ul id="todoList"></ul>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>
2. Styling the To-Do List with CSS
Let’s add some styles to make the to-do list visually appealing.
Example
/* styles.css */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.todo-container {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 300px;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
.input-group {
display: flex;
gap: 10px;
}
#taskInput {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
#addTaskBtn {
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
#addTaskBtn:hover {
background-color: #218838;
}
#todoList {
list-style: none;
padding: 0;
margin: 20px 0 0;
}
#todoList li {
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ccc;
}
#todoList li:last-child {
border-bottom: none;
}
.completed {
text-decoration: line-through;
color: #888;
}
.delete-btn {
background: none;
border: none;
color: #e74c3c;
cursor: pointer;
font-size: 16px;
}
3. Adding Interactivity with jQuery
Now, we’ll use jQuery to add tasks, mark them as completed, and delete them.
Example
// script.js
$(document).ready(function () {
// Add a new task
$('#addTaskBtn').click(function () {
const taskText = $('#taskInput').val();
if (taskText !== '') {
$('#todoList').append(`
<li>
<span class="task">${taskText}</span>
<button class="delete-btn">X</button>
</li>
`);
$('#taskInput').val(''); // Clear input field
}
});
// Mark task as completed
$('#todoList').on('click', '.task', function () {
$(this).toggleClass('completed');
});
// Delete a task
$('#todoList').on('click', '.delete-btn', function () {
$(this).parent().remove();
});
});
4. How It Works
- Adding Tasks: When you click the "Add" button, the text from the input field is added to the list using jQuery’s
append()method. - Marking as Completed: Clicking on a task toggles the
completedclass, which styles the task as completed. - Deleting Tasks: Clicking the delete button removes the task using the
remove()method.
5. Enhancements You Can Add
Take the to-do list to the next level:
- Save Tasks: Use
localStorageto save tasks so they persist after refreshing the page. - Edit Tasks: Add functionality to edit tasks.
- Filter Tasks: Add filters to view all, completed, or pending tasks.
Conclusion
Creating a to-do list with jQuery is an excellent way to learn how to interact with the DOM and handle events. With just a few lines of code, you can build a fully functional application and enhance it further with additional features.
