Build a Simple To-Do List App in JavaScript (Beginner Step-by-Step Project)

Build a Simple To-Do List App in JavaScript (Beginner Step-by-Step Project)

After learning the basics of HTML, CSS, and JavaScript, the best way to improve your skills is by building a real project.

In this beginner-friendly guide, you will learn how to create a simple To-Do List web app where users can:

  • Add tasks
  • Mark tasks as completed
  • Delete tasks

This is one of the most popular beginner JavaScript projects and a great step toward becoming a real web developer.

What You Will Learn in This Project

  • How HTML, CSS, and JavaScript work together
  • How to handle button clicks
  • How to change the page using JavaScript
  • How to manage a list of items

Step 1: Create the HTML Structure

First, create an index.html file and add this basic structure:

<!DOCTYPE html>
<html>
<head>
  <title>To-Do List App</title>
</head>

<body>

  <h1>My To-Do List</h1>

  <input type="text" id="taskInput" placeholder="Enter a task">
  <button onclick="addTask()">Add Task</button>

  <ul id="taskList"></ul>

</body>
</html>

This creates:

  • A heading
  • An input box
  • An Add button
  • An empty list for tasks

Step 2: Add Simple CSS Styling

Inside the <head>, add this style:

<style>
body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #f2f2f2;
}

input {
  padding: 8px;
  width: 200px;
}

button {
  padding: 8px 12px;
  margin-left: 5px;
  cursor: pointer;
}

li {
  margin: 10px;
  cursor: pointer;
}
</style>

Now the app looks clean and simple.

Step 3: Add JavaScript Functionality

Below the list, add this JavaScript code:

<script>

function addTask() {
  let input = document.getElementById("taskInput");
  let taskText = input.value;

  if (taskText === "") return;

  let li = document.createElement("li");
  li.textContent = taskText;

  li.onclick = function() {
    li.style.textDecoration = "line-through";
  };

  let deleteBtn = document.createElement("button");
  deleteBtn.textContent = "Delete";
  deleteBtn.onclick = function() {
    li.remove();
  };

  li.appendChild(deleteBtn);

  document.getElementById("taskList").appendChild(li);

  input.value = "";
}

</script>

How This JavaScript Works

  • Gets the text from the input box
  • Creates a new list item
  • Adds a click effect to mark the task complete
  • Creates a delete button
  • Adds the task to the list
  • Clears the input field

This shows how JavaScript can change the web page dynamically.

Step 4: Test Your To-Do List App

  1. Save the file as index.html.
  2. Open it in your browser.
  3. Type a task and click Add Task.
  4. Click a task to mark it complete.
  5. Click Delete to remove it.

🎉 Congratulations! You built your first real JavaScript project.

Ideas to Improve This Project

Try adding:

  • Save tasks in localStorage
  • A clear all button
  • Different colors for completed tasks
  • A counter showing total tasks

Improving projects is the best way to learn programming.

Common Beginner Mistakes

1. Forgetting to Link JavaScript

Make sure the <script> is inside the HTML file.

2. Empty Task Added

We used this line to stop empty tasks:

if (taskText === "") return;

3. Not Practicing Enough

Projects only help if you try them yourself.

What to Build Next?

  • Calculator app
  • Weather app using API
  • Notes app
  • Simple game

Each project makes you a stronger developer.

Final Thoughts

Building a To-Do List app is a big step in your coding journey. You are no longer just learning theory—you are creating real software.

Keep building small projects again and again. That is the fastest way to become confident in programming.

Stay consistent, keep coding, and your skills will grow every single day. 🚀

Comments

Post a Comment

Popular posts from this blog

How to Center a Div - The 3 Modern Ways (2026)

Centering a <div> used to be a meme in the CSS world because it was surprisingly hard. But in 2024, we have three clean, modern solutions. Here's how to do it properly. Method 1: Flexbox (Most Popular) CSS .container { display: flex; justify-content: center; align-items: center; height: 100vh; /* Full viewport height */ } When to use: Modern layouts, when you need to center both horizontally AND vertically. Method 2: CSS Grid CSS .container { display: grid; place-items: center; height: 100vh; } When to use: When working with grid-based layouts already. Method 3: The Classic Margin Auto CSS .centered-div { width: 300px; margin: 0 auto; } When to use: Simple horizontal centering only (still works perfectly!). 💡 Pro Tip: For simple horizontal centering, use margin: 0 auto . For modern full centering, use Flexbox. For grid layouts, use CSS Grid's place-items: center . ...
Read more

Call by Value vs Call by Reference in C Programming (With Simple Examples)

Call by Value vs Call by Reference in C Programming (With Simple Examples) One of the most confusing topics for beginners in C programming is the difference between call by value and call by reference . This concept is extremely important because it affects how functions work and how data is modified inside a program. In this article, we will clearly explain call by value vs call by reference in C using simple language and easy examples. What Is a Function Call? When a function is called, values are passed from the calling function to the called function. The way these values are passed decides whether the original data can be modified or not. What Is Call by Value? In call by value, a copy of the variable’s value is passed to the function. Changes made inside the function do not affect the original variable. Example of Call by Value void change(int x) { x = 20; } int main() { int a = 10; change(a); printf("%d", a); } The output will...
Read more

Build a Simple Calculator with HTML, CSS & JavaScript

Build a Simple Calculator with HTML, CSS & JavaScript JavaScript, Projects, HTML, CSS, Beginner Projects https://images.unsplash.com/photo-1581276879432-15e50529f34b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80 In this tutorial, we'll build a fully functional calculator from scratch. This is a perfect project for beginners to practice HTML structure, CSS styling, and basic JavaScript logic. What we're building: A calculator with number buttons (0-9), operators (+, -, ×, ÷), equals (=), and clear (C) functions. Step 1: HTML Structure First, create the basic HTML structure for our calculator. calculator.html <!DOCTYPE html> <html lang="en"> <head> <title>Simple Calculator</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="calculator"> ...
Read more