BUILD WITH ME · SEASON 2 · DAY 4 / 7

Notes App

Season 2 ka chautha project: ek Notes App — note likho, save karo, delete karo, aur search box se turant dhundo. Page band karke dobara kholo, notes wahi milenge, kyunki hum unhe localStorage me save karte hain.

⏱ 35 min🎯 Beginner → JS data🛠 Textarea, localStorage, search

<textarea> aur <input> ko ek jaisa style karna
Notes ko array me rakhna aur unshift se sabse naya note upar jodna
localStorage + JSON.stringify / JSON.parse — notes browser me save
Live search: toLowerCase() aur includes() se filter
render() pattern — data badlo, phir list dobara banao

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. ✍️

1Notes App ka HTMLindex.html

Upar #search input, uske neeche #text textarea (naya note) aur #add button.
#list khaali div hai — saare notes JavaScript yahan dalega.
placeholder — khaali box me halka sa hint text.

  <div class="app">
    <h1>My Notes 📝</h1>
    <input id="search" placeholder="Search notes...">
    <textarea id="text" placeholder="Naya note likho..."></textarea>
    <button id="add">Save note</button>
    <div id="list"></div>
  </div>

2Dark cardstyle.css

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

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #0f172a;
  font-family: sans-serif;
}
.app {
  width: 300px;
  padding: 24px;
  background: #1e293b;
  border-radius: 24px;
}

3Input + textarea stylestyle.css

input, textarea { ... } — comma se dono ko ek saath style.
box-sizing: border-box + width: 100% — padding aur border bhi 100% ke andar rahe.
resize: none — textarea ka kona kheench kar bada nahi hoga.

h1 { margin: 0 0 12px; color: #fff; font-size: 22px; }
input, textarea {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 8px;
  padding: 9px 12px;
  border: 2px solid #334155;
  border-radius: 10px;
  background: #0f172a;
  color: #fff;
  font: 14px sans-serif;
}
textarea { height: 56px; resize: none; }

4Save button + liststyle.css

Poori chaudai ka indigo button.
#list par max-height + overflow: auto — zyada notes ho jaye to list scroll hogi, card badhega nahi.

#add {
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-radius: 10px;
  background: #6366f1;
  color: #fff;
  cursor: pointer;
}
#list { max-height: 140px; margin-top: 12px; overflow: auto; }

5Note cardstyle.css

display: flex + space-between — text left, ✕ button right.
border-left pink — card ke baayein ek rang ki patti.
Delete button ka background hata diya, sirf ✕ dikhe.

.note {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding: 10px 12px;
  border-left: 4px solid #ec4899;
  border-radius: 8px;
  background: #334155;
  color: #e2e8f0;
  font-size: 14px;
}
.note p { margin: 0; }
.note button {
  border: 0;
  background: none;
  color: #94a3b8;
  cursor: pointer;
}

6Elements + notes loadscript.js

Chaaron elements pehle hi pakad lo.
notes ek array hai (har note ek text). Pehli baar kuch saved nahi hota, isliye || [].
try / catch — kuch jagah localStorage band hota hai, tab bhi app chalega.

const search = document.querySelector('#search');
const text = document.querySelector('#text');
const addBtn = document.querySelector('#add');
const list = document.querySelector('#list');

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

7save()script.js

localStorage sirf text rakhta hai, isliye JSON.stringify se array ko text banaya.

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

8render() + search filterscript.js

q = search box ka text (chhote akshar me). Har note ko bhi chhote akshar me karke includes(q) se match.
Match nahi to return — us note ko skip. Khaali search me sab match hote hain.
textContent se note daala — user ka likha HTML kabhi chalega nahi (safe).
✕ par click: splice(i, 1) se array se hatao, phir save() aur render().

function render() {
  const q = search.value.toLowerCase();
  list.innerHTML = '';
  notes.forEach((n, i) => {
    if (!n.toLowerCase().includes(q)) return;
    const card = document.createElement('div');
    card.className = 'note';
    card.innerHTML = '<p></p><button>✕</button>';
    card.querySelector('p').textContent = n;
    card.querySelector('button').onclick = () => {
      notes.splice(i, 1);
      save();
      render();
    };
    list.append(card);
  });
}

9Save aur search eventsscript.js

Save dabane par: trim() se space hatao, khaali ho to kuch nahi.
unshift — array ke shuru me jodta hai, isliye naya note upar aata hai.
search par input event — har akshar likhte hi list filter. Aakhri render() page khulte hi saved notes dikhata hai.

addBtn.addEventListener('click', () => {
  const v = text.value.trim();
  if (!v) return;
  notes.unshift(v);
  text.value = '';
  save();
  render();
});

search.addEventListener('input', render);
render();