CodeYantra
BUILD WITH ME · SEASON 2 · DAY 3 / 7

Stopwatch

Season 2 ka teesra project: ek stopwatch — Start/Stop, Lap aur Reset ke saath. Isse tum seekhoge ki setInterval se baar-baar kaam kaise chalta hai, aur milliseconds ko 00:00.00 me kaise badalte hain. Stop dabake dobara Start karoge to time wahin se aage badhega!

⏱ 35 min🎯 Beginner → JS timing🛠 setInterval, time format, start / stop
  • setInterval / clearInterval — har 10 ms par kaam chalana aur rokna
  • Date.now() — asli time se ginti (sirf counter badhane se time galat hota hai)
  • ms ko minute / second / centisecond me todna: Math.floor aur %
  • padStart(2, '0') — 5 ko "05" banana
  • Ek hi button se toggle (Start ↔ Stop) aur prepend se list me upar jodna
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. ✍️

1Stopwatch ka HTMLindex.html

  • #time me 00:00.00 dikhega — minute : second . centisecond.
  • Teen buttons: Start, Lap, Reset. Start button hi Stop ban jayega, JS se text badlega.
  • <ol reversed> — numbered list jo ulti ginti me chalti hai, taaki sabse naya lap upar aur sabse bada number ho.
  <div class="watch">
    <div id="time">00:00.00</div>
    <div class="btns">
      <button id="start">Start</button>
      <button id="lap">Lap</button>
      <button id="reset">Reset</button>
    </div>
    <ol id="laps" reversed></ol>
  </div>

2Dark cardstyle.css

  • Pichle days wali wahi trick: display: grid + place-items: center.
  • text-align: center — time aur buttons beech me.
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #0f172a;
  font-family: sans-serif;
}
.watch {
  width: 300px;
  padding: 24px;
  background: #1e293b;
  border-radius: 24px;
  text-align: center;
}

3Time + buttons + rangstyle.css

  • font: 46px monospace — monospace me har digit barabar chaudai ka hota hai, isliye time hilta nahi.
  • .btns { display: flex } aur flex: 1 — teeno buttons barabar chaude.
  • Start green, Lap indigo, Reset red — #id se alag rang.
#time {
  padding: 20px 0;
  color: #fff;
  font: 46px monospace;
}
.btns { display: flex; gap: 8px; }
button {
  flex: 1;
  padding: 12px 0;
  border: 0;
  border-radius: 12px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
#start { background: #22c55e; }
#lap { background: #6366f1; }
#reset { background: #ef4444; }

4Lap liststyle.css

  • max-height: 150px + overflow: auto — zyada laps ho jayein to list scroll hogi, card badhega nahi.
  • Har li par neeche halki line.
#laps {
  max-height: 150px;
  margin: 16px 0 0;
  padding-left: 28px;
  overflow: auto;
  color: #cbd5e1;
  text-align: left;
}
#laps li { padding: 6px 0; border-bottom: 1px solid #334155; }

5Elements + statescript.js

  • Pehle 5 elements pakad lo — baar-baar querySelector nahi likhna padega.
  • elapsed = ab tak kitne ms ginti hui. startedAt = jab start dabaya. timer = interval ka id (null = ruka hua).
const timeEl = document.querySelector('#time');
const startBtn = document.querySelector('#start');
const lapBtn = document.querySelector('#lap');
const resetBtn = document.querySelector('#reset');
const laps = document.querySelector('#laps');

let elapsed = 0;
let startedAt = 0;
let timer = null;

6format() — ms se 00:00.00script.js

  • two(n) — padStart(2, '0') se 7 ko "07".
  • 1 minute = 60000 ms, 1 second = 1000 ms, 1 centisecond = 10 ms. % 60 aur % 100 se sirf bacha hua hissa lete hain.
  • tick(): abhi ka time minus shuru ka time = elapsed. Phir screen par dikhao.
function two(n) {
  return String(n).padStart(2, '0');
}

function format(ms) {
  const m = Math.floor(ms / 60000);
  const s = Math.floor(ms / 1000) % 60;
  const cs = Math.floor(ms / 10) % 100;
  return `${two(m)}:${two(s)}.${two(cs)}`;
}

function tick() {
  elapsed = Date.now() - startedAt;
  timeEl.textContent = format(elapsed);
}

7toggle() — Start / Stopscript.js

  • Agar timer chal raha hai to rok do (clearInterval) aur button ko Start karo.
  • Warna startedAt = Date.now() - elapsed — itna peeche ka shuru maano ki purana time bacha rahe. Isse Stop ke baad Start karne par time wahin se aage badhta hai.
  • setInterval(tick, 10) — har 10 ms par tick chalao.
function toggle() {
  if (timer) {
    clearInterval(timer);
    timer = null;
    startBtn.textContent = 'Start';
  } else {
    startedAt = Date.now() - elapsed;
    timer = setInterval(tick, 10);
    startBtn.textContent = 'Stop';
  }
}

8lap() aur reset()script.js

  • lap(): sirf chalte stopwatch par. Naya li banao aur prepend se list ke upar lagao.
  • reset(): interval roko, sab zero karo, button ko Start karo aur laps ki list saaf.
function lap() {
  if (!timer) return;
  const li = document.createElement('li');
  li.textContent = format(elapsed);
  laps.prepend(li);
}

function reset() {
  clearInterval(timer);
  timer = null;
  elapsed = 0;
  timeEl.textContent = format(0);
  startBtn.textContent = 'Start';
  laps.innerHTML = '';
}

9Buttons jodnascript.js

  • Teen buttons, teen addEventListener — har ek apna function chalata hai.
startBtn.addEventListener('click', toggle);
lapBtn.addEventListener('click', lap);
resetBtn.addEventListener('click', reset);

Tumhara editor 💻

code isi device par save hota hai

Ab ise apna banao 🎨

Atak gaye? Notes padho 📚

HTML NotesCSS NotesJavaScript Notes

Aage kya?

DAY 1
Calculator
Grid layout, state, event delegation
Live ✓
DAY 2
Tic-Tac-Toe
Arrays, win logic, game state
Live ✓
DAY 4
Notes App
Textarea, localStorage, search
Live ✓
DAY 5
Expense Tracker
Forms, totals, array methods
Live ✓
DAY 6
Memory Game
Shuffle, timers, flip logic
Live ✓
DAY 7
Landing Page
Season 2 ke skills ek page me
Live ✓

Naya day aate hi reel aayegi — @codeyantra follow karo 🔔