BUILD WITH ME · SEASON 2 · DAY 5 / 7

Expense Tracker

Season 2 ka paanchwa project: Kharcha Tracker — kis cheez par kitna kharcha kiya likho, aur upar total apne aap badhta-ghatta rahe. Kisi kharche par ✕ dabao to wo hat jaye aur total dobara ginta jaye. Sab kuch localStorage me save rahega. Isme reduce() ka asli use seekhoge!

⏱ 40 min🎯 Beginner → array methods🛠 Forms, totals, array methods

<form> me 2 inputs aur submit event (Enter se bhi add)
type="number" input aur Number() se text ko number banana
Data ko array of objects me rakhna: { title, amount }
reduce() — poore array ko ek number (total) me badalna
flex-wrap se form ko do line me todna

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

1Tracker ka HTMLindex.html

#total me poora kharcha dikhega.
Form me do input: kis par (#title) aur kitna (#amount, type="number"), aur ek Add button.
#list khaali — kharche JavaScript se aayenge.

  <div class="app">
    <h1>Kharcha Tracker 💸</h1>
    <div id="total">₹0</div>
    <form id="form">
      <input id="title" placeholder="Kis par kharcha?">
      <input id="amount" type="number" placeholder="₹ Rakam">
      <button>Add</button>
    </form>
    <ul id="list"></ul>
  </div>

2Dark cardstyle.css

Wahi purani 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;
}

3Total + form stylestyle.css

#total bada aur green — sabse pehle wahi dikhna chahiye.
flex-wrap: wrap — form ke andar jagah kam pade to agla input neeche chala jaye.
#title { width: 100% } poori line leta hai; #amount { flex: 1 } bachi jagah leta hai aur Add button uske baju me.
min-width: 0 — number input ko chhota hone ki ijazat (nahi to form se bahar nikal jata).

h1 { margin: 0; color: #fff; font-size: 20px; }
#total {
  margin: 6px 0 14px;
  color: #22c55e;
  font-size: 40px;
  font-weight: bold;
}
#form { display: flex; flex-wrap: wrap; gap: 8px; }
input {
  box-sizing: border-box;
  padding: 9px 12px;
  border: 2px solid #334155;
  border-radius: 10px;
  background: #0f172a;
  color: #fff;
}
#title { width: 100%; }
#amount { flex: 1; min-width: 0; }

4Button + liststyle.css

Indigo Add button.
list-style: none — bullets hatao. max-height + overflow: auto se list scroll hogi.

button {
  padding: 9px 18px;
  border: 0;
  border-radius: 10px;
  background: #6366f1;
  color: #fff;
  cursor: pointer;
}
ul {
  max-height: 130px;
  margin: 14px 0 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

5Kharche ki rowstyle.css

Har li flex hai: naam (flex: 1 se bacha hua jagah), rakam (pink), ✕ button.
align-items: center — teeno ek line me beech me.
Row ke neeche halki line (border-bottom).

li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #334155;
  color: #e2e8f0;
  font-size: 14px;
}
li span { flex: 1; }
li b { color: #f472b6; }
li button { padding: 0; background: none; color: #94a3b8; }

6Elements + loadscript.js

Saare elements pehle hi pakad lo.
items array me har kharcha ek object: { title: 'Chai', amount: 20 }.
Pehle ka saved data localStorage se padho; kuch nahi mila to || [].

const form = document.querySelector('#form');
const title = document.querySelector('#title');
const amount = document.querySelector('#amount');
const list = document.querySelector('#list');
const totalEl = document.querySelector('#total');

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

7render() + reduce()script.js

Har baar list khaali karo aur forEach se har kharche ki row banao.
textContent se text daala — safe.
✕ par: splice(i, 1) se kharcha hatao, phir update().
reduce((s, it) => s + it.amount, 0) — 0 se shuru karke har kharche ki rakam jodta jata hai. Aakhir me total.

function render() {
  list.innerHTML = '';
  items.forEach((it, i) => {
    const li = document.createElement('li');
    li.innerHTML = '<span></span><b></b><button>✕</button>';
    li.querySelector('span').textContent = it.title;
    li.querySelector('b').textContent = '₹' + it.amount;
    li.querySelector('button').onclick = () => {
      items.splice(i, 1);
      update();
    };
    list.append(li);
  });
  const sum = items.reduce((s, it) => s + it.amount, 0);
  totalEl.textContent = '₹' + sum;
}

8update()script.js

update() = save (localStorage) + render (screen). Rule: data badlo → update().

function update() {
  try {
    localStorage.setItem('items', JSON.stringify(items));
  } catch (e) {}
  render();
}

9Form submitscript.js

e.preventDefault() — page reload nahi hoga.
Number(amount.value) — text ko number. Naam khaali ya rakam 0 se kam/barabar ho to kuch nahi.
unshift — naya kharcha list ke upar. Phir inputs saaf aur update().
Aakhri render() — page khulte hi purane kharche aur total dikhao.

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const t = title.value.trim();
  const a = Number(amount.value);
  if (!t || a <= 0) return;
  items.unshift({ title: t, amount: a });
  title.value = '';
  amount.value = '';
  update();
});

render();