Interactive Coding Challenge: Todo App

This page demonstrates a common live-coding interview task: "Build a Todo App". The left side is the working app, and the right side explains the modern Vanilla JS techniques used to build it.

My Tasks

0 items left

How it works (Interview Talking Points)

1. State Management

Instead of reading from the DOM, we keep a "Source of Truth" array.

let todos = [
  { id: 1, text: 'Learn React', completed: false }
];
            

2. Render Function

We clear the list and rebuild it whenever state changes. This mimics React's rendering cycle.

function render() {
  list.innerHTML = '';
  todos.forEach(todo => {
    // Create elements...
  });
}
            

3. Event Delegation

We don't attach listeners to every delete button. We attach one listener to the parent list.

list.addEventListener('click', (e) => {
  if (e.target.closest('.btn-delete')) {
    deleteTodo(id);
  }
});
            

4. LocalStorage Persistence

Data persists on refresh.

localStorage.setItem('todos', JSON.stringify(todos));