BUILD WITH ME · SEASON 2 · DAY 1 / 7

Calculator

Season 2 ka pehla project: ek working calculator — add, minus, multiply, divide, clear aur backspace. Isme tum seekhoge ki ek state (cur, prev, op) se poora app kaise chalta hai, aur ek hi click listener 18 buttons kaise sambhalta hai.

⏱ 30 min🎯 Beginner → JS logic🛠 Grid layout, state, event delegation

display: grid + repeat(4, 1fr) — keypad ka layout
grid-column: span 2 — C aur 0 key ko double chaudai
State variables: cur, prev, op — calculator ki memory
Object ko lookup table banana: calc['+'](a, b)
Event delegation — ek listener, 18 buttons, e.target

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

1Calculator ka HTMLindex.html

Ek #screen div (jahan number dikhega) aur ek .keys div jisme saare 18 buttons hain.
Operators par class op, C par clr, = par eq, aur 0 / C par wide — inhi se CSS rang aur size dega.
Buttons ka text hi unki pehchan hai — JS baad me textContent padhega.

  <div class="calc">
    <div id="screen">0</div>
    <div class="keys">
      <button class="clr wide">C</button>
      <button class="op">⌫</button>
      <button class="op">÷</button>
      <button>7</button><button>8</button><button>9</button>
      <button class="op">×</button>
      <button>4</button><button>5</button><button>6</button>
      <button class="op">−</button>
      <button>1</button><button>2</button><button>3</button>
      <button class="op">+</button>
      <button class="wide">0</button><button>.</button>
      <button class="eq">=</button>
    </div>
  </div>

2Dark cardstyle.css

Wahi Day 1 wali trick: display: grid + place-items: center se card beech me.
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;
}
.calc {
  width: 300px;
  padding: 20px;
  background: #1e293b;
  border-radius: 24px;
}

3Screen + keys gridstyle.css

text-align: right — calculator me number hamesha right se.
grid-template-columns: repeat(4, 1fr) — 4 barabar columns, ek line me.
gap: 10px — keys ke beech ki jagah.

#screen {
  padding: 16px 12px;
  color: #fff;
  font-size: 36px;
  text-align: right;
  overflow: hidden;
}
.keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

4Button coloursstyle.css

Pehle sab buttons ka common style, phir .op, .clr, .eq se rang badle.
.wide { grid-column: span 2 } — ye key do column leti hai, isliye 0 aur C chaude hain.

button {
  padding: 14px 0;
  border: 0;
  border-radius: 14px;
  background: #334155;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
.op { background: #6366f1; }
.clr { background: #ef4444; }
.eq { background: #ec4899; }
.wide { grid-column: span 2; }

5State + calc objectscript.js

cur = jo number abhi type ho raha hai (text), prev = pehla number, op = chuna hua operator.
fresh = true matlab "agla digit naya number shuru karega".
calc object: har operator ke saath ek chhota function. calc['×'](3, 4) → 12. Isse lambe if/else se bachte hain.

const screen = document.querySelector('#screen');
let cur = '0';
let prev = null;
let op = null;
let fresh = false;

const calc = {
  '+': (a, b) => a + b,
  '−': (a, b) => a - b,
  '×': (a, b) => a * b,
  '÷': (a, b) => a / b,
};

6show() aur compute()script.js

show() screen par dikhata hai: operator ho to 12 + 9, nahi to sirf number.
compute() sahi function dhundta hai aur prev aur cur par chalata hai.
toFixed(8) se 0.1 + 0.2 jaise lambe decimals kat jaate hain.
isFinite — 0 se divide par Infinity aata hai, use screen par nahi dikhana.

function show() {
  screen.textContent =
    op ? `${prev} ${op} ${fresh ? '' : cur}` : cur;
}

function compute() {
  const r = calc[op](prev, Number(cur));
  cur = isFinite(r) ? String(+r.toFixed(8)) : '0';
  prev = null;
  op = null;
}

7press() — poora dimaagscript.js

Digit: cur me jodo (ya agar sirf "0" ya fresh ho to replace karo).
.: sirf ek baar. C: sab reset. ⌫: aakhri character hatao.
=: calculate karo. Operator: pehle chal rahe calculation ko pura karo (isliye 12 + 9 × 2 chain hota hai), phir naya operator yaad rakho.
Har baar aakhir me show() — rule: state badlo → show().

function press(k) {
  if ('0123456789'.includes(k)) {
    cur = cur === '0' || fresh ? k : cur + k;
    fresh = false;
  } else if (k === '.') {
    if (fresh) { cur = '0'; fresh = false; }
    if (!cur.includes('.')) cur += '.';
  } else if (k === 'C') {
    cur = '0'; prev = null; op = null; fresh = false;
  } else if (k === '⌫') {
    if (!fresh) cur = cur.length > 1 ? cur.slice(0, -1) : '0';
  } else if (k === '=') {
    if (op && !fresh) compute();
    fresh = true;
  } else {
    if (op && !fresh) compute();
    prev = Number(cur);
    op = k;
    fresh = true;
  }
  show();
}

8Keys ka clickscript.js

18 buttons par 18 listeners nahi — sirf ek listener .keys par.
Click kisi bhi button par ho, e.target wahi button hai. tagName check karke gap par click ignore.
Ye pattern event delegation kehlata hai — todo list, table, menu sab me kaam aata hai.

const keys = document.querySelector('.keys');
keys.addEventListener('click', (e) => {
  if (e.target.tagName === 'BUTTON') {
    press(e.target.textContent);
  }
});

Tumhara editor 💻

Code editor

code isi device par save hota hai

Ab ise apna banao 🎨

Screen aur keys ke rang apne favourite theme ke karo
% key banao jo number ko 100 se divide kare
0 se divide par screen par "Error" dikhao
Keyboard support: document.addEventListener('keydown', ...) se 0-9 aur + − × ÷ chalao
Bonus ⭐: peeche ki calculation ka history list banao