Todo List
Ever feel like you’re drowning in to-dos? A simple way to regain control and boost productivity is to implement a Todo List. This tutorial will guide you through building a basic Todo List in JavaScript, covering the fundamentals and providing practical examples. A well-organized Todo List is invaluable for managing tasks, prioritizing efforts, and ultimately, achieving your goals.
Introduction
A Todo List is a tool that helps you track and manage your tasks. It allows you to break down larger projects into smaller, manageable steps, and set deadlines to ensure you stay on track. Whether you’re a student, freelancer, or simply trying to improve your daily routine, a Todo List can be a powerful asset. This tutorial will walk you through creating a basic Todo List in JavaScript, demonstrating key concepts like data storage, event handling, and basic UI elements.
This project allows you to:
- Add tasks
- Delete tasks
- Mark tasks as complete
It helps you understand DOM manipulation and event handling in JavaScript.
Project Setup
You only need:
- A browser
- A code editor
No installation required.
Code Implementation
📁 index.html
<!DOCTYPE html>
<html>
<head>
<title>Todo List</title>
<style>
body {
font-family: Arial;
text-align: center;
margin-top: 40px;
}
input {
padding: 10px;
width: 200px;
}
button {
padding: 10px;
margin-left: 5px;
cursor: pointer;
}
li {
list-style: none;
margin: 10px;
}
.completed {
text-decoration: line-through;
color: gray;
}
</style>
</head>
<body>
<h1>Todo List</h1>
<input type="text" id="taskInput" placeholder="Enter task">
<button id="addBtn">Add</button>
<ul id="taskList"></ul>
<script src="script.js"></script>
</body>
</html>
📁 script.js
let todoList = [];
// Select elements
const input = document.getElementById("taskInput");
const addBtn = document.getElementById("addBtn");
const taskList = document.getElementById("taskList");
// Add Task
addBtn.addEventListener("click", function () {
const taskText = input.value.trim();
if (taskText === "") return;
const task = {
text: taskText,
completed: false
};
todoList.push(task);
input.value = "";
renderTasks();
});
// Render Tasks
function renderTasks() {
taskList.innerHTML = "";
todoList.forEach((task, index) => {
const li = document.createElement("li");
li.textContent = task.text;
if (task.completed) {
li.classList.add("completed");
}
// Toggle complete
li.addEventListener("click", function () {
task.completed = !task.completed;
renderTasks();
});
// Delete button
const deleteBtn = document.createElement("button");
deleteBtn.textContent = "Delete";
deleteBtn.addEventListener("click", function (e) {
e.stopPropagation();
todoList.splice(index, 1);
renderTasks();
});
li.appendChild(deleteBtn);
taskList.appendChild(li);
});
}
How to Run
Create a folder todo list Add index.html and script.js Open index.html in your browser
💡 Tip: For a more robust Todo List, consider using a library like todoist to handle features like reminders and prioritization.
Summary
This tutorial has provided a foundational understanding of how to create and manage a Todo List in JavaScript. By understanding the core concepts of data storage, event handling, and basic UI elements, you'll be well on your way to building powerful and effective task management tools. Experiment with these examples and explore further resources to expand your knowledge.