BUILD WITH ME · DAY 3 / 7

To-do App

Aaj pehli baar JavaScript app banaoge — ek to-do list jisme kaam add, done aur delete ho. Page band karke dobara kholo, tasks wahi milenge, kyunki hum unhe localStorage me save karenge.

⏱ 25 min🎯 Beginner → JS🛠 DOM, events, localStorage

<form> + submit event — button click aur Enter dono se add
Data ko array of objects me rakhna: { text, done }
render() pattern — array badlo, phir poori list dobara banao
localStorage + JSON.stringify / JSON.parse — data browser me save
classList, createElement, textContent

Seedha code karo ↓Step by step

Aaj yeh banega 👇

Step by step

Har step me "Editor me daalo" dabao — ya best: khud type karo, haath se likha code yaad rehta hai. ✍️

1App ka HTMLindex.html

Input aur button ko <form> me rakha — isse Enter dabane par bhi add hoga.
<ul id="list"> khaali hai — tasks JavaScript se aayenge.
autocomplete="off" — browser purane suggestions na dikhaye.

  <div class="app">
    <h1>Aaj ke kaam ✅</h1>
    <form id="form">
      <input id="task" placeholder="Naya kaam likho..."
        autocomplete="off">
      <button>Add</button>
    </form>
    <ul id="list"></ul>
    <p id="count"></p>
  </div>

2White cardstyle.css

Wahi Day 1 wali trick: display: grid + place-items: center.
Card fix width: 320px ka — phone par bhi fit.

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #0f172a;
  font-family: sans-serif;
}
.app {
  width: 320px;
  padding: 24px;
  background: #fff;
  border-radius: 20px;
}
h1 { margin: 0 0 16px; font-size: 24px; }

3Input + button ek line mestyle.css

form { display: flex } — input aur button side by side.
input { flex: 1 } — input bachi hui saari jagah le leta hai.

form { display: flex; gap: 8px; }
input {
  flex: 1;
  padding: 10px 12px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
}
button {
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: #6366f1;
  color: #fff;
  cursor: pointer;
}

4List + done stylestyle.css

Har li flex hai — text left, ✕ button right.
li.done span — jab task par done class ho, text par line-through.

ul { list-style: none; padding: 0; }
li {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #e2e8f0;
  cursor: pointer;
}
li.done span {
  text-decoration: line-through;
  color: #94a3b8;
}
li button { background: #ef4444; padding: 2px 8px; }
#count { color: #64748b; font-size: 14px; margin: 0; }

5Data + save()script.js

tasks ek array hai — har task ek object: { text: 'Gym', done: false }.
localStorage sirf text save karta hai, isliye JSON.stringify (array → text) aur JSON.parse (text → array).
|| [] — pehli baar kuch saved nahi hota (null), to khaali array lo.
try / catch — kuch browsers (private mode) me localStorage band hota hai, tab bhi app chalega.

const form = document.querySelector('#form');
const input = document.querySelector('#task');
const list = document.querySelector('#list');
const count = document.querySelector('#count');

let tasks = [];
try {
  tasks = JSON.parse(localStorage.getItem('tasks')) || [];
} catch (e) {}

function save() {
  try {
    localStorage.setItem('tasks', JSON.stringify(tasks));
  } catch (e) {}
}

6render() — array se listscript.js

Har baar list khaali karo, phir forEach se har task ka li banao.
textContent se text daala — user ka likha text kabhi HTML ki tarah run nahi hoga (safe).
Task par click → done ulta. ✕ par click → splice se array se hatao.
e.stopPropagation() — ✕ dabane par li ka click (done) na chale.
update() = save + render. Rule: data badlo → update().

function render() {
  list.innerHTML = '';
  tasks.forEach((t, i) => {
    const li = document.createElement('li');
    li.className = t.done ? 'done' : '';
    li.innerHTML = '<span></span><button>✕</button>';
    li.querySelector('span').textContent = t.text;
    li.onclick = () => { t.done = !t.done; update(); };
    li.querySelector('button').onclick = (e) => {
      e.stopPropagation();
      tasks.splice(i, 1);
      update();
    };
    list.append(li);
  });
  const done = tasks.filter(t => t.done).length;
  count.textContent = `${done} / ${tasks.length} done`;
}

function update() { save(); render(); }

7Add taskscript.js

e.preventDefault() — form submit par page reload nahi hoga.
trim() se aage-peeche ke space hatao; khaali ho to kuch mat karo.
Aakhri line render() — page khulte hi saved tasks dikhao.

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const text = input.value.trim();
  if (!text) return;
  tasks.push({ text, done: false });
  input.value = '';
  update();
});

render();

Tumhara editor 💻

Code editor

code isi device par save hota hai

Ab ise apna banao 🎨

Heading apna likho — jaise "Exam ki taiyari 📚"
Done tasks ka rang green karo
"Clear all" button banao jo saare tasks hata de (tasks = [] + update())
Khaali list par "Koi kaam nahi 🎉" message dikhao
Bonus ⭐: task ke saath aaj ki date bhi dikhao (new Date().toLocaleDateString())