How to Build a Simple To-Do List App in JavaScript Tutorial

Here’s a step-by-step guide on how to build a simple To-Do List App in JavaScript for your website blog post. The tutorial is structured for beginners and designed to be easy to follow.

How to Build a Simple To-Do List App in JavaScript

In this tutorial, we’ll walk through the process of building a simple To-Do List web app using HTML, CSS, and JavaScript. This project is perfect for beginners who are just starting to learn JavaScript. By the end, you’ll have a functional to-do list where you can add tasks, mark them as completed, and delete them.

Step 1: Set Up the Project Structure

Start by creating the necessary files for your project:

index.html – for the HTML structure
styles.css – for the styling
script.js – for the JavaScript functionality

Folder Structure:

luaCopy code/todo-app |-- index.html |-- styles.css |-- script.js

Step 2: Create the HTML Structure

In your index.html file, write the basic structure of the page, including a text input for new tasks, a button to add tasks, and a list to display the tasks.

htmlCopy code<!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 App</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1>To-Do List</h1> <input type="text" id="new-task" placeholder="Add a new task..."> <button id="add-task-btn">Add Task</button> <ul id="task-list"></ul> </div> <script src="script.js"></script> </body> </html>

This is a simple structure:

An input field (#new-task) where users can type tasks.
A button (#add-task-btn) to add tasks to the list.
An unordered list (#task-list) to display tasks.

Step 3: Style the To-Do List Using CSS

In styles.css, add basic styling to make the app look clean and organized.

cssCopy code* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); width: 300px; } h1 { text-align: center; margin-bottom: 20px; } input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px; } button { width: 100%; padding: 10px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #218838; } ul { list-style: none; margin-top: 20px; } li { background-color: #f9f9f9; margin: 10px 0; padding: 10px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; } li.completed { text-decoration: line-through; color: #999; }

The input and button are styled to fit the form.
The tasks inside the unordered list are presented as list items, each with basic spacing and padding.

Step 4: Write JavaScript to Add and Manage Tasks

Now, open script.js to write the functionality for adding, completing, and deleting tasks.

Select the necessary elements:
- Get references to the input field, button, and task list.
Add a task:
- When the button is clicked, create a new list item with the task text and append it to the task list.
Mark tasks as completed or delete them:
- Add functionality to cross off tasks when clicked and delete tasks when needed.

Here’s the JavaScript code:

javascriptCopy code// Select elements const addTaskBtn = document.getElementById('add-task-btn'); const taskList = document.getElementById('task-list'); const newTaskInput = document.getElementById('new-task'); // Function to add a new task function addTask() { const taskText = newTaskInput.value; // Ensure task is not empty if (taskText === '') { alert('Please enter a task'); return; } // Create a new list item const li = document.createElement('li'); li.textContent = taskText; // Create a delete button const deleteBtn = document.createElement('button'); deleteBtn.textContent = 'Delete'; deleteBtn.style.marginLeft = '10px'; li.appendChild(deleteBtn); // Add click event to mark task as completed li.addEventListener('click', function () { li.classList.toggle('completed'); }); // Add click event to delete the task deleteBtn.addEventListener('click', function (e) { e.stopPropagation(); // Prevent the completion toggle li.remove(); }); // Append the new task to the list taskList.appendChild(li); // Clear the input field newTaskInput.value = ''; } // Attach the addTask function to the button addTaskBtn.addEventListener('click', addTask); // Allow pressing "Enter" to add tasks as well newTaskInput.addEventListener('keypress', function (e) { if (e.key === 'Enter') { addTask(); } });

Explanation of Code:

Event Listeners:
- addTaskBtn.addEventListener('click', addTask) listens for the button click to add a new task.
- The keypress event listens for the “Enter” key in the input field to add a task.
Add Task: When a task is added, a new <li> element is created, and the task text is appended to the list.
Complete Task: Clicking a task toggles the “completed” class, which crosses it off using CSS.
Delete Task: The delete button removes the task from the list.

Step 5: Test the To-Do List App

Now that you’ve completed the app:

Open index.html in your browser.
Type a task into the input field, click Add Task, and watch the task appear in the list.
Try marking tasks as completed by clicking on them.
Delete tasks using the “Delete” button.

Conclusion

You’ve now built a basic To-Do List app using HTML, CSS, and JavaScript! This simple app introduces you to core JavaScript concepts like DOM manipulation, event handling, and working with lists. As a next step, you can try adding more features, like: