📝 Todo List Logic with JavaScript

Framework-Free, Pure JavaScript, Brain-Opening Edition

In a developer’s life, some truths are unavoidable:

console.log is everywhere
One day, you will fight with undefined
And…
👉 You will build a Todo List at least once

But this article is:
❌ not a “copy–paste Todo”
❌ not “hiding behind a framework”
✅ a guide that truly teaches you how JavaScript thinks

🧠 1. Todo List = Small App, Big Lesson

A Todo List looks small, but inside it hides:

Getting data from the user
Keeping data in memory (state)
Updating the screen (render)
Catching events (events)

So a Todo List is actually this:

“Seeing the heart of JavaScript with a small application.”

🧩 2. First the Logic: How Does a Todo List Work?

Before writing code, let’s think 🧠

A Todo List does this:

1️⃣ User types a task
2️⃣ Clicks “Add”
3️⃣ Task enters the list
4️⃣ Can mark it as completed
5️⃣ Can delete it

On the JavaScript side, there’s this loop:

USER → EVENT → STATE → RENDER → SCREEN

If you understand this, you’re already halfway there.

🧱 3. HTML: Set the Stage (Not Too Much, Not Too Little)

HTML is just the skeleton.
Smart developers leave the real work to JavaScript 😄

&lt;input type="text" id="todoInput" placeholder="Write a task..." />
&lt;button id="addBtn">Add&lt;/button>

&lt;ul id="todoList">&lt;/ul>

🧠 What do we have here?

input → where the task is written
button → the “start the action” button
ul → the showcase where tasks appear

When HTML is simple:

JS works comfortably
Code is readable
Debugging is easier

📦 4. The State Concept: Where Do We Store Todos?

This is the most critical point 🔥

We don’t store todos in the DOM,
we store them in JavaScript’s memory.

const todos = [];

❓ Why an array?

Ordered
Dynamic
Easy to manage

❓ Why const?

The array keeps the same reference
You won’t accidentally do todos = null
Safer code

📌 Golden rule:
The DOM is temporary, the state is permanent.

🎣 5. Catching DOM Elements (JavaScript’s Eyes and Ears)

We tell JavaScript:

“These are the elements we’ll talk to.”

const input = document.getElementById("todoInput");
const button = document.getElementById("addBtn");
const list = document.getElementById("todoList");

Now:

input.value → what the user typed
list → the home of our tasks

➕ 6. Adding a Todo: Where the Action Starts

Time for action 🎬

button.addEventListener("click", () => {
  const todoText = input.value.trim();

  if (todoText === "") return;

  todos.push({
    text: todoText,
    completed: false
  });

  input.value = "";
  renderTodos();
});

🧠 Fun, line-by-line explanation:

addEventListener("click")
➡ User clicks the button
➡ JS: “Got it!”

input.value.trim()
➡ Removes spaces from start and end
➡ No empty todos allowed

if (todoText === "") return;

➡ Empty task = trash
➡ UX saved 🎉

todos.push({ ... })

➡ We store objects, not just strings
➡ Future-proof structure

renderTodos()
➡ Command: “Update the screen!”

🔁 7. Render Logic: Redraw the Screen (Most Important Part)

The biggest mistake in Todo Lists:

“Manually poking the DOM bit by bit”

We don’t do that 😎
We redraw everything.

function renderTodos() {
  list.innerHTML = "";

  todos.forEach((todo, index) => {
    const li = document.createElement("li");
    li.textContent = todo.text;

    if (todo.completed) {
      li.style.textDecoration = "line-through";
    }

    li.addEventListener("click", () => {
      toggleTodo(index);
    });

    const deleteBtn = document.createElement("button");
    deleteBtn.textContent = "❌";

    deleteBtn.addEventListener("click", (e) => {
      e.stopPropagation();
      deleteTodo(index);
    });

    li.appendChild(deleteBtn);
    list.appendChild(li);
  });
}

🧠 What’s happening here?

innerHTML = "" → clear the screen
forEach → draw each todo again
index → we know which todo we’re working on
Click → complete or delete

📌 This logic is the ancestor of:

React
Vue
Angular

❌ 8. Deleting a Todo (Clean and Clear)

function deleteTodo(index) {
  todos.splice(index, 1);
  renderTodos();
}

🧠 What does splice do?

Starts at index
Removes 1 item
Updates the array

Then:
➡ re-render
➡ updated screen

✅ 9. Completing a Todo (UX Level-Up)

function toggleTodo(index) {
  todos[index].completed = !todos[index].completed;
  renderTodos();
}

🧠 Very simple logic:

true → false
false → true

But big impact:

Visual feedback
Happy user
App feels “alive”

💡 10. Pro Tips (Pure Gold)

✔ Don’t store state in the DOM
✔ Make render the center of everything
✔ Write small functions
✔ “If something changed → render again”
✔ Learn JS first, then frameworks

🧠 11. What Did You Really Learn from This Project?

This Todo List taught you:

DOM manipulation
Event handling
State management
Array + object usage
UI ↔ data synchronization

With this knowledge:

React becomes easier
Your debugging skills improve
You leave “junior” reflexes behind

🚀 Final Words

Building a framework-free Todo List is:

not hard
very educational
truly empowering

And it makes you say:

“I actually understand JavaScript.”