JavaScriptJavaScript · Lesson 18

Project: Build a Live Task Board

DOM, events, arrays and storage in one small app.

Video tutorialTrack course · freeCodeCamp

Speed

Watch 00:00 Watch on YouTube More on this topic

Transcript & captions

4/4

This mini app adds, toggles and removes tasks, and persists them. Extend it: add a filter, a counter, or an edit mode.

Try it yourself

<style>
  body{font-family:system-ui;background:#0b1020;color:#e2e8f0;padding:12px}
  li{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid #334155}
  .done{opacity:.5;text-decoration:line-through}
  button{cursor:pointer}
</style>
<form id="f"><input id="i" placeholder="New task"><button>Add</button></form>
<ul id="list"></ul>
<script>
  let tasks = JSON.parse(localStorage.getItem('tasks') || '[]');
  const save = () => localStorage.setItem('tasks', JSON.stringify(tasks));
  function render(){
    list.innerHTML = '';
    tasks.forEach((t, idx) => {
      const li = document.createElement('li');
      li.className = t.done ? 'done' : '';
      li.innerHTML = '<input type=checkbox ' + (t.done ? 'checked' : '') + '><span></span><button>x</button>';
      li.querySelector('span').textContent = t.text;
      li.querySelector('input').onchange = () => { tasks[idx].done = !tasks[idx].done; save(); render(); };
      li.querySelector('button').onclick = () => { tasks.splice(idx,1); save(); render(); };
      list.appendChild(li);
    });
  }
  f.onsubmit = (e) => { e.preventDefault(); if(!i.value.trim()) return; tasks.push({text:i.value.trim(),done:false}); i.value=''; save(); render(); };
  render();
</script>