JavaScript Projects | Code with Ashu

← Home

Lesson plan

Variables aur Data Types

let, const, aur JavaScript ke basic data types.

let naam = "Ashu"; const umar = 21;

Functions

Reusable code blocks banana aur unhe call karna.

function greet(naam) { return `Namaste, ${naam}`; }

DOM Selection

HTML elements ko JavaScript se select aur modify karna.

document.querySelector('.btn') .textContent = "Clicked!";

Events

Click, input, aur other user actions ko handle karna.

button.addEventListener('click', () => { alert('Hello!'); });

Mini Project: To-do List

Variables, DOM aur events ko combine karke ek chhota interactive app banana.

function addTask(task) { list.innerHTML += `<li>${task}</li>`; }

Conditionals aur Loops

if/else se decisions lena, for/while se repeat karna.

for (let i = 0; i < 5; i++) { console.log(i); }

Arrays aur Objects

Multiple values store karna aur unhe map, filter jaise methods se process karna.

const students = ["Ravi", "Anu"]; students.map(s => s.toUpperCase());

Async JavaScript — Fetch API

Server se data laana bina page reload kiye, async/await ke saath.

async function getData() { const res = await fetch('/api/data'); return res.json(); }

LocalStorage

Browser me data save karna jo page reload ke baad bhi rahe.

localStorage.setItem('theme', 'dark'); localStorage.getItem('theme');

Mini Project: Calculator

Sab concepts ko jodkar ek functional calculator app banana — buttons, events, aur logic.

function add(a, b) { return a + b; } display.textContent = add(4, 5);

Advanced Topics

Closures

Ek function apne bahar ke variables ko "yaad" rakhta hai — state banane ka powerful tarika.

function counter() { let count = 0; return () => ++count; } const inc = counter(); inc(); inc(); // 2

Higher-Order Functions

Functions jo dusre functions ko argument ya return value ki tarah lete hain.

[1,2,3].map(n => n * 2); [1,2,3].filter(n => n > 1); [1,2,3].reduce((a,b) => a+b, 0);

Classes aur OOP

Blueprint bana kar multiple similar objects create karna.

class Student { constructor(naam) { this.naam = naam; } greet() { return `Hi, ${this.naam}`; } } new Student("Ravi").greet();

Error Handling

try/catch se code ko crash hone se bachana.

try { JSON.parse("invalid"); } catch (err) { console.log("Kuch galat hua"); }

Event Delegation

Parent element pe ek hi listener lagakar sab child clicks handle karna — performance ke liye better.

list.addEventListener('click', (e) => { if (e.target.tagName === 'LI') { e.target.remove(); } });

Project 1

To-Do List App

DOM, events aur arrays — sab ek saath. Right side me type karke Enter dabayein aur task list me add hoga.

index.html

<input id="task" placeholder="Naya task likhein">
<ul id="list"></ul>

script.js

const input = document.getElementById('task');
const list = document.getElementById('list');

input.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && input.value.trim()) {
    const li = document.createElement('li');
    li.textContent = input.value;
    li.addEventListener('click', () => li.remove());
    list.appendChild(li);
    input.value = '';
  }
});

Live output — Enter dabayein, task pe click karke remove karein

Project 2

Simple Calculator

Functions, events aur DOM update — ek chhota calculator jo actually kaam karta hai.

index.html

<input id="a" type="number">
<input id="b" type="number">
<button onclick="calc('+')">+</button>
<button onclick="calc('-')">−</button>
<h2 id="result">0</h2>

script.js

function calc(op) {
  const a = Number(document.getElementById('a').value);
  const b = Number(document.getElementById('b').value);
  const result = op === '+' ? a + b : a - b;
  document.getElementById('result').textContent = result;
}

Live output — numbers daalkar + ya − dabayein