Learn JavaScript — Master Index

Roadmap • Practice • Quizzes • Mini-projects • Embedded Editor
Progress: 0/0

Embedded JavaScript Editor

Paste code here and run. If the iframe ever blocks, use “Open Editor ↗”.

// Competitive-style starter function solve(input){ input = input.trim(); // TODO: parse input and compute return input; // replace } // Example runner (optional) const fs = (typeof require !== "undefined") ? require("fs") : null; const input = fs ? fs.readFileSync(0, "utf8") : ""; if (input) console.log(String(solve(input)));
Use this template when you’re solving input/output style problems (Problem Mode).
// DOM starter (use this in a normal web page) // Example: button click counter document.body.innerHTML = `

Click Counter

0

`; let c = 0; document.querySelector("#btn").addEventListener("click", () => { c++; document.querySelector("#out").textContent = c; });
Use this to practice events and DOM manipulation quickly.
Mini Quizzes (self-check)
Mini Projects (build + show)
  • Project 1: To-do app (add/delete/complete, store in localStorage)
  • Project 2: Weather dashboard (fetch API, render cards, loading/error states)
  • Project 3: Quiz app (MCQ + timer + score + review answers)
  • Project 4: Expense tracker (income/expense, totals, charts later)
  • Project 5: DOM game (Whack-a-mole / memory game / typing speed test)
Rule: Every project must have:
  • Clean UI + responsive layout
  • Data saved (localStorage) OR fetched from API
  • Shareable output (screenshot + hosted link)
Best practice habits
  • Always write small tests: “input → expected output”.
  • Prefer const, use let when reassignment is needed.
  • Use === instead of == (avoid coercion surprises).
  • Learn array methods: map, filter, reduce.
  • For async: always handle errors (try/catch or .catch).
Copied!