How to Build a Dynamic To-Do List with JavaScript (No Frameworks)

We've built a static to-do list with HTML and styled it with CSS. Now it's time to make it functional. This tutorial will show you how to use pure JavaScript to add, complete, and delete tasks. This is the foundation of all modern web applications, known as DOM manipulation.

The HTML We Need

JavaScript needs a basic HTML structure to interact with. We'll add an <input>, a <button> to add tasks, and an empty <ul> where our tasks will appear.

<div class="todo-container">
  <h1>My JavaScript Tasks</h1>
  <div class="input-container">
    <input type="text" id="task-input" placeholder="Add a new task...">
    <button id="add-task-btn">Add</button>
  </div>
  <ul id="task-list">
    <!-- Tasks will be dynamically added here -->
  </ul>
</div>

  

The JavaScript Logic: Step-by-Step

We will write JavaScript to listen for events and manipulate these HTML elements.

Step 1: Get References to DOM Elements

First, we need to tell JavaScript which elements to "watch". We use document.getElementById to grab them by their ID.

const taskInput = document.getElementById('task-input');
const addTaskBtn = document.getElementById('add-task-btn');
const taskList = document.getElementById('task-list');

  

Step 2: Create a Function to Add a Task

We'll make a reusable function that creates a new task item, adds the delete button, and appends it to the list.

function addTask() {
  const taskText = taskInput.value.trim();

  if (taskText === "") {
    alert("Please enter a task.");
    return;
  }

  // Create the list item (li)
  const li = document.createElement('li');
  li.textContent = taskText;

  // Create the delete button
  const deleteBtn = document.createElement('button');
  deleteBtn.textContent = 'Delete';
  deleteBtn.className = 'delete-btn';

  // Add the button to the list item
  li.appendChild(deleteBtn);
  
  // Add the list item to the task list
  taskList.appendChild(li);

  // Clear the input field
  taskInput.value = "";
}

  

Step 3: Listen for Clicks

Now we add "event listeners" to run our addTask function when the button is clicked.

addTaskBtn.addEventListener('click', addTask);

// Optional: Also add task when 'Enter' key is pressed
taskInput.addEventListener('keypress', function(e) {
  if (e.key === 'Enter') {
    addTask();
  }
});

  

Step 4: Handle "Complete" and "Delete" with Event Delegation

Instead of adding a listener to every new task, we add one listener to the parent <ul>. This is called event delegation and is much more efficient. We check what was clicked inside the list.

taskList.addEventListener('click', function(e) {
  // Check if the clicked item is an LI (a task)
  if (e.target.tagName === 'LI') {
    e.target.classList.toggle('completed');
  }
  
  // Check if the clicked item is a delete button
  if (e.target.className === 'delete-btn') {
    e.target.parentElement.remove();
  }
});

  

To make the ".completed" class work, you'd add this CSS: li.completed { text-decoration: line-through; color: #888; }

Bringing it Local: Madrid's JavaScript Ecosystem

What you just learned—DOM manipulation—is the core skill for any frontend developer. In Madrid, the tech scene is booming, and JavaScript is the language that powers it all. Nearly every major tech company and startup in Madrid relies on JavaScript frameworks like React, Node.js, and Vue.js, all of which are built on the fundamental principles you just practiced.

This local information is vital for SEO, as it connects a technical skill (JavaScript) with career-focused user intent ("JavaScript jobs Madrid").

Top JavaScript Meetups & Communities in Madrid

Connecting with the community is the best way to grow. Here are some of the most active JavaScript-focused groups in Madrid.

Madrid Tech Companies Built on JavaScript

Many of Spain's top tech "unicorns" and major companies have massive engineering teams in Madrid, with JavaScript (especially React and Node.js) as their primary stack.

SEO Strategy for This Tutorial

• Primary Keywords: "javascript todo list," "dynamic todo list javascript," "javascript dom manipulation tutorial."
• Secondary/Long-Tail Keywords: "how to make a todo list with javascript," "javascript add remove list item," "javascript event delegation tutorial," "javascript getelementbyid," "javascript meetups madrid," "react jobs madrid."
• User Intent: Targets beginners searching for a "how-to" project. The step-by-step format with complete code blocks is designed to be easily understood and captured by search engines as a direct answer.
• Internal Linking: This post logically follows the "HTML-only" and "CSS-only" to-do list articles, creating a strong topic cluster for "to-do list tutorial."

Conclusion: You're Now a DOM Manipulator!

Congratulations! You've successfully built a complete, dynamic web application using pure JavaScript. You learned how to get elements, create elements, listen for user events, and update the page in real-time. These are the most important skills in frontend development and the foundation for learning any framework like React or Vue.