Build a Simple Todo App with JavaScript (No Framework)

In the previous post, I introduced el.js, a lightweight JavaScript helper for building UI without relying on frameworks.

Now, let’s build something real.

In this article, we’ll create a simple Todo List App using pure JavaScript — no React, no Vue.js, and no external dependencies. you can look code at github

Simple Todo List live preview

🎯 What We’re Building

We’ll build a minimal todo app with:

Add new tasks
Mark tasks as completed
Delete tasks
Dynamic UI updates

All using a simple, chainable API.

Step 1: we start from the basic structure

javascript

const container = el('div') 
  .css({ 
    'max-width': '600px', 
    'margin': '50px auto', 
    'padding': '20px', 
    'background': '#fff' 
  }); 
 
const input = el('input') 
  .placeholder('Add a new task...'); 
 
const button = el('button') 
  .text('Add'); 

const container = el('div')
  .css({
    'max-width': '600px',
    'margin': '50px auto',
    'padding': '20px',
    'background': '#fff'
  });

const input = el('input')
  .placeholder('Add a new task...');

const button = el('button')
  .text('Add');

Instead of manually creating elements withdocument.createElement, we use el() to keep things clean and readable.

Step 2: Handling State

We store todos in a simple array:

javascript

1
2

let todos = []; 
let nextId = 1; 

let todos = [];
let nextId = 1;

No complex state management. Just plain JavaScript.

Step 3: Adding a Todo

javascript

function addTodo() { 
  const text = input.getValue().trim(); 
  if (!text) return; 
 
  todos.push({ 
    id: nextId++, 
    text, 
    completed: false 
  }); 
 
  input.value(''); 
  renderTodos(); 
} 

function addTodo() {
  const text = input.getValue().trim();
  if (!text) return;

  todos.push({
    id: nextId++,
    text,
    completed: false
  });

  input.value('');
  renderTodos();
}

Simple and predictable.

Step 4: Rendering the UI

javascript

function renderTodos() { 
  todoList.empty(); 
 
  todos.forEach(todo => { 
    const item = el('li') 
      .child( 
        el('span') 
          .text(todo.text), 
        el('button') 
          .text('Delete') 
          .click(() => deleteTodo(todo.id)) 
      ); 
 
    todoList.child(item); 
  }); 
 
  todoList.get(); 
} 

function renderTodos() {
  todoList.empty();

  todos.forEach(todo => {
    const item = el('li')
      .child(
        el('span')
          .text(todo.text),
        el('button')
          .text('Delete')
          .click(() => deleteTodo(todo.id))
      );

    todoList.child(item);
  });

  todoList.get();
}

No virtual DOM. No diffing. Just direct DOM updates.

Step 5: Toggle & Delete

javascript

function toggleTodo(id) { 
  todos = todos.map(todo => 
    todo.id === id 
      ? { ...todo, completed: !todo.completed } 
      : todo 
  ); 
 
  renderTodos(); 
} 
 
function deleteTodo(id) { 
  todos = todos.filter(todo => todo.id !== id); 
  renderTodos(); 
} 

function toggleTodo(id) {
  todos = todos.map(todo =>
    todo.id === id
      ? { ...todo, completed: !todo.completed }
      : todo
  );

  renderTodos();
}

function deleteTodo(id) {
  todos = todos.filter(todo => todo.id !== id);
  renderTodos();
}

Why This Approach?

Modern frameworks are powerful, but they’re not always necessary.

With el.js, we can:

write less boilerplate
stay close to native JavaScript
avoid build steps and dependencies

Real-World Usage

This isn’t just a demo.

This blog — including its admin panel — is built entirely using el.js without any frontend framework.

Key Takeaways

You don’t always need a framework
Simple tools can go a long way
Understanding the DOM is still valuable

In the next article, we’ll build plug-and-play UI components — starting with a simple popup and chat interface — designed to be easily reused in any project.

🎯 What We’re Building

Step 1: we start from the basic structure

Step 2: Handling State

Step 3: Adding a Todo

Step 4: Rendering the UI

Step 5: Toggle & Delete

Why This Approach?

Real-World Usage

Support My Work