মাঝপথের প্রজেক্ট — ব্রাউজারে একটি খরচের খাতা

১ · কেন একটি প্রজেক্ট — “হিসাব খাতা”-র চাহিদা

বিশটি পর্বে আপনি অনেক টুকরো শিখেছেন — মান আর টাইপ, ভ্যারিয়েবল, শর্ত, লুপ, function, object, array, map/filter/reduce, destructuring, Map/Set, JSON আর তারিখ। প্রতিটি আলাদাভাবে বোঝা এক জিনিস, আর সবগুলো জোড়া দিয়ে একটি কাজের জিনিস বানানো আরেক জিনিস। রান্নার বইয়ে প্রতিটি মশলার গুণ পড়া আর পুরো এক বেলার রান্না করা যেমন আলাদা। এই পর্ব সেই পুরো রান্না — Module ৩-এর শেষ পর্ব, আর কোর্সের মাঝপথের প্রজেক্ট।

গল্পটি এরকম। রাফি ঢাকায় একটি অফিসে চাকরি করেন। মাসের শেষে হিসাব মেলে না — রিকশা, চা-শিঙাড়া, মোবাইল রিচার্জ, ইন্টারনেট বিল; টাকা কোথায় গেল কেউ জানে না। তিনি চান একটি ছোট পাতা, যেখানে প্রতিটি খরচ লিখে রাখা যায় আর মাস শেষে দেখা যায় কোন খাতে কত গেল। আমরা ঠিক সেটাই বানাব: হিসাব খাতা, যা চলে ব্রাউজারে, একটি HTML পাতা আর কিছু JavaScript দিয়ে।

চাহিদা — অ্যাপটি কী কী পারবে

কী বানাব না — পরিধির সীমা

একটি ভালো প্রজেক্টের অর্ধেক কাজ হলো “না” বলা। প্রথম সংস্করণে যা যা থাকবে না: লগইন, সার্ভার, একাধিক ব্যবহারকারী, আর স্থায়ীভাবে সেভ করা। পাতা reload করলে খাতা খালি হয়ে যাবে — ডেটা থাকবে শুধু memory-তে। এর দুটি কারণ। এক, এই পাতার কোড চালানোর জায়গাটি একটি নিরাপদ sandbox, যেখানে localStorage ব্যবহার করা যায় না। দুই, স্থায়ী সংরক্ষণ নিজেই একটি বড় বিষয় — পর্ব ৪০-এ localStorage আর IndexedDB দিয়ে এই খাতাকেই আমরা মনে রাখতে শেখাব। এই ছোট, কিন্তু সম্পূর্ণ কাজ করে এমন প্রথম সংস্করণকেই MVP (minimum viable product) বলা হয়।

২ · নকশা — ডেটা মডেল, ফাংশনের তালিকা আর ডেটার প্রবাহ

কোড লেখার আগে তিনটি প্রশ্নের উত্তর কাগজে লিখুন: ডেটা দেখতে কেমন? কোন কোন কাজ লাগবে? ডেটা কোন পথে চলবে? এই তিনটি পরিষ্কার থাকলে কোড প্রায় নিজে থেকেই লেখা হয়ে যায়।

ডেটা মডেল — একটি খরচ আর পুরো state

একটি খরচ হলো একটি সাধারণ object. পুরো অ্যাপের অবস্থা — অর্থাৎ state — আরেকটি object, যার ভেতরে খরচের একটি array আর পরের id-র নম্বর:

// একটি খরচ
{ id: 3, date: '2026-10-01', category: 'bills', amount: 120050, note: 'ইন্টারনেট' }

// পুরো অ্যাপের state — একটিই জায়গায়
{ items: [ /* খরচের object, যোগ করার ক্রমে */ ], nextId: 6 }

// খাতের তালিকা — key কোডে, লেখা বাংলায়
const CATS = { food: 'খাবার', transport: 'যাতায়াত', bills: 'বিল', other: 'অন্যান্য' };

প্রতিটি সিদ্ধান্তের পেছনে একটি কারণ আছে:

• amount পূর্ণসংখ্যা পয়সায়: ১২০০.৫০ টাকা মানে 120050. পর্ব ১০-এ দেখেছেন দশমিক টাকা যোগ করলে 245.85000000000002-এর মতো ভুল জমে; পয়সার যোগ হুবহু নির্ভুল। টাকায় রূপান্তর হবে শুধু দেখানোর সময়।
• date একটি 'YYYY-MM-DD' string, Date object নয়: এমন string JSON-এ হুবহু যায়-আসে, অক্ষর ধরে সাজালেই তারিখের ক্রমে সাজানো হয়, আর time zone-এর কারণে এক দিন সরে যাওয়ার ফাঁদ (পর্ব ২০) থাকে না। খরচের জন্য আমাদের দিন দরকার, মিলিসেকেন্ড নয়।
• category একটি ছোট ইংরেজি key: কোডে তুলনা সহজ; বাংলা নাম আসে CATS থেকে। পরে খাতের নাম বদলালে পুরোনো ডেটা নষ্ট হয় না।
• প্রতিটি খরচের id: একই দিনে একই টাকার দুটি চা হতে পারে; id ছাড়া আলাদা করা যায় না। পরে মুছে ফেলা বা edit করার জন্যও id লাগবে।

ফাংশনের তালিকা — দুই দলে ভাগ

খেয়াল করুন, হিসাবের ফাংশনগুলো পুরো state নয়, items নেয়। কারণ: ফিল্টার করা তালিকার মোটও একই total দিয়ে বের করা যায়। ছোট, এক-কাজের ফাংশন যত কম জিনিস চায়, তত বেশি জায়গায় কাজে লাগে।

এখন সবচেয়ে গুরুত্বপূর্ণ ছবি — দুই স্তর কীভাবে কথা বলে। ধাপে ধাপে দেখুন:

addExpense(state, e)  → নতুন state
total(items)          → 171600
byCategory(items)     → Map { 'food' => 33550, … }
// একই ইনপুটে সবসময় একই আউটপুট — console-এ টেস্ট করা যায়

let state = { items: [ … ], nextId: 6 };
const past = [ S0, S1, S2, S3, S4 ];   // undo-র জন্য
পাতায় যা দেখা যায়, সব এখান থেকেই আসে

submit  → tryAdd({ … ঘর থেকে পড়া মান … })
        → commit(addExpense(state, e))
        → render()   // state থেকে পুরো তালিকা নতুন করে
এখানে হিসাবের কোনো নিয়ম নেই

DOM বদলালেন (table বানালেন)   → শুধু render বদলায়
storage যোগ (পর্ব ৪০)         → শুধু shell বদলায়
React-এ নিলেন (পর্ব ৫৪)       → core হুবহু থাকে
VAT/বাজেটের নিয়ম বদলালেন       → শুধু core বদলায়, টেস্ট চালান

৩ · ধাপ ১–২ — যাচাই আর addExpense: নতুন state, পুরোনোটি অক্ষত

বড় প্রোগ্রাম একবারে লেখা হয় না — ছোট ছোট ধাপে, প্রতিটি ধাপ শেষে চালিয়ে দেখে। আমাদের পাঁচটি ধাপ: (১) ইনপুট পড়া ও যাচাই, (২) addExpense, (৩) হিসাব — মোট, খাতওয়ারি, মাসওয়ারি, (৪) পাতায় দেখানো, (৫) undo আর export. প্রথম তিন ধাপে DOM লাগবেই না।

ধাপ ১ — লেখা থেকে পয়সা, আর যাচাই

ফর্মের প্রতিটি ঘরের মান আসে string হিসেবে — "85.50", এমনকি খালি "". পর্ব ১০-এর ফাঁদটি মনে আছে? Number("") দেয় 0, আর 19.99 * 100 দেয় 1998.9999999999998. তাই রূপান্তরের ফাংশনটি ছোট হলেও সতর্ক:

const toPaisa = (text) => (text.trim() === '' ? NaN : Math.round(Number(text) * 100));

function validate(e) {
  if (!Number.isSafeInteger(e.amount) || e.amount <= 0) return 'টাকার পরিমাণ শূন্যের বেশি হতে হবে';
  if (!Object.hasOwn(CATS, e.category)) return 'অজানা খাত: ' + e.category;
  const d = new Date(e.date + 'T00:00:00Z');
  if (Number.isNaN(d.getTime()) || d.toISOString().slice(0, 10) !== e.date) return 'তারিখ ঠিক নেই';
  return null;   // null মানে সব ঠিক
}

• ফাঁকা লেখা আলাদা করে ধরা: নইলে খালি ঘর হয়ে যেত ০ টাকা। NaN ফেরত দিলে পরের যাচাই নিজেই সেটি বাতিল করে, কারণ Number.isSafeInteger(NaN) হলো false.
• Math.round: 19.99 * 100-এর লুকানো ভুল গোল করে 1999 বানায়।
• Object.hasOwn, in নয়: 'toString' in CATS দেয় true, কারণ in prototype-এর জিনিসও দেখে (পর্ব ১৪, গভীরে পর্ব ২৫)। ES2022-এ যুক্ত Object.hasOwn শুধু object-এর নিজের key দেখে।
• তারিখের round-trip: Date.parse('2026-02-30') V8-এ কোনো ভুল দেখায় না — মান গড়িয়ে ২ মার্চ হয়ে যায়। তাই তারিখ বানিয়ে আবার string-এ ফিরিয়ে মিলিয়ে দেখি; না মিললে তারিখটি আসলে নেই।
• ভুল হলে throw নয়, বার্তা ফেরত: ব্যবহারকারীর ভুল ইনপুট স্বাভাবিক ঘটনা, প্রোগ্রামের দুর্ঘটনা নয়। এখানে বার্তা-ফেরতের সরল পথ বেছেছি; throw আর custom error আসবে পর্ব ২৯-এ। প্রতিটি শর্ত একটি guard clause — ভুল পেলেই সাথে সাথে ফেরত।

ধাপ ২ — addExpense: বদলানো নয়, নতুন বানানো

সবচেয়ে সহজ পথ হতো state.items.push(e) — পুরোনো array-টিই বদলে দেওয়া, অর্থাৎ mutation. আমরা ইচ্ছা করেই তা করব না। addExpense পুরোনো state ছোঁবে না; spread দিয়ে নতুন array আর নতুন object বানাবে — এই কৌশলের নাম immutable update (পর্ব ১৭):

const addExpense = (s, e) => ({
  items: [...s.items, { ...e, id: s.nextId }],   // নতুন array, শেষে নতুন খরচ
  nextId: s.nextId + 1,
});

কেন এত ঝামেলা? কারণ পুরোনো state অক্ষত থাকলে সেটি একটি নির্ভরযোগ্য ছবি — undo করতে সেই ছবিটি ফিরিয়ে আনলেই হলো। আর ফাংশনটি side effect-মুক্ত, তাই একে একা টেস্ট করা যায়। নিচের কোডে core-এর চারটি ফাংশন চালিয়ে দেখুন — কোনো পাতা, কোনো ফর্ম ছাড়াই:

const emptyState = { items: [], nextId: 1 };
const addExpense = (s, e) => ({ items: [...s.items, { ...e, id: s.nextId }], nextId: s.nextId + 1 });
const total = (items) => items.reduce((sum, e) => sum + e.amount, 0);
const byCategory = (items) =>
  items.reduce((m, e) => m.set(e.category, (m.get(e.category) ?? 0) + e.amount), new Map());

const s1 = addExpense(emptyState, { date: '2026-10-01', category: 'food', amount: 25000, note: 'ভাত' });
const s2 = addExpense(s1, { date: '2026-10-02', category: 'transport', amount: 6000, note: 'রিকশা' });
const s3 = addExpense(s2, { date: '2026-10-05', category: 'food', amount: 8550, note: 'চা' });

console.log(emptyState.items.length, s1.items.length, s3.items.length);
console.log(s1.items[0] === s3.items[0]);       // পুরোনো খরচ কপি হয়নি, ভাগাভাগি
console.log(total(s3.items), total(s1.items));
console.log(byCategory(s3.items));

const past = [emptyState, s1, s2];              // undo stack
let state = s3;
state = past.pop();                              // undo
console.log(state.items.length, total(state.items), past.length);

৪ · ধাপ ৩ — হিসাব: reduce আর Map দিয়ে খাতওয়ারি ও মাসওয়ারি মোট

মোট বের করা সহজ: items.reduce((sum, e) => sum + e.amount, 0). খাতওয়ারি মোট একটু বেশি মজার। আমাদের দরকার একটি “খাত → পয়সা” তালিকা — ঠিক যে কাজের জন্য Map বানানো (পর্ব ১৮)। reduce একটি খালি Map দিয়ে শুরু করে প্রতিটি খরচে সেটি হালনাগাদ করে; Map-টিই এখানে accumulator. নিচে তিনটি খরচ দিয়ে ধাপে ধাপে দেখুন:

1items.reduce((m, e) =>2  m.set(e.category,3        (m.get(e.category) ?? 0) + e.amount),4  new Map());5// ফল: Map(2) { 'food' => 33550, 'transport' => 6000 }

এক খাতের মান কয়েকবার m.set হলো — তাহলে এটি কি mutation নয়? হ্যাঁ, তবে Map-টি এই ফাংশনের ভেতরে জন্মেছে আর ভেতরেই বড় হয়েছে; বাইরের কেউ তাকে আগে দেখেনি। এমন “স্থানীয় mutation” ফাংশনকে impure বানায় না — বাইরে থেকে দেখলে একই ইনপুটে একই Map আসে। Pure মানে “কোথাও কিছু বদলায় না” নয়; মানে “বাইরের পৃথিবী কিছু টের পায় না”।

একই ছাঁচে মাসওয়ারি — আর একটি ছোট সাধারণীকরণ

মাসওয়ারি মোটে key হবে খাত নয়, মাস: '2026-10-05'.slice(0, 7) = '2026-10'. দুটি প্রায় একই ফাংশন লেখার বদলে key বের করার নিয়মটিকে argument বানাই — ফাংশন যখন আরেকটি ফাংশন নেয়, তাকে বলে higher-order function (পর্ব ১৩):

const sumBy = (items, keyOf) =>
  items.reduce((m, e) => m.set(keyOf(e), (m.get(keyOf(e)) ?? 0) + e.amount), new Map());
const byCategory = (items) => sumBy(items, (e) => e.category);
const byMonth    = (items) => sumBy(items, (e) => e.date.slice(0, 7));

const sortedByDate = (items) =>
  items.toSorted((a, b) => a.date.localeCompare(b.date) || a.id - b.id);

sortedByDate-এ দুটি সিদ্ধান্ত লক্ষ করুন। এক: sort নয়, toSorted (ES2023) — sort মূল array-টিই বদলে দেয়, যা আমাদের state-এর নিয়ম ভাঙত। দুই: একই তারিখে দুটি খরচ হলে localeCompare দেয় ০, তখন || a.id - b.id যোগ করার ক্রম ঠিক রাখে। আর 'YYYY-MM-DD' string অক্ষর ধরে তুলনা করলেই তারিখের ক্রম আসে, কারণ বড় একক (বছর) আগে আর প্রতিটি অংশ সমান দৈর্ঘ্যের। Map key ঢোকার ক্রম মনে রাখে বলে সাজানো array থেকে বানানো byMonth-এর মাসগুলোও আসে ক্রমানুসারে।

বাংলায় টাকা আর মাসের নাম — Intl

হিসাব শেষ, এবার শুধু দেখানো। পর্ব ১০ আর ২০-এর দুটি formatter একবার বানিয়ে বারবার ব্যবহার করি (বানানো তুলনামূলক ব্যয়বহুল, ব্যবহার সস্তা):

const tk  = new Intl.NumberFormat('bn-BD', { style: 'currency', currency: 'BDT' });
const mon = new Intl.DateTimeFormat('bn-BD', { month: 'long', year: 'numeric', timeZone: 'Asia/Dhaka' });
const money     = (paisa) => tk.format(paisa / 100);                    // 171600 → '১,৭১৬.০০৳'
const monthName = (ym) => mon.format(new Date(ym + '-15T12:00:00+06:00')); // '2026-10' → 'অক্টোবর ২০২৬'

Intl.NumberFormat লাখ-কোটির নিয়মে কমা বসায়, বাংলা অঙ্ক দেয় আর ৳ চিহ্ন লাগায়। Intl.DateTimeFormat মাসের বাংলা নাম দেয়। monthName-এ মাসের ১৫ তারিখের দুপুর বেছে নেওয়ার কারণ: মাসের ১ তারিখ মধ্যরাত বেছে নিলে অন্য time zone-এ সেটি আগের মাসের শেষ দিন হয়ে যেতে পারত। মাসের মাঝখানে কোনো time zone-ই মাস বদলাতে পারে না, আর timeZone: 'Asia/Dhaka' ফলটিকে যেকোনো কম্পিউটারে একই রাখে।

৫ · ধাপ ৪ — পাতায় দেখানো: পাতলা UI আর একটি submit-এর যাত্রা

এবার পাতা। HTML অংশটি ছোট — একটি ফর্ম (টাকা, খাত, নোট, তারিখ), একটি বার্তার জায়গা, একটি ফিল্টার আর undo বোতাম, একটি তালিকা, আর JSON দেখানোর একটি ভাঁজ-করা অংশ:

<form id="f">
  <input id="amount" inputmode="decimal" placeholder="টাকা">
  <select id="cat"><option value="food">খাবার</option> … </select>
  <input id="note" placeholder="নোট">
  <input id="date" type="date" value="2026-10-06">
  <button>যোগ করুন</button>
</form>
<p id="msg"></p>
<div id="tools">খাত: <select id="filter">…</select> <button type="button" id="undo">↶ undo</button> <b id="sum"></b></div>
<ul id="list"></ul>
<details><summary>JSON export</summary><pre id="json"></pre></details>

JavaScript দিয়ে পাতার সাথে কথা বলতে আমরা মাত্র কয়েকটি টুল নেব: document.querySelector দিয়ে element খোঁজা, textContent দিয়ে লেখা বসানো, document.createElement আর append দিয়ে নতুন <li> বানানো, আর addEventListener দিয়ে বোতাম চাপা বা ফর্ম জমা শোনা।

render — পুরো state থেকে পুরো পাতা

function render() {
  const cat = $('#filter').value;
  const shown = sortedByDate(state.items).filter((e) => cat === 'all' || e.category === cat);
  $('#list').textContent = '';                       // পুরোনো তালিকা মুছে
  for (const e of shown) {
    const li = document.createElement('li');
    li.textContent = `${e.date} · ${CATS[e.category]} · ${money(e.amount)} · ${e.note}`;
    $('#list').append(li);
  }
  $('#sum').textContent = `মোট ${money(total(shown))} (${shown.length}টি)`;
  $('#json').textContent = JSON.stringify(state.items, null, 2);
}

render-এর নিয়মটি সরল: পাতা = f(state). কোন <li> নতুন যোগ হলো, কোনটা সরল — এসব আলাদা করে হিসাব না করে প্রতিবার পুরো তালিকা নতুন করে আঁকি। দশ-বিশটি খরচে এটি চোখের পলকে হয়; হাজার হাজার সারিতে কী করতে হয়, সে প্রশ্ন ভাবনার প্রশ্ন ২-এ। আর একটি নিরাপত্তার কথা: নোট লেখেন ব্যবহারকারী, তাই সেটি innerHTML-এ নয়, textContent-এ বসাই। কেউ নোটে <img src=x onerror=…> লিখলে textContent সেটিকে নিছক লেখা হিসেবে দেখায়, কোড হিসেবে চালায় না — XSS নিয়ে বিস্তারিত পর্ব ৪৩-এ।

একটি submit-এর যাত্রা

ব্যবহারকারী “৮৫.৫০, খাবার, চা-শিঙাড়া” লিখে “যোগ করুন” চাপলেন। এরপর কী কী ঘটে, ধাপে ধাপে দেখুন:

$('#f').addEventListener('submit', (ev) => {
  ev.preventDefault();   // নইলে পাতা reload, সব হারাবে
  tryAdd({ date: '2026-10-06', category: 'food',
           amount: toPaisa('85.50'), note: 'চা-শিঙাড়া' });
});

toPaisa('85.50')  → 8550
validate(e)       → null   // সব ঠিক
ভুল হলে: $('#msg').textContent = 'টাকার পরিমাণ …'; state বদলায় না

addExpense(state, e)
  → { items: [ …৪টি পুরোনো, { …e, id: 5 } ], nextId: 6 }

function commit(next) {
  past.push(state);   // পুরোনো ছবি undo-র জন্য
  state = next;
  render();
}

• 2026-09-28 · খাবার · ২৫০.০০৳ · দুপুরের খাবার
• …
• 2026-10-06 · খাবার · ৮৫.৫০৳ · চা-শিঙাড়া
মোট … (৫টি)

৬ · ধাপ ৫ — undo আর JSON export

সাধারণভাবে undo বানানো কঠিন: প্রতিটি কাজের উল্টো কাজ লিখতে হয় — যোগের উল্টো মোছা, edit-এর উল্টো আগের মান ফেরানো। আমাদের নকশায় undo প্রায় বিনামূল্যে, কারণ প্রতিটি পুরোনো state অক্ষত আছে। দরকার শুধু সেগুলো একটি array-তে রাখা — শেষে ঢোকে, শেষ থেকে বেরোয়। একে বলে undo stack:

let state = emptyState;
const past = [];                                   // undo stack

function commit(next) { past.push(state); state = next; render(); }

$('#undo').addEventListener('click', () => {
  if (past.length) { state = past.pop(); render(); }
});

1let state = S0; const past = [];2commit(S1);   // রিকশা ৬০3commit(S2);   // বিল ১২০০.৫০4commit(S3);   // চা ৮৫.৫০5state = past.pop();   // undo6state = past.pop();   // আবার undo

JSON export — খাতার একটি পাঠযোগ্য ছবি

Export-এর জন্য একটি লাইনই যথেষ্ট: JSON.stringify(state.items, null, 2). তৃতীয় argument 2 মানে প্রতিটি স্তরে দুই ঘর indentation — মানুষ পড়তে পারে, আবার অন্য প্রোগ্রাম JSON.parse দিয়ে হুবহু ফিরিয়েও নিতে পারে (পর্ব ১৯)। আমাদের ডেটা মডেল এখানে সুফল দেয়: string তারিখ আর পূর্ণসংখ্যা পয়সা JSON-এ কোনো রূপান্তর ছাড়াই যায়। Date object থাকলে সেটি ISO string হয়ে যেত, আর ফেরত পড়ার সময় আবার Date বানাতে হতো; Map থাকলে আসত শুধু {}.

৭ · পুরো অ্যাপ — একটি ব্লকে হিসাব খাতা

সব টুকরো এবার এক জায়গায়। নিচের কোড চালালে ওপরে আসল একটি ফর্মসহ খাতা দেখা যাবে। চালানোর সাথে সাথে কোডটি তিনটি কাজ করে: প্রথমে core-এর self-test, তারপর নির্দিষ্ট তারিখের পাঁচটি নমুনা খরচ যোগ (আর একটি ইচ্ছাকৃত ভুল খরচ), শেষে একবার undo — যাতে প্রতিবার একই আউটপুট আসে। তারপর ফর্মে নিজে খরচ লিখে দেখুন, খাত দিয়ে ফিল্টার করুন, undo চাপুন, “JSON export” খুলুন।

const CATS = { food: 'খাবার', transport: 'যাতায়াত', bills: 'বিল', other: 'অন্যান্য' };
const tk = new Intl.NumberFormat('bn-BD', { style: 'currency', currency: 'BDT' });
const mon = new Intl.DateTimeFormat('bn-BD', { month: 'long', year: 'numeric', timeZone: 'Asia/Dhaka' });
const money = (paisa) => tk.format(paisa / 100);

// ===== pure core: DOM নেই — ডেটা ঢোকে, নতুন ডেটা বেরোয় =====
const emptyState = { items: [], nextId: 1 };
const toPaisa = (text) => (text.trim() === '' ? NaN : Math.round(Number(text) * 100));
function validate(e) {
  if (!Number.isSafeInteger(e.amount) || e.amount <= 0) return 'টাকার পরিমাণ শূন্যের বেশি হতে হবে';
  if (!Object.hasOwn(CATS, e.category)) return 'অজানা খাত: ' + e.category;
  const d = new Date(e.date + 'T00:00:00Z');
  if (Number.isNaN(d.getTime()) || d.toISOString().slice(0, 10) !== e.date) return 'তারিখ ঠিক নেই';
  return null;
}
const addExpense = (s, e) => ({ items: [...s.items, { ...e, id: s.nextId }], nextId: s.nextId + 1 });
const total = (items) => items.reduce((sum, e) => sum + e.amount, 0);
const sumBy = (items, keyOf) =>
  items.reduce((m, e) => m.set(keyOf(e), (m.get(keyOf(e)) ?? 0) + e.amount), new Map());
const byCategory = (items) => sumBy(items, (e) => e.category);
const byMonth = (items) => sumBy(items, (e) => e.date.slice(0, 7));
const sortedByDate = (items) => items.toSorted((a, b) => a.date.localeCompare(b.date) || a.id - b.id);
const monthName = (ym) => mon.format(new Date(ym + '-15T12:00:00+06:00'));

// ===== self-test: core ঠিক আছে কি না, DOM ছাড়াই =====
let pass = 0;
const check = (name, ok) => (ok ? pass++ : console.error('FAIL:', name));
const s1 = addExpense(emptyState, { date: '2026-10-01', category: 'food', amount: 5000, note: '' });
check('পুরোনো state অক্ষত', emptyState.items.length === 0 && s1.items.length === 1);
check('পয়সায় রূপান্তর', toPaisa('19.99') === 1999 && Number.isNaN(toPaisa('  ')));
check('ঋণাত্মক বাতিল', validate({ ...s1.items[0], amount: -500 }) !== null);
check('toString খাত নয়', validate({ ...s1.items[0], category: 'toString' }) !== null);
check('৩০ ফেব্রুয়ারি নেই', validate({ ...s1.items[0], date: '2026-02-30' }) !== null);
console.log(`self-test: ${pass}/5 পাস`);

// ===== thin UI shell: DOM শুধু এখানে =====
let state = emptyState;
const past = [];                                  // undo stack — আগের state-গুলো
const $ = (sel) => document.querySelector(sel);
function commit(next) { past.push(state); state = next; render(); }
function tryAdd(e) {
  const error = validate(e);
  $('#msg').textContent = error ?? '';
  if (!error) commit(addExpense(state, e));
  return error;
}
function render() {
  const cat = $('#filter').value;
  const shown = sortedByDate(state.items).filter((e) => cat === 'all' || e.category === cat);
  $('#list').textContent = '';
  for (const e of shown) {
    const li = document.createElement('li');
    li.textContent = `${e.date} · ${CATS[e.category]} · ${money(e.amount)} · ${e.note}`;
    $('#list').append(li);
  }
  $('#sum').textContent = `মোট ${money(total(shown))} (${shown.length}টি)`;
  $('#json').textContent = JSON.stringify(state.items, null, 2);
}
$('#f').addEventListener('submit', (ev) => {
  ev.preventDefault();                            // পাতা reload হতে দেব না
  tryAdd({ date: $('#date').value, category: $('#cat').value,
           amount: toPaisa($('#amount').value), note: $('#note').value.trim() });
});
$('#undo').addEventListener('click', () => { if (past.length) { state = past.pop(); render(); } });
$('#filter').addEventListener('change', render);

// ===== scripted demo: নির্দিষ্ট তারিখ, তাই আউটপুট সবসময় একই =====
[['2026-09-28', 'food', '250', 'দুপুরের খাবার'], ['2026-10-02', 'transport', '60', 'রিকশা'],
 ['2026-10-01', 'bills', '1200.50', 'ইন্টারনেট'], ['2026-10-05', 'food', '85.50', 'চা-শিঙাড়া'],
 ['2026-10-03', 'transport', '120', 'মেট্রো রেল'],
].forEach(([date, category, amt, note]) => tryAdd({ date, category, amount: toPaisa(amt), note }));
console.log('বাতিল:', tryAdd({ date: '2026-10-06', category: 'food', amount: toPaisa('-40'), note: '' }));
const report = (label) => console.log(label, state.items.length + 'টি, মোট', money(total(state.items)));
report('খাতায়:');
const sorted = sortedByDate(state.items);
console.log([...byCategory(sorted)].map(([c, p]) => `${CATS[c]} ${money(p)}`).join(', '));
console.log([...byMonth(sorted)].map(([m, p]) => `${monthName(m)}: ${money(p)}`).join(' | '));
$('#undo').click();                               // বোতাম চাপার মতোই
report('undo-র পর:');

কোডটি পড়ার সময় চারটি অংশ চিনে নিন — প্রতিটির শুরুতে // ===== মন্তব্য আছে। Pure core অংশে একটিও document নেই। Self-test শুধু core-কে ডাকে। Thin UI shell-এ হিসাবের কোনো নিয়ম নেই — শুধু পড়া, ডাকা, আঁকা। আর scripted demo সেই একই tryAdd ডাকে, যা ফর্ম জমা দিলে ডাকা হয়; অর্থাৎ ডেমো আর আসল ব্যবহার একই পথে চলে।

৮ · হাতে টেস্ট — edge case-এর টেবিল

Self-test পাঁচটি দাবি প্রমাণ করে, কিন্তু ব্যবহারকারীর কল্পনা তার চেয়ে অনেক বড়। পেশাদার ডেভেলপাররা অ্যাপ হাতে দেওয়ার আগে edge case-এর একটি তালিকা ধরে নিজে চেষ্টা করেন — সীমানার মান, খালি মান, অদ্ভুত মান। ওপরের অ্যাপে প্রতিটি সারি নিজে চালিয়ে দেখুন:

শেষ দিকের একটি সারি নিয়ে ভাবুন: ফিল্টার করা অবস্থায় যোগ করা খরচ তালিকায় দেখা যায় না। এটি বাগ, নাকি ঠিক আচরণ? কোড যা করার কথা তা-ই করছে, কিন্তু ব্যবহারকারী বিভ্রান্ত হতে পারেন — “আমার খরচ কোথায় গেল?” এমন প্রশ্নের উত্তর কোডে নেই, আছে চাহিদায়। সমাধান হতে পারে যোগ করার পর ফিল্টার “সব”-এ ফেরানো, বা একটি ছোট বার্তা দেখানো। Edge case-এর টেবিল শুধু বাগ ধরে না, নকশার অস্পষ্টতাও খুঁজে বের করে।

৯ · নিজের কম্পিউটারে চালানো আর পরের ধাপ

পাতার ভেতরের runner শেখার জন্য চমৎকার, কিন্তু আসল প্রজেক্ট থাকে আপনার কম্পিউটারে, নিজের ফোল্ডারে। পর্ব ০৩-এ VS Code বসিয়েছেন; এবার একটি ফোল্ডার hisab-khata বানিয়ে দুটি ফাইল রাখুন:

<!doctype html>
<html lang="bn">
<head>
  <meta charset="utf-8">
  <title>হিসাব খাতা</title>
  <script src="script.js" defer></script>
</head>
<body>
  <!-- এখানে পর্ব ২১-এর ফর্ম, #msg, #tools, #list আর details অংশটি -->
</body>
</html>

• script.js: ওপরের পুরো কোডটি কপি করে রাখুন। defer থাকায় script চলবে HTML পুরো পড়া শেষ হওয়ার পর — তাই querySelector element খুঁজে পাবে (পর্ব ০৪)। চাইলে demo অংশটি মুছে দিন, তাহলে খাতা খালি শুরু হবে।
• সবচেয়ে সহজ পথ: index.html-এ ডাবল-ক্লিক করে ব্রাউজারে খুলুন। এই অ্যাপে কোনো fetch বা module নেই, তাই file:// থেকেও চলে।
• ভালো পথ — Live Server: VS Code-এর Extensions থেকে “Live Server” বসিয়ে index.html-এ ডান-ক্লিক → “Open with Live Server”. পাতা খোলে http://127.0.0.1:5500-এর মতো একটি ঠিকানায়, আর ফাইল সেভ করলেই নিজে থেকে reload হয়। পরে module আর fetch ব্যবহার করলে এমন একটি local server লাগবেই।
• Console খোলা রাখুন (F12): self-test-এর ফল, আর কোনো ভুল হলে লাল বার্তা সেখানেই দেখবেন। নিজের কম্পিউটারে state সরাসরি console-এ লিখে দেখতে পারবেন — শেখার জন্য খুব কাজের।

বাড়ানোর ধারণা — কোন পর্ব কোন দরজা খুলবে

১০ · AI-এর যুগে — AI-কে pair programmer বানান, লেখক নয়

“একটি expense tracker বানিয়ে দাও” — যেকোনো AI এক মিনিটে দুইশো লাইনের একটি অ্যাপ দেবে, আর সেটি হয়তো চলবেও। কিন্তু তাতে আপনি কী শিখলেন? আর কোডটি ঠিক কি না, বুঝবেন কীভাবে? AI-এর দেওয়া পুরো অ্যাপে সাধারণত দেখা যায়: টাকা দশমিকে, innerHTML-এ ব্যবহারকারীর লেখা, sort দিয়ে state বদলানো, DOM আর হিসাব একই ফাংশনে মেশানো — এবং কোনো টেস্ট নেই।

ভালো পথ হলো pair programming-এর ঢঙে কাজ করা: চালকের আসনে আপনি, AI পাশে বসে রিভিউ করে। নিজে নকশা করুন, নিজে core লিখুন, তারপর AI-কে শুধু pure function দেখিয়ে রিভিউ আর edge case চান। ছোট, DOM-মুক্ত কোড AI খুব ভালো রিভিউ করে — আর তার প্রতিটি দাবি আপনি self-test-এ এক লাইনে যাচাই করতে পারেন।

AI-এর রিভিউ হাতে পেলে — যাচাইয়ের চেকলিস্ট

• AI-এর দেখানো প্রতিটি “ভুল ইনপুট” নিজে self-test-এ যোগ করে চালিয়েছি — সত্যিই ভুল ফল আসে কি না দেখেছি
• AI যে পরিবর্তন সুপারিশ করেছে, তাতে pure core-এ document, push, sort বা বাইরের ভ্যারিয়েবল বদলানো ঢোকেনি
• টাকা এখনো integer পয়সায়; কোথাও toFixed বা দশমিক টাকা দিয়ে হিসাব আসেনি
• ব্যবহারকারীর লেখা এখনো শুধু textContent-এ বসছে, innerHTML-এ নয়
• AI যে API বা method-এর কথা বলেছে (যেমন Object.groupBy), সেটি আমার ব্রাউজার আর Node সংস্করণে আছে কি না যাচাই করেছি
• সব পরিবর্তনের পরও edge case-এর টেবিলের প্রতিটি সারি হাতে চালিয়ে আগের মতো ফল পেয়েছি