How to Build a Simple To-Do App with HTML, CSS, and JavaScript
Creating a to-do app is one of the best beginner projects for learning web development. It gives you the chance to practice HTML for structure, CSS for styling, and JavaScript for functionality. In this tutorial, we’ll walk through how to build a basic to-do app that allows users to add tasks, mark them as completed, and remove them.
What You’ll Need:
- Basic understanding of HTML, CSS, and JavaScript.
- A text editor (e.g., Visual Studio Code).
- A browser to view your project.
Step 1: Setting Up the HTML Structure
The first step is to create the basic structure of our app using HTML. We need a text input to add tasks, a button to submit them, and a list where the tasks will appear.
Here’s the HTML code:
<div class\="todo-container"\>
<h1\>My To-Do List</h1\>
<input type\="text" id\="todo-input" placeholder\="Add a new task..."\>
<button id\="add-btn"\>Add Task</button\>
<ul id\="todo-list"\></ul\>
</div\>
<script src\="script.js"\></script\></body> </html>
- The
todo-containerclass holds everything in the center. - The
inputallows the user to type a new task. - The
buttonwill add the task to the list. - The
ulelement (todo-list) will hold the tasks aslielements.
Step 2: Styling the App with CSS
Next, let’s add some styles to make our app look better. Create a style.css file and add the following styles:
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; background-color: #f4f4f9; display: flex; justify-content: center; align-items: center; height: 100vh; }
.todo-container { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); width: 300px; }
h1 { text-align: center; font-size: 24px; color: #333; }
input[type="text"] { width: 100%; padding: 10px; margin-bottom: 10px; border: 2px solid #ddd; border-radius: 4px; }
button { width: 100%; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; }
button:hover { background-color: #45a049; }
ul { list-style-type: none; }
li { padding: 10px; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; }
li.completed { text-decoration: line-through; color: #888; }
button.remove-btn { background-color: red; border-radius: 50%; width: 25px; height: 25px; color: white; border: none; cursor: pointer; }
- The body is centered using flexbox, and the app container has a white background with rounded corners and a subtle shadow for aesthetics.
- The input field and button are styled to match modern UI trends, and the list of tasks is styled to display each task clearly with a button to remove it.
Step 3: Adding JavaScript Functionality
Now, it’s time to make our app interactive. We will create a script.js file to handle adding tasks, marking tasks as complete, and removing tasks.
// Select DOM elements const todoInput = document.getElementById("todo-input"); const addBtn = document.getElementById("add-btn"); const todoList = document.getElementById("todo-list");
// Event listener to add tasks addBtn.addEventListener("click", function() { const taskText = todoInput.value.trim();
if (taskText !== "") {
const li = document.createElement("li");
// Add task text
const taskContent = document.createElement("span");
taskContent.textContent = taskText;
li.appendChild(taskContent);
// Add remove button
const removeBtn = document.createElement("button");
removeBtn.textContent = "X";
removeBtn.classList.add("remove-btn");
li.appendChild(removeBtn);
// Add event listener to mark task as completed
taskContent.addEventListener("click", function() {
li.classList.toggle("completed");
});
// Add event listener to remove task
removeBtn.addEventListener("click", function() {
li.remove();
});
// Append the new task to the list
todoList.appendChild(li);
// Clear input field
todoInput.value = "";
} else {
alert("Please enter a task.");
}});
// Optional: Add enter key functionality todoInput.addEventListener("keypress", function(event) { if (event.key === "Enter") { addBtn.click(); } });
Here’s how the JavaScript works:
- Adding Tasks: When the "Add Task" button is clicked, we create a new
lielement with the task text and a remove button. If the input field isn’t empty, the task is added to the list. - Marking Tasks as Completed: When the user clicks on the task text, the
completedclass is toggled, which will strike through the task text to show it's completed. - Removing Tasks: The remove button (styled as a small red circle) deletes the task when clicked.
- Keyboard Support: Pressing the Enter key will also add the task, making the app more user-friendly.
Step 4: Test and Improve
Now that everything is in place, open your index.html file in a browser to test your app. You can add tasks, mark them as completed, and remove them.
Additional Features You Could Add:
- Persistent Storage: Use
localStorageto store tasks so that they persist even when the page is refreshed. - Edit Tasks: Allow users to edit tasks by clicking on them.
- Priority Levels: Add a feature to mark tasks as high or low priority.
Conclusion
Congratulations! You’ve successfully created a simple to-do app with HTML, CSS, and JavaScript. This is a great starting point for building more advanced apps as you continue learning web development. You can now customize and expand your app by adding more features, refining the user interface, and exploring new technologies. Keep building and experimenting to sharpen your skills!
#WebDevelopment, #ToDoApp, #JavaScript, #HTML, #CSS, #Coding, #FrontendDevelopment, #WebDesign, #TechProjects, #LearnToCode, #WebApp, #CodeNewbie, #DeveloperLife, #BuildInPublic, #JavaScriptDeveloper.
