Build a To-Do App

Let's apply what we've learned by building the classic JavaScript project: a To-Do App.

The Logic

A to-do app needs an array to store tasks, an input field to get new tasks, a button to add them, and a function to render the array to the DOM.

const tasks = [];
const input = document.querySelector('#taskInput');
const btn = document.querySelector('#addBtn');
const list = document.querySelector('#taskList');

btn.addEventListener('click', () => {
  const text = input.value;
  if (!text) return;
  
  tasks.push(text);
  input.value = '';
  render();
});

function render() {
  list.innerHTML = '';
  tasks.forEach(task => {
    const li = document.createElement('li');
    li.textContent = task;
    list.appendChild(li);
  });
}
          

Practice

Related Guides

• DOM Manipulation
• Arrays