8️⃣ JavaScript Events

JavaScript events allow you to make your website interactive.An event happens when a user does something like clicking, typing, or submitting a form. 👉 Example: 🖱️ 1. Mouse Events These events happen when the user uses the mouse. Common Mouse Events: Example: ⌨️ 2. Keyboard Events These events happen when user types on keyboard. Common […]

🟢 Beginner Level (1–10) 🟡 Intermediate Level (11–20) 🔵 Advanced Level (21–30) 🔥 Bonus Challenge (Real-world) 👉 Build a mini app combining multiple DOM concepts: 💡 Tip (Very Important) 👉 First 10 → Basics👉 Next 10 → Logic building👉 Last 10 → Real-world projects

🧠 What is DOM? DOM = Document Object Model 👉 When a webpage loads, the browser converts HTML into a tree structure (objects). Example HTML: DOM representation: Document └── h1 (id=”title”) └── “Hello” 👉 JavaScript can access and modify this structure. 🎯 Selecting Elements To change anything on a page, first you must select it. […]

🔹 What is an Object? An object is a collection of data stored in key-value pairs. 👉 Real-life example:A student has name, age, marks → all grouped together. 🔹 Object Properties Properties are variables inside an object. 👉 Two ways to access: 🔹 Object Methods Methods are functions inside an object. 👉 this refers to […]

🟢 Basic Level (1–15) 🟡 Intermediate Level (16–30) 🟠 Advanced Level (31–50) 🎯 Bonus Challenge

📌 What is an Array? An array is a collection of values stored in a single variable. 🛠️ Creating Arrays 1. Using [] 2. Using Array constructor 🎯 Accessing Elements 👉 Index starts from 0 ⚙️ Basic Array Methods ➕ push() → Add at end ➖ pop() → Remove from end ⬅️ shift() → Remove […]

🔹 Basic Level (1–7) 🔹 Intermediate Level (8–14) 🔹 Advanced Level (15–20) 🚀 for students 👉 Combine everything: Mini project using functions (calculator app)

🔹 What is a Function? A function is a block of code that performs a specific task and can be reused. 👉 Instead of writing code again and again, you call a function. 🔹 Function Declaration Defined using the function keyword. ✔️ Can be called before declaration (hoisting) 🔹 Function Expression Function stored inside a […]

🟢 Beginner Level Projects 1. 🎯 Number Guessing Game 👉 User guesses a number between 1–10 Concepts: Extra ideas: 2. 🔢 Multiplication Table Generator 👉 User enters a number → show table Concepts: 3. 🧮 Simple Calculator 👉 Perform +, −, ×, ÷ Concepts: Bonus: 4. 🔐 Even/Odd Checker Tool 👉 Input number → show […]

🔹 🟢 Easy Level (1–10) 🔹 🟡 Medium Level (11–20) *************** 🔹 🔴 Hard Level (21–30) 112123123412345 *************** 🎯 Bonus Challenge (for smart students) 👉 FizzBuzz (very popular interview question)