├── G. DOM
    ├── DOM.txt
    ├── DOM-English.md
    ├── Method.md
    ├── Dom-Event-English.md
    ├── Dom-Event-Bangla.md
    └── DOM-Bangla.md
├── 0. Introduction
    ├── script.js
    ├── JS-Intro-English.md
    └── JS-Intro-Bangla.md
├── F. Function
    ├── Method.md
    ├── Function-Bangla.md
    ├── date-time.md
    ├── Math.md
    └── Function-English.md
├── H. ES6
    ├── JSON.md
    ├── Array-Method.md
    ├── Bangla-ES6-Keywards.md
    ├── Object-Method.md
    ├── API.md
    ├── English-ES6-Keywards.md
    └── Keys-ASCII-Code.md
├── C. Array
    ├── Array-English.md
    └── Array-Bangla.md
├── Interview-Question
    └── Github-Question.md
├── D. Loop
    ├── Loop-English.md
    └── Loop-Bangla.md
├── B. Condition
    ├── Condition-English.md
    └── Condition-Bangla.md
├── A. Operator
    ├── Operator-English.md
    └── Operator-Bangla.md
└── E. Object
    ├── Object-English.md
    └── Object-Bangla.md


/G. DOM/DOM.txt:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/0. Introduction/script.js:
--------------------------------------------------------------------------------
 1 | // Variable 
 2 | var elements = 'Oxygen';
 3 | let person = 'A Great Man';
 4 | const number = 200;
 5 | 
 6 | // Condition
 7 | let age = 22;
 8 | if (age >= 20) {
 9 |     console.log('I will Get married');
10 | }
11 | else {
12 |     console.log('You Are Not Adult');
13 | }
14 | 
15 | // Array 
16 | 
17 | let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
18 | 
19 | // Loop 
20 | for (let day = 1; day <= 60; day++) {
21 |     console.log('I will invest at least 6 hrs every single day for next 60 days!', day);
22 | }
23 | 
24 | // Object 
25 | const mobile = {
26 |     brand: 'Samsung',
27 |     name: 'S20',
28 |     color: 'Blue',
29 |     isNew: true,
30 |     price: '50K'
31 | }
32 | 
33 | // function 
34 | function sum(x, y) {
35 |     addition = x + y;
36 |     subtraction = x - y;
37 |     multiplication = x * y;
38 |     division = x / y;
39 |     modulus = x % y;
40 |     const results = ` Addition: ${addition} subtraction: ${subtraction} multiplication: ${multiplication} division: ${division} modulus:${modulus}`;
41 |     return results;
42 | }
43 | // const number = (50, 30);
44 | const result = sum(5, 3)
45 | console.log(result);
46 | 
47 | // Dom Document Object Model
48 | document.getElementById('btn').addEventListener('click', function () {
49 |     document.body.style.backgroundColor = 'blue';
50 | })
51 | document.getElementById('btn').addEventListener('mouseover', function () {
52 |     document.body.style.backgroundColor = 'red'
53 | });
54 | 


--------------------------------------------------------------------------------
/F. Function/Method.md:
--------------------------------------------------------------------------------
  1 | # 🚀 **JavaScript Function Methods: Full Guide with Examples**  
  2 | 
  3 | JavaScript-এ **Function** হল **reusable code blocks** যা নির্দিষ্ট কাজ সম্পন্ন করতে ব্যবহার করা হয়। ফাংশনের মধ্যে **methods** ব্যবহার করে আমরা ফাংশন সম্পর্কে তথ্য পেতে এবং কাস্টমাইজ করতে পারি।  
  4 | 
  5 | ---
  6 | 
  7 | ## **📌 ১. Function Methods Overview**  
  8 | 
  9 | | Method | Description |
 10 | |--------|------------|
 11 | | `call()` | অন্য অবজেক্টের সাথে ফাংশন কল করে |
 12 | | `apply()` | `call()` এর মতোই, কিন্তু arguments array হিসাবে নেয় |
 13 | | `bind()` | ফাংশনের `this` সেট করে এবং নতুন ফাংশন তৈরি করে |
 14 | | `toString()` | ফাংশনের সোর্স কোড স্ট্রিং আকারে ফেরত দেয় |
 15 | | `length` | ফাংশনের প্যারামিটার সংখ্যা দেখায় |
 16 | | `name` | ফাংশনের নাম ফেরত দেয় |
 17 | 
 18 | ---
 19 | 
 20 | ## **📌 ২. `call()` Method**  
 21 | 🔹 **একটি ফাংশনকে অন্য অবজেক্টের সাথে ব্যবহার করা যায়**  
 22 | 
 23 | ```js
 24 | function greet() {
 25 |     console.log(`Hello, my name is ${this.name}`);
 26 | }
 27 | 
 28 | const person = { name: "Shihab" };
 29 | 
 30 | greet.call(person);
 31 | ```
 32 | **✅ Output:**  
 33 | ```
 34 | Hello, my name is Shihab
 35 | ```
 36 | 
 37 | ✔ **Explanation:** `call()` এর মাধ্যমে `greet` ফাংশনের `this` কে `person` অবজেক্টের সাথে যুক্ত করেছি।
 38 | 
 39 | ---
 40 | 
 41 | ## **📌 ৩. `apply()` Method**  
 42 | 🔹 **`call()` এর মতোই, কিন্তু arguments array হিসাবে নেয়**  
 43 | 
 44 | ```js
 45 | function introduce(age, city) {
 46 |     console.log(`My name is ${this.name}, I am ${age} years old from ${city}`);
 47 | }
 48 | 
 49 | const user = { name: "Shihab" };
 50 | 
 51 | introduce.apply(user, [25, "Dhaka"]);
 52 | ```
 53 | **✅ Output:**  
 54 | ```
 55 | My name is Shihab, I am 25 years old from Dhaka
 56 | ```
 57 | 
 58 | ✔ **Difference from `call()`** → `apply()` এর ক্ষেত্রে arguments **array আকারে** দেওয়া হয়।
 59 | 
 60 | ---
 61 | 
 62 | ## **📌 ৪. `bind()` Method**  
 63 | 🔹 **একটি ফাংশনের `this` সেট করে নতুন ফাংশন তৈরি করে**  
 64 | 
 65 | ```js
 66 | function sayHi() {
 67 |     console.log(`Hi, ${this.name}`);
 68 | }
 69 | 
 70 | const person = { name: "Shihab" };
 71 | 
 72 | const boundFunction = sayHi.bind(person);
 73 | boundFunction();
 74 | ```
 75 | **✅ Output:**  
 76 | ```
 77 | Hi, Shihab
 78 | ```
 79 | 
 80 | ✔ **Explanation:** `bind()` ফাংশনকে **নতুন ফাংশনে রূপান্তর করে এবং `this` সেট করে**।
 81 | 
 82 | ---
 83 | 
 84 | ## **📌 ৫. `toString()` Method**  
 85 | 🔹 **ফাংশনের সোর্স কোড স্ট্রিং আকারে দেখায়**  
 86 | 
 87 | ```js
 88 | function example() {
 89 |     return "Hello World";
 90 | }
 91 | 
 92 | console.log(example.toString());
 93 | ```
 94 | **✅ Output:**  
 95 | ```
 96 | function example() {
 97 |     return "Hello World";
 98 | }
 99 | ```
100 | 
101 | ✔ **Explanation:** `toString()` ব্যবহার করে **ফাংশনের সোর্স কোড** প্রিন্ট করা যায়।
102 | 
103 | ---
104 | 
105 | ## **📌 ৬. `length` Property**  
106 | 🔹 **ফাংশনে কয়টি প্যারামিটার আছে তা দেখায়**  
107 | 
108 | ```js
109 | function sum(a, b, c) {
110 |     return a + b + c;
111 | }
112 | 
113 | console.log(sum.length);
114 | ```
115 | **✅ Output:**  
116 | ```
117 | 3
118 | ```
119 | 
120 | ✔ **Explanation:** `sum.length` → **৩টি প্যারামিটার আছে** তাই `3` রিটার্ন করবে।
121 | 
122 | ---
123 | 
124 | ## **📌 ৭. `name` Property**  
125 | 🔹 **ফাংশনের নাম বের করা যায়**  
126 | 
127 | ```js
128 | function multiply(x, y) {
129 |     return x * y;
130 | }
131 | 
132 | console.log(multiply.name);
133 | ```
134 | **✅ Output:**  
135 | ```
136 | multiply
137 | ```
138 | 
139 | ✔ **Explanation:** `name` প্রপার্টি **ফাংশনের নাম** রিটার্ন করে।
140 | 
141 | ---
142 | 
143 | ## **📌 ৮. Function Methods Use Cases (প্রয়োগ)**  
144 | 
145 | ✅ **`call()` ও `apply()`** ব্যবহার করা হয় **অন্য অবজেক্টের সাথে ফাংশন ব্যবহার করতে**।  
146 | ✅ **`bind()`** ব্যবহার করে **ফাংশনের `this` সেট করা যায়**।  
147 | ✅ **`toString()`** ব্যবহার করে **ফাংশনের সোর্স কোড দেখা যায়**।  
148 | ✅ **`length` ও `name`** ব্যবহার করে **ফাংশনের প্যারামিটার ও নাম জানা যায়**।  
149 | 


--------------------------------------------------------------------------------
/H. ES6/JSON.md:
--------------------------------------------------------------------------------
  1 | ## **🔹 JSON (JavaScript Object Notation) All About**  
  2 | 
  3 | ✅ **JSON (JavaScript Object Notation)** হলো **lightweight data format**, যা **data store & transfer** করতে ব্যবহৃত হয়।  
  4 | ✅ এটি মূলত **text-based format**, যা **JavaScript Object-এর মতো দেখতে**, কিন্তু **stringified**।  
  5 | ✅ এটি **API request/response**, **configuration files**, **database storage** ইত্যাদির জন্য বহুল ব্যবহৃত হয়।  
  6 | 
  7 | ---
  8 | 
  9 | ## **🔹 JSON Syntax (সংগঠন)**
 10 | 👉 JSON-এর মূলত দুইটি structure থাকে:  
 11 | 1️⃣ **Object (`{ key: value }` format)**  
 12 | 2️⃣ **Array (`[ { key: value }, { key: value } ]` format)**  
 13 | 
 14 | **✅ JSON Object Example**
 15 | ```json
 16 | {
 17 |     "name": "John Doe",
 18 |     "age": 25,
 19 |     "isStudent": false,
 20 |     "skills": ["HTML", "CSS", "JavaScript"]
 21 | }
 22 | ```
 23 | 
 24 | **✅ JSON Array Example**
 25 | ```json
 26 | [
 27 |     {
 28 |         "id": 1,
 29 |         "name": "Alice",
 30 |         "age": 22
 31 |     },
 32 |     {
 33 |         "id": 2,
 34 |         "name": "Bob",
 35 |         "age": 30
 36 |     }
 37 | ]
 38 | ```
 39 | 
 40 | ---
 41 | 
 42 | ## **🔹 JSON এর সাথে JavaScript এ কাজ করা**
 43 | JavaScript এ JSON-এর সাথে কাজ করতে **`JSON.stringify()`** এবং **`JSON.parse()`** ব্যবহার করা হয়।
 44 | 
 45 | ### **✅ `JSON.stringify()` (Object → JSON String)**
 46 | 👉 এটি একটি JavaScript Object-কে **JSON format-এর string**-এ রূপান্তর করে।  
 47 | ```js
 48 | const user = { name: "John", age: 25, isStudent: false };
 49 | const jsonString = JSON.stringify(user);
 50 | console.log(jsonString); 
 51 | // Output: '{"name":"John","age":25,"isStudent":false}'
 52 | ```
 53 | ---
 54 | 
 55 | ### **✅ `JSON.parse()` (JSON String → Object)**
 56 | 👉 এটি **JSON format-এর string কে JavaScript Object-এ** রূপান্তর করে।  
 57 | ```js
 58 | const jsonString = '{"name":"John","age":25,"isStudent":false}';
 59 | const user = JSON.parse(jsonString);
 60 | console.log(user.name); // Output: John
 61 | ```
 62 | ---
 63 | 
 64 | ## **🔹 JSON Fetch API ব্যবহার করে Data লোড করা (Arrow Function)**
 65 | 👉 নিচের কোডটি **API থেকে JSON data লোড করার জন্য** `fetch()` ব্যবহার করে।  
 66 | 👉 এখানে **Arrow Function + `async/await`** ব্যবহার করা হয়েছে।  
 67 | 
 68 | ```js
 69 | const fetchUsers = async () => {
 70 |     try {
 71 |         let response = await fetch('https://jsonplaceholder.typicode.com/users');
 72 |         let data = await response.json();
 73 |         console.log(data);
 74 |     } catch (error) {
 75 |         console.error("Error:", error.message);
 76 |     }
 77 | };
 78 | 
 79 | fetchUsers();
 80 | ```
 81 | 👉 এখানে `fetch()` দিয়ে API কল করা হয়েছে, **`await` দিয়ে response-এর জন্য অপেক্ষা করা হয়েছে, এবং `JSON.parse()` ছাড়াই `response.json()` দিয়ে JSON-কে object-এ কনভার্ট করা হয়েছে।**  
 82 | 
 83 | ---
 84 | 
 85 | ## **🔹 JSON Local Storage এ সংরক্ষণ ও পুনরুদ্ধার (Arrow Function)**
 86 | ✅ **JSON data Local Storage-এ save ও retrieve করা যায়।**  
 87 | ```js
 88 | // JSON Data Store (Arrow Function)
 89 | const saveUser = (user) => {
 90 |     localStorage.setItem("user", JSON.stringify(user));
 91 | };
 92 | 
 93 | // JSON Data Retrieve (Arrow Function)
 94 | const getUser = () => {
 95 |     let user = localStorage.getItem("user");
 96 |     return user ? JSON.parse(user) : null;
 97 | };
 98 | 
 99 | // Example Usage
100 | const user = { name: "Alice", age: 28 };
101 | saveUser(user);
102 | 
103 | console.log(getUser()); // Output: { name: "Alice", age: 28 }
104 | ```
105 | 👉 **Local Storage-এ Object রাখার সময় `JSON.stringify()` ব্যবহার করতে হয়।  
106 | 👉 Data রিড করার সময় `JSON.parse()` ব্যবহার করে Object-এ রূপান্তর করতে হয়।**  
107 | 
108 | ---
109 | 
110 | ## **📌 সংক্ষেপে (JSON Summary)**
111 | ✔️ **JSON হল lightweight data format, যা API ও data transfer-এর জন্য ব্যবহৃত হয়।**  
112 | ✔️ **JavaScript-এর জন্য `JSON.stringify()` ও `JSON.parse()` মেইন দুটি মেথড।**  
113 | ✔️ **API থেকে JSON Data লোড করতে `fetch()` ও `response.json()` ব্যবহার করা হয়।**  
114 | ✔️ **Local Storage-এ data সংরক্ষণ ও পুনরুদ্ধারের জন্য JSON ব্যবহার করা হয়।**  
115 | 
116 | ---


--------------------------------------------------------------------------------
/F. Function/Function-Bangla.md:
--------------------------------------------------------------------------------
  1 | # 🚀 **JavaScript Function: A Complete Guide with Real Examples**  
  2 | 
  3 | ## **📌 Function কি?**  
  4 | একটি **Function** হলো কোডের একটি ব্লক যা নির্দিষ্ট কাজ সম্পন্ন করতে বারবার ব্যবহার করা যায়। এটি কোডকে **Reusable** এবং **Modular** করে।  
  5 | 
  6 | ---
  7 | 
  8 | ## **📌 Function লেখার নিয়ম (Syntax)**  
  9 | ```js
 10 | function functionName(parameters) {
 11 |     // Function Body (কোড লিখতে হবে)
 12 |     return result; // (Optional)
 13 | }
 14 | ```
 15 | **🔹 `functionName`** → ফাংশনের নাম  
 16 | **🔹 `parameters`** → ইনপুট হিসেবে নেওয়া ডাটা (Optional)  
 17 | **🔹 `return`** → আউটপুট রিটার্ন করা হয় (Optional)  
 18 | 
 19 | ---
 20 | 
 21 | ## **📌 ১. Simple Function Example (ফাংশন ডিফাইন ও কল করা)**  
 22 | ```js
 23 | function greet() {
 24 |     console.log("Hello, Welcome to JavaScript!");
 25 | }
 26 | greet(); // Function Call
 27 | ```
 28 | **✅ Output:**  
 29 | ```
 30 | Hello, Welcome to JavaScript!
 31 | ```
 32 | 
 33 | ---
 34 | 
 35 | ## **📌 ২. Function with Parameters (Argument নেয়া ফাংশন)**
 36 | ```js
 37 | function add(a, b) {
 38 |     return a + b;
 39 | }
 40 | console.log(add(5, 3)); 
 41 | ```
 42 | **✅ Output:**  
 43 | ```
 44 | 8
 45 | ```
 46 | 
 47 | ---
 48 | 
 49 | ## **📌 ৩. Function with Default Parameter**
 50 | ```js
 51 | function multiply(a, b = 2) { // Default value 2
 52 |     return a * b;
 53 | }
 54 | console.log(multiply(5)); // 5 * 2 = 10
 55 | console.log(multiply(5, 3)); // 5 * 3 = 15
 56 | ```
 57 | **✅ Output:**  
 58 | ```
 59 | 10
 60 | 15
 61 | ```
 62 | 
 63 | ---
 64 | 
 65 | ## **📌 ৪. Function Expression (Anonymous Function)**
 66 | ```js
 67 | const divide = function(a, b) {
 68 |     return a / b;
 69 | };
 70 | console.log(divide(10, 2)); // 5
 71 | ```
 72 | **✅ Output:**  
 73 | ```
 74 | 5
 75 | ```
 76 | 
 77 | ---
 78 | 
 79 | ## **📌 ৫. Arrow Function (ES6)**
 80 | ```js
 81 | const square = (num) => num * num;
 82 | console.log(square(4)); // 16
 83 | ```
 84 | **✅ Output:**  
 85 | ```
 86 | 16
 87 | ```
 88 | 
 89 | ---
 90 | 
 91 | ## **📌 ৬. Immediately Invoked Function Expression (IIFE)**
 92 | ```js
 93 | (function() {
 94 |     console.log("IIFE Executed!");
 95 | })();
 96 | ```
 97 | **✅ Output:**  
 98 | ```
 99 | IIFE Executed!
100 | ```
101 | 
102 | ---
103 | 
104 | ## **📌 ৭. Function with Rest Parameters**
105 | ```js
106 | function sum(...numbers) {
107 |     return numbers.reduce((acc, num) => acc + num, 0);
108 | }
109 | console.log(sum(1, 2, 3, 4, 5)); // 15
110 | ```
111 | **✅ Output:**  
112 | ```
113 | 15
114 | ```
115 | 
116 | ---
117 | 
118 | ## **📌 ৮. Callback Function (Function as an Argument)**
119 | ```js
120 | function processUserInput(name, callback) {
121 |     console.log("User Name:", name);
122 |     callback();
123 | }
124 | 
125 | function sayHello() {
126 |     console.log("Hello, How are you?");
127 | }
128 | 
129 | processUserInput("Shihab", sayHello);
130 | ```
131 | **✅ Output:**  
132 | ```
133 | User Name: Shihab
134 | Hello, How are you?
135 | ```
136 | 
137 | ---
138 | 
139 | ## **📌 ৯. Higher Order Function (Function Returns Another Function)**
140 | ```js
141 | function multiplier(factor) {
142 |     return function(number) {
143 |         return number * factor;
144 |     };
145 | }
146 | 
147 | const double = multiplier(2);
148 | console.log(double(5)); // 10
149 | ```
150 | **✅ Output:**  
151 | ```
152 | 10
153 | ```
154 | 
155 | ---
156 | 
157 | ## **📌 ১০. Recursive Function (Self Calling Function)**
158 | ```js
159 | function factorial(n) {
160 |     if (n === 0) return 1;
161 |     return n * factorial(n - 1);
162 | }
163 | 
164 | console.log(factorial(5)); // 5! = 5*4*3*2*1 = 120
165 | ```
166 | **✅ Output:**  
167 | ```
168 | 120
169 | ```
170 | 
171 | ---
172 | 
173 | ## **📌 ১১. Function Inside an Object (Method)**
174 | ```js
175 | const person = {
176 |     name: "Shihab",
177 |     greet: function() {
178 |         console.log("Hello, " + this.name);
179 |     }
180 | };
181 | person.greet();
182 | ```
183 | **✅ Output:**  
184 | ```
185 | Hello, Shihab
186 | ```
187 | 
188 | ---
189 | 
190 | ## **📌 ১২. Asynchronous Function (Async/Await)**
191 | ```js
192 | async function fetchData() {
193 |     let response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
194 |     let data = await response.json();
195 |     console.log(data);
196 | }
197 | fetchData();
198 | ```
199 | **✅ Output:**  
200 | ```json
201 | { "userId": 1, "id": 1, "title": "sample title", "body": "sample body text..." }
202 | ```
203 | 
204 | ---
205 | 
206 | ### **🚀 শেষ কথা:**  
207 | ✅ Function হলো **JavaScript-এর মূল ভিত্তি**।  
208 | ✅ এটি **কোড Reusability ও Maintainability** বাড়ায়।  
209 | ✅ **Callback, Higher Order Function, Recursion** ইত্যাদি শিখলে JavaScript-এ দক্ষ হওয়া সহজ হবে!  


--------------------------------------------------------------------------------
/C. Array/Array-English.md:
--------------------------------------------------------------------------------
  1 | ### **JavaScript Arrays - Everything You Need to Know**  
  2 | 
  3 | An **array** in JavaScript is a special variable that can store multiple values in a single variable. It is one of the most commonly used data structures.  
  4 | 
  5 | ---
  6 | 
  7 | ## **1. Creating an Array**
  8 | ### **Using an Array Literal (Recommended)**
  9 | ```javascript
 10 | let fruits = ["Apple", "Banana", "Mango"];
 11 | console.log(fruits); // Output: ["Apple", "Banana", "Mango"]
 12 | ```
 13 | ### **Using the `new Array()` Constructor**
 14 | ```javascript
 15 | let numbers = new Array(1, 2, 3, 4, 5);
 16 | console.log(numbers); // Output: [1, 2, 3, 4, 5]
 17 | ```
 18 | ---
 19 | 
 20 | ## **2. Accessing Array Elements**
 21 | Each element in an array has an **index**, starting from `0`.  
 22 | ```javascript
 23 | let colors = ["Red", "Green", "Blue"];
 24 | console.log(colors[0]); // Output: "Red"
 25 | console.log(colors[2]); // Output: "Blue"
 26 | ```
 27 | ---
 28 | 
 29 | ## **3. Modifying an Array**
 30 | ```javascript
 31 | let cars = ["Toyota", "BMW", "Tesla"];
 32 | cars[1] = "Mercedes"; // Changing BMW to Mercedes
 33 | console.log(cars); // Output: ["Toyota", "Mercedes", "Tesla"]
 34 | ```
 35 | ---
 36 | 
 37 | ## **4. Array Properties**
 38 | ### **`length` - Get the number of elements in an array**
 39 | ```javascript
 40 | let languages = ["JavaScript", "Python", "C++"];
 41 | console.log(languages.length); // Output: 3
 42 | ```
 43 | ---
 44 | 
 45 | ## **5. Array Methods**
 46 | ### **A. Adding & Removing Elements**
 47 | #### **`push()` - Add an element at the end**
 48 | ```javascript
 49 | let animals = ["Cat", "Dog"];
 50 | animals.push("Elephant");
 51 | console.log(animals); // Output: ["Cat", "Dog", "Elephant"]
 52 | ```
 53 | 
 54 | #### **`pop()` - Remove the last element**
 55 | ```javascript
 56 | animals.pop();
 57 | console.log(animals); // Output: ["Cat", "Dog"]
 58 | ```
 59 | 
 60 | #### **`unshift()` - Add an element at the beginning**
 61 | ```javascript
 62 | animals.unshift("Lion");
 63 | console.log(animals); // Output: ["Lion", "Cat", "Dog"]
 64 | ```
 65 | 
 66 | #### **`shift()` - Remove the first element**
 67 | ```javascript
 68 | animals.shift();
 69 | console.log(animals); // Output: ["Cat", "Dog"]
 70 | ```
 71 | 
 72 | ---
 73 | 
 74 | ### **B. Merging & Slicing Arrays**
 75 | #### **`concat()` - Merge two arrays**
 76 | ```javascript
 77 | let arr1 = [1, 2, 3];
 78 | let arr2 = [4, 5, 6];
 79 | let combined = arr1.concat(arr2);
 80 | console.log(combined); // Output: [1, 2, 3, 4, 5, 6]
 81 | ```
 82 | 
 83 | #### **`slice()` - Extract elements from an array**
 84 | ```javascript
 85 | let numbers = [10, 20, 30, 40, 50];
 86 | let sliced = numbers.slice(1, 4); // Extracts index 1 to 3 (4 is excluded)
 87 | console.log(sliced); // Output: [20, 30, 40]
 88 | ```
 89 | 
 90 | ---
 91 | 
 92 | ### **C. Modifying and Sorting**
 93 | #### **`splice()` - Remove or Replace elements**
 94 | ```javascript
 95 | let cities = ["New York", "London", "Paris"];
 96 | cities.splice(1, 1, "Tokyo"); // Removes 1 element at index 1 and adds "Tokyo"
 97 | console.log(cities); // Output: ["New York", "Tokyo", "Paris"]
 98 | ```
 99 | 
100 | #### **`sort()` - Sort an array (Alphabetically)**
101 | ```javascript
102 | let letters = ["D", "A", "C", "B"];
103 | letters.sort();
104 | console.log(letters); // Output: ["A", "B", "C", "D"]
105 | ```
106 | 
107 | #### **`reverse()` - Reverse an array**
108 | ```javascript
109 | letters.reverse();
110 | console.log(letters); // Output: ["D", "C", "B", "A"]
111 | ```
112 | 
113 | ---
114 | 
115 | ### **D. Searching**
116 | #### **`indexOf()` - Find the index of an element**
117 | ```javascript
118 | let items = ["Pen", "Pencil", "Eraser"];
119 | console.log(items.indexOf("Pencil")); // Output: 1
120 | ```
121 | 
122 | #### **`includes()` - Check if an element exists**
123 | ```javascript
124 | console.log(items.includes("Marker")); // Output: false
125 | console.log(items.includes("Pen"));    // Output: true
126 | ```
127 | 
128 | ---
129 | 
130 | ## **6. Looping Through an Array**
131 | ### **Using `for` loop**
132 | ```javascript
133 | let numbers = [10, 20, 30, 40];
134 | for (let i = 0; i < numbers.length; i++) {
135 |     console.log(numbers[i]);
136 | }
137 | // Output: 10 20 30 40
138 | ```
139 | 
140 | ### **Using `forEach()` (Recommended)**
141 | ```javascript
142 | numbers.forEach(function(num) {
143 |     console.log(num);
144 | });
145 | ```
146 | 
147 | ### **Using `map()` (Creates a new array)**
148 | ```javascript
149 | let squared = numbers.map(num => num * num);
150 | console.log(squared); // Output: [100, 400, 900, 1600]
151 | ```
152 | 
153 | ---
154 | 
155 | ## **7. Advanced Array Methods**
156 | ### **`filter()` - Returns a new array with elements that pass a test**
157 | ```javascript
158 | let ages = [12, 18, 22, 30, 40];
159 | let adults = ages.filter(age => age >= 18);
160 | console.log(adults); // Output: [18, 22, 30, 40]
161 | ```
162 | 
163 | ### **`reduce()` - Reduces an array to a single value**
164 | ```javascript
165 | let numbers = [1, 2, 3, 4, 5];
166 | let sum = numbers.reduce((total, num) => total + num, 0);
167 | console.log(sum); // Output: 15
168 | ```
169 | 
170 | ---
171 | 
172 | ## **8. Multi-Dimensional Arrays**
173 | An **array inside an array** is called a **multi-dimensional array**.
174 | ```javascript
175 | let matrix = [
176 |     [1, 2, 3],
177 |     [4, 5, 6],
178 |     [7, 8, 9]
179 | ];
180 | 
181 | console.log(matrix[1][2]); // Output: 6
182 | ```
183 | 
184 | ---
185 | 
186 | ## **Conclusion**
187 | JavaScript arrays are **powerful and flexible**, allowing you to store, modify, and manipulate data efficiently.  
188 | Would you like to practice with some exercises? 🚀


--------------------------------------------------------------------------------
/G. DOM/DOM-English.md:
--------------------------------------------------------------------------------
  1 | # **🔍 JavaScript DOM (Document Object Model) Explained**  
  2 | 
  3 | The **DOM (Document Object Model)** in JavaScript is an **API** that represents an HTML document as a **tree structure**, allowing developers to manipulate elements dynamically.  
  4 | 
  5 | ---
  6 | 
  7 | ## **✅ 1. How Does the DOM Work?**  
  8 | ### **📌 DOM Tree Structure**  
  9 | 
 10 | When a webpage loads, the browser converts it into a **tree structure** where each element becomes a **node** in the tree.  
 11 | 
 12 | 🔹 **HTML Code Example:**  
 13 | ```html
 14 | <!DOCTYPE html>
 15 | <html>
 16 |   <head>
 17 |     <title>DOM Example</title>
 18 |   </head>
 19 |   <body>
 20 |     <h1 id="title">Hello, DOM!</h1>
 21 |     <p class="description">This is a DOM tutorial.</p>
 22 |     <button onclick="changeText()">Click Me</button>
 23 |   </body>
 24 | </html>
 25 | ```
 26 | 
 27 | 🔹 **DOM Tree Representation:**  
 28 | ```
 29 | Document
 30 | │
 31 | ├── <html>
 32 | │   ├── <head>
 33 | │   │   ├── <title>DOM Example</title>
 34 | │   ├── <body>
 35 | │       ├── <h1 id="title">Hello, DOM!</h1>
 36 | │       ├── <p class="description">This is a DOM tutorial.</p>
 37 | │       ├── <button onclick="changeText()">Click Me</button>
 38 | ```
 39 | 🔹 **Explanation:**  
 40 | 👉 `document` is the **root object**  
 41 | 👉 `html`, `head`, `body` are **child nodes**  
 42 | 👉 `h1`, `p`, `button` are **element nodes**  
 43 | 
 44 | ---
 45 | 
 46 | ## **✅ 2. Important DOM Methods & Properties**  
 47 | 
 48 | | **Method / Property** | **Function** | **Example** |
 49 | |------------------|------------|----------------|
 50 | | `document.getElementById(id)` | **Finds an element by ID** | `document.getElementById("title")` |
 51 | | `document.getElementsByClassName(class)` | **Finds all elements with a class** | `document.getElementsByClassName("description")` |
 52 | | `document.getElementsByTagName(tag)` | **Finds all elements with a tag** | `document.getElementsByTagName("p")` |
 53 | | `document.querySelector(selector)` | **Finds the first matching element** | `document.querySelector(".description")` |
 54 | | `document.querySelectorAll(selector)` | **Finds all matching elements** | `document.querySelectorAll("p")` |
 55 | | `.innerHTML` | **Changes HTML content** | `document.getElementById("title").innerHTML = "New Title"` |
 56 | | `.innerText` | **Changes text content** | `document.getElementById("title").innerText = "Hello!"` |
 57 | | `.style.property` | **Changes CSS style** | `document.getElementById("title").style.color = "red"` |
 58 | | `document.createElement(tag)` | **Creates a new element** | `document.createElement("div")` |
 59 | | `element.appendChild(node)` | **Adds a new element inside another** | `document.body.appendChild(newDiv)` |
 60 | | `element.removeChild(node)` | **Removes an element** | `document.body.removeChild(oldElement)` |
 61 | 
 62 | ---
 63 | 
 64 | ## **✅ 3. DOM Manipulation (Modifications) Examples**  
 65 | 
 66 | ### **📌 1. Changing an Element by ID**  
 67 | ```javascript
 68 | document.getElementById("title").innerHTML = "Welcome to DOM!";
 69 | document.getElementById("title").style.color = "blue";
 70 | ```
 71 | 
 72 | ---
 73 | 
 74 | ### **📌 2. Changing Elements by Class Name**  
 75 | ```javascript
 76 | let elements = document.getElementsByClassName("description");
 77 | elements[0].innerText = "Updated Description!";
 78 | ```
 79 | 
 80 | ---
 81 | 
 82 | ### **📌 3. Using `querySelector()` and `querySelectorAll()`**  
 83 | ```javascript
 84 | document.querySelector(".description").style.color = "green";
 85 | 
 86 | let paragraphs = document.querySelectorAll("p");
 87 | paragraphs.forEach(p => p.style.fontSize = "20px");
 88 | ```
 89 | 
 90 | ---
 91 | 
 92 | ### **📌 4. Creating and Adding a New HTML Element**  
 93 | ```javascript
 94 | let newParagraph = document.createElement("p");
 95 | newParagraph.innerText = "This is a new paragraph!";
 96 | document.body.appendChild(newParagraph);
 97 | ```
 98 | 
 99 | ---
100 | 
101 | ### **📌 5. Removing an Element using `removeChild()`**  
102 | ```javascript
103 | let elementToRemove = document.getElementById("title");
104 | document.body.removeChild(elementToRemove);
105 | ```
106 | 
107 | ---
108 | 
109 | ## **✅ 4. Event Handling in DOM**
110 | JavaScript allows interaction with HTML elements using event listeners.  
111 | 
112 | ### **📌 1. `onclick` Event to Change Text on Button Click**  
113 | ```javascript
114 | function changeText() {
115 |     document.getElementById("title").innerText = "Button Clicked!";
116 | }
117 | ```
118 | 
119 | 🔹 **HTML Button:**  
120 | ```html
121 | <button onclick="changeText()">Click Me</button>
122 | ```
123 | 
124 | ---
125 | 
126 | ### **📌 2. Using `addEventListener()` for Event Handling**  
127 | ```javascript
128 | document.getElementById("title").addEventListener("mouseover", function() {
129 |     this.style.color = "red";
130 | });
131 | ```
132 | 👉 This changes the `title` color to red when hovered over.  
133 | 
134 | ---
135 | 
136 | ## **✅ 5. Real-Life Use Cases**  
137 | | **Use Case** | **DOM Methods** |
138 | |------------|-------------|
139 | | Updating webpage data dynamically | `innerHTML`, `innerText` |
140 | | Validating forms | `getElementById()`, `addEventListener()` |
141 | | Adding new elements dynamically | `createElement()`, `appendChild()` |
142 | | Handling user interactions | `addEventListener()` |
143 | | Loading data using AJAX | `document.querySelector()` |
144 | 
145 | ---
146 | 
147 | ## **✅ 6. Summary**  
148 | 🔹 **DOM is an Object Model of an HTML page that JavaScript can control.**  
149 | 🔹 **It represents the document as a "Tree Structure" with nodes.**  
150 | 🔹 **JavaScript can manipulate DOM elements, update styles, and handle events.**  
151 | 🔹 **Key methods include `getElementById()`, `querySelector()`, `innerHTML`, and `addEventListener()`.**  
152 | 


--------------------------------------------------------------------------------
/F. Function/date-time.md:
--------------------------------------------------------------------------------
  1 | # 🚀 **JavaScript Date & Time: Full Guide with Examples**  
  2 | 
  3 | JavaScript-এ **Date** এবং **Time** ম্যানেজ করতে `Date` অবজেক্ট ব্যবহার করা হয়। এটি বর্তমান সময়, তারিখ, টাইমস্ট্যাম্প, এবং টাইম ফরম্যাটিং ইত্যাদির জন্য ব্যবহৃত হয়।  
  4 | 
  5 | ---
  6 | 
  7 | ## **📌 ১. Date Object তৈরি করার উপায়**  
  8 | JavaScript-এ **Date Object** তৈরি করার ৪টি উপায় আছে:  
  9 | 
 10 | | Syntax | Description |
 11 | |--------|------------|
 12 | | `new Date()` | বর্তমান তারিখ ও সময় প্রদান করবে |
 13 | | `new Date(milliseconds)` | Unix Timestamp অনুযায়ী সময় সেট করবে |
 14 | | `new Date(year, month, day, hours, minutes, seconds, ms)` | নির্দিষ্ট তারিখ ও সময় সেট করা যাবে |
 15 | | `new Date(dateString)` | তারিখ স্ট্রিং ব্যবহার করে সেট করা |
 16 | 
 17 | 🔹 **Example:**
 18 | ```js
 19 | console.log(new Date()); // বর্তমান সময় দেখাবে
 20 | console.log(new Date(2025, 1, 12)); // নির্দিষ্ট তারিখ
 21 | console.log(new Date("2025-02-12")); // স্ট্রিং থেকে তারিখ
 22 | console.log(new Date(0)); // 1970-01-01 00:00:00 UTC
 23 | ```
 24 | 
 25 | ---
 26 | 
 27 | ## **📌 ২. Date Methods (তারিখ সম্পর্কিত মেথড)**  
 28 | | Method | Description | Example Output |
 29 | |--------|------------|----------------|
 30 | | `getFullYear()` | বছর ফেরত দেয় | `2025` |
 31 | | `getMonth()` | মাস (0-11) ফেরত দেয় | `1` (February) |
 32 | | `getDate()` | মাসের তারিখ ফেরত দেয় | `12` |
 33 | | `getDay()` | সপ্তাহের দিন (0-6) ফেরত দেয় | `3` (Wednesday) |
 34 | | `getHours()` | ঘণ্টা (0-23) ফেরত দেয় | `14` |
 35 | | `getMinutes()` | মিনিট ফেরত দেয় | `30` |
 36 | | `getSeconds()` | সেকেন্ড ফেরত দেয় | `45` |
 37 | | `getMilliseconds()` | মিলিসেকেন্ড ফেরত দেয় | `500` |
 38 | 
 39 | 🔹 **Example:**
 40 | ```js
 41 | let now = new Date();
 42 | console.log(now.getFullYear());  // 2025
 43 | console.log(now.getMonth());     // 1 (February)
 44 | console.log(now.getDate());      // 12
 45 | console.log(now.getDay());       // 3 (Wednesday)
 46 | console.log(now.getHours());     // 14
 47 | console.log(now.getMinutes());   // 30
 48 | console.log(now.getSeconds());   // 45
 49 | ```
 50 | 
 51 | ---
 52 | 
 53 | ## **📌 ৩. Date Formatting (তারিখ কাস্টমাইজ করা)**  
 54 | 🔹 **Example:**
 55 | ```js
 56 | let date = new Date();
 57 | let formattedDate = `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
 58 | console.log(formattedDate);
 59 | ```
 60 | **✅ Output:**  
 61 | ```
 62 | 12-2-2025
 63 | ```
 64 | 
 65 | ---
 66 | 
 67 | ## **📌 ৪. Set Methods (তারিখ ও সময় পরিবর্তন করা)**  
 68 | | Method | Description |
 69 | |--------|------------|
 70 | | `setFullYear(year)` | নির্দিষ্ট বছর সেট করে |
 71 | | `setMonth(month)` | নির্দিষ্ট মাস সেট করে |
 72 | | `setDate(day)` | নির্দিষ্ট তারিখ সেট করে |
 73 | | `setHours(hour)` | নির্দিষ্ট ঘণ্টা সেট করে |
 74 | | `setMinutes(min)` | নির্দিষ্ট মিনিট সেট করে |
 75 | | `setSeconds(sec)` | নির্দিষ্ট সেকেন্ড সেট করে |
 76 | 
 77 | 🔹 **Example:**
 78 | ```js
 79 | let myDate = new Date();
 80 | myDate.setFullYear(2030);
 81 | myDate.setMonth(5); // June (0-based index)
 82 | console.log(myDate);
 83 | ```
 84 | 
 85 | ---
 86 | 
 87 | ## **📌 ৫. Date Comparisons (তারিখ তুলনা করা)**  
 88 | 🔹 **Example:**
 89 | ```js
 90 | let date1 = new Date("2025-02-12");
 91 | let date2 = new Date("2025-02-15");
 92 | 
 93 | if (date1 < date2) {
 94 |     console.log("date1 is earlier than date2");
 95 | } else {
 96 |     console.log("date1 is later than date2");
 97 | }
 98 | ```
 99 | **✅ Output:**  
100 | ```
101 | date1 is earlier than date2
102 | ```
103 | 
104 | ---
105 | 
106 | ## **📌 ৬. Time Methods (সময় বের করা)**  
107 | | Method | Description |
108 | |--------|------------|
109 | | `getTime()` | 1970 থেকে বর্তমান সময় পর্যন্ত **মিলিসেকেন্ড** ফেরত দেয় |
110 | | `Date.now()` | বর্তমান Unix Timestamp দেয় |
111 | 
112 | 🔹 **Example:**
113 | ```js
114 | let now = new Date();
115 | console.log(now.getTime()); // 1707734400000 (Milliseconds since 1970)
116 | console.log(Date.now()); // বর্তমান Timestamp
117 | ```
118 | 
119 | ---
120 | 
121 | ## **📌 ৭. Countdown Timer (কতদিন বাকি তা বের করা)**  
122 | 🔹 **Example:**
123 | ```js
124 | let eventDate = new Date("2025-12-31");
125 | let today = new Date();
126 | 
127 | let difference = eventDate - today;
128 | let daysLeft = Math.floor(difference / (1000 * 60 * 60 * 24));
129 | 
130 | console.log(`Only ${daysLeft} days left until New Year!`);
131 | ```
132 | 
133 | ---
134 | 
135 | ## **📌 ৮. Converting Date to String (তারিখকে স্ট্রিং-এ রূপান্তর করা)**  
136 | | Method | Description | Example Output |
137 | |--------|------------|----------------|
138 | | `toDateString()` | শুধুমাত্র তারিখ | `"Wed Feb 12 2025"` |
139 | | `toTimeString()` | শুধুমাত্র সময় | `"14:30:45 GMT+0000"` |
140 | | `toISOString()` | ISO 8601 ফরম্যাট | `"2025-02-12T14:30:45.000Z"` |
141 | 
142 | 🔹 **Example:**
143 | ```js
144 | let date = new Date();
145 | console.log(date.toDateString());  // Wed Feb 12 2025
146 | console.log(date.toTimeString());  // 14:30:45 GMT+0000
147 | console.log(date.toISOString());   // 2025-02-12T14:30:45.000Z
148 | ```
149 | 
150 | ---
151 | 
152 | ## **📌 ৯. Local Date Formatting (লোকাল টাইম)**  
153 | 🔹 **Example:**
154 | ```js
155 | let date = new Date();
156 | console.log(date.toLocaleDateString("en-US")); // 2/12/2025
157 | console.log(date.toLocaleDateString("bn-BD")); // ১২/২/২০২৫
158 | ```
159 | 
160 | ---
161 | 
162 | ## **📌 ১০. Stopwatch (Execution Time Check)**  
163 | 🔹 **Example:**
164 | ```js
165 | let start = Date.now();
166 | for (let i = 0; i < 1000000; i++) {} // Loop for delay
167 | let end = Date.now();
168 | 
169 | console.log(`Execution Time: ${end - start} ms`);
170 | ```
171 | 
172 | ---
173 | 
174 | ## **🔥 উপসংহার**  
175 | ✅ JavaScript-এর **Date Object** ব্যবহার করে **তারিখ ও সময়** নিয়ন্ত্রণ করা যায়।  
176 | ✅ **Date Formatting**, **Countdown Timer**, এবং **Execution Time Calculation** করা সম্ভব।  
177 | ✅ `toLocaleDateString()` ব্যবহার করে **লোকাল টাইম ফরম্যাট** সেট করা যায়।  
178 | 


--------------------------------------------------------------------------------
/F. Function/Math.md:
--------------------------------------------------------------------------------
  1 | # 🚀 **JavaScript Math: Full Guide with Examples**  
  2 | 
  3 | JavaScript-এর **Math Object** ব্যবহার করে **সংখ্যার গণনা, রাউন্ডিং, র্যান্ডম সংখ্যা তৈরি, এবং ম্যাথমেটিক্যাল অপারেশন** করা যায়। এটি একটি **built-in object**, তাই আমরা এটি **direct ব্যবহার** করতে পারি।  
  4 | 
  5 | ---
  6 | 
  7 | ## **📌 ১. Math Properties (গণিত বিষয়ক কনস্ট্যান্টস)**  
  8 | JavaScript-এ কিছু **Math Properties** আছে, যা বিভিন্ন কনস্ট্যান্ট মান ধারণ করে:  
  9 | 
 10 | | Property         | Value                  | Description                          |
 11 | |-----------------|------------------------|--------------------------------------|
 12 | | `Math.PI`       | `3.141592653589793`     | π (Pi)                              |
 13 | | `Math.E`        | `2.718281828459045`     | Euler’s number                      |
 14 | | `Math.SQRT2`    | `1.4142135623730951`    | √2 (Square root of 2)               |
 15 | | `Math.SQRT1_2`  | `0.7071067811865476`    | √(1/2)                              |
 16 | | `Math.LN2`      | `0.6931471805599453`    | Natural log of 2                    |
 17 | | `Math.LN10`     | `2.302585092994046`     | Natural log of 10                   |
 18 | 
 19 | 🔹 **Example:**
 20 | ```js
 21 | console.log(Math.PI); // 3.141592653589793
 22 | console.log(Math.E);  // 2.718281828459045
 23 | ```
 24 | 
 25 | ---
 26 | 
 27 | ## **📌 ২. Number Rounding Methods (সংখ্যা রাউন্ড করা)**  
 28 | | Method         | Description                            | Example (`x = 4.7`) |
 29 | |--------------|--------------------------------|----------------|
 30 | | `Math.round(x)` | কাছের পূর্ণসংখ্যায় রাউন্ড করে | `5` |
 31 | | `Math.floor(x)` | নিচের দিকে রাউন্ড করে | `4` |
 32 | | `Math.ceil(x)` | উপরের দিকে রাউন্ড করে | `5` |
 33 | | `Math.trunc(x)` | দশমিক বাদ দিয়ে শুধু পূর্ণসংখ্যা নেয় | `4` |
 34 | 
 35 | 🔹 **Example:**
 36 | ```js
 37 | console.log(Math.round(4.7));  // 5
 38 | console.log(Math.floor(4.7));  // 4
 39 | console.log(Math.ceil(4.1));   // 5
 40 | console.log(Math.trunc(4.9));  // 4
 41 | ```
 42 | 
 43 | ---
 44 | 
 45 | ## **📌 ৩. Power, Square Root & Logarithm**  
 46 | | Method              | Description                        | Example |
 47 | |--------------------|--------------------------------|---------|
 48 | | `Math.pow(x, y)`   | `x` এর `y` ঘাত (power) নির্ণয় করে | `Math.pow(2, 3) → 8` |
 49 | | `Math.sqrt(x)`     | `x`-এর বর্গমূল (square root) বের করে | `Math.sqrt(25) → 5` |
 50 | | `Math.cbrt(x)`     | `x`-এর ঘনমূল (cube root) বের করে | `Math.cbrt(27) → 3` |
 51 | | `Math.log(x)`      | `x`-এর প্রাকৃতিক লগারিদম (ln x) | `Math.log(10) → 2.30` |
 52 | | `Math.log10(x)`    | `x`-এর base 10 লগারিদম | `Math.log10(100) → 2` |
 53 | 
 54 | 🔹 **Example:**
 55 | ```js
 56 | console.log(Math.pow(2, 3));  // 8
 57 | console.log(Math.sqrt(25));   // 5
 58 | console.log(Math.cbrt(27));   // 3
 59 | console.log(Math.log10(100)); // 2
 60 | ```
 61 | 
 62 | ---
 63 | 
 64 | ## **📌 ৪. Min, Max & Random Numbers**  
 65 | | Method          | Description                          | Example |
 66 | |----------------|----------------------------------|---------|
 67 | | `Math.min(a, b, c, ...)` | ছোটতম সংখ্যা বের করে | `Math.min(5, 3, 9) → 3` |
 68 | | `Math.max(a, b, c, ...)` | বড়তম সংখ্যা বের করে | `Math.max(5, 3, 9) → 9` |
 69 | | `Math.random()` | ০ থেকে ১-এর মধ্যে র্যান্ডম সংখ্যা তৈরি করে | `Math.random() → 0.458` |
 70 | 
 71 | 🔹 **Example:**
 72 | ```js
 73 | console.log(Math.min(5, 3, 9));  // 3
 74 | console.log(Math.max(5, 3, 9));  // 9
 75 | console.log(Math.random());      // 0.125374 (random)
 76 | ```
 77 | 
 78 | 🔹 **Random সংখ্যা 1 থেকে 100 এর মধ্যে আনতে:**
 79 | ```js
 80 | console.log(Math.floor(Math.random() * 100) + 1);
 81 | ```
 82 | 
 83 | ---
 84 | 
 85 | ## **📌 ৫. Trigonometric Methods (ত্রিকোণমিতি ফাংশন)**  
 86 | | Method         | Description                        | Example |
 87 | |--------------|--------------------------------|---------|
 88 | | `Math.sin(x)` | `x` রেডিয়ান এর sine মান নির্ণয় করে | `Math.sin(0) → 0` |
 89 | | `Math.cos(x)` | `x` রেডিয়ান এর cosine মান নির্ণয় করে | `Math.cos(0) → 1` |
 90 | | `Math.tan(x)` | `x` রেডিয়ান এর tangent মান নির্ণয় করে | `Math.tan(0) → 0` |
 91 | | `Math.asin(x)` | `x`-এর sine এর বিপরীত মান দেয় (radians) | `Math.asin(1) → 1.57` |
 92 | 
 93 | 🔹 **Example:**
 94 | ```js
 95 | console.log(Math.sin(0));  // 0
 96 | console.log(Math.cos(0));  // 1
 97 | console.log(Math.tan(0));  // 0
 98 | console.log(Math.asin(1)); // 1.5707963267948966 (π/2 radians)
 99 | ```
100 | 
101 | ---
102 | 
103 | ## **📌 ৬. Absolute & Sign Methods**  
104 | | Method         | Description                            | Example |
105 | |--------------|--------------------------------|---------|
106 | | `Math.abs(x)` | `x`-এর Absolute (ধনাত্মক) মান দেয় | `Math.abs(-10) → 10` |
107 | | `Math.sign(x)` | সংখ্যা ধনাত্মক (+1), ঋণাত্মক (-1) বা 0 তা বলে | `Math.sign(-5) → -1` |
108 | 
109 | 🔹 **Example:**
110 | ```js
111 | console.log(Math.abs(-10));  // 10
112 | console.log(Math.sign(-5));  // -1
113 | console.log(Math.sign(5));   // 1
114 | console.log(Math.sign(0));   // 0
115 | ```
116 | 
117 | ---
118 | 
119 | ## **📌 ৭. Exponential & Logarithmic Methods**  
120 | | Method         | Description                            | Example |
121 | |--------------|--------------------------------|---------|
122 | | `Math.exp(x)` | `e^x` (Euler’s Number এর power x) | `Math.exp(2) → 7.389` |
123 | | `Math.log(x)` | `x` এর প্রাকৃতিক লগারিদম (ln x) | `Math.log(10) → 2.30` |
124 | | `Math.log2(x)` | `x`-এর base 2 লগারিদম | `Math.log2(8) → 3` |
125 | 
126 | 🔹 **Example:**
127 | ```js
128 | console.log(Math.exp(2));   // 7.389
129 | console.log(Math.log(10));  // 2.302
130 | console.log(Math.log2(8));  // 3
131 | ```
132 | 
133 | ---
134 | 
135 | ## **🔥 উপসংহার**  
136 | ✅ JavaScript-এর `Math` object ব্যবহার করে বিভিন্ন **গাণিতিক অপারেশন** করা যায়।  
137 | ✅ **`Math.random()`** ব্যবহার করে **random সংখ্যা তৈরি** করা সম্ভব।  
138 | ✅ **`Math.round()`, `Math.floor()`, `Math.ceil()`** সংখ্যা রাউন্ডিং করতে ব্যবহৃত হয়।  
139 | ✅ **Exponential, Logarithmic, Trigonometric** ফাংশনগুলো গণিত-সংক্রান্ত কাজে ব্যবহৃত হয়।  
140 | 


--------------------------------------------------------------------------------
/H. ES6/Array-Method.md:
--------------------------------------------------------------------------------
  1 | ### **ES6 এর গুরুত্বপূর্ণ Array Methods এবং তাদের ব্যাখ্যা**  
  2 | 
  3 | ES6 (ECMAScript 2015) এবং পরবর্তী আপডেটগুলোতে অ্যারে ম্যানিপুলেশনের জন্য বেশ কিছু শক্তিশালী মেথড যুক্ত হয়েছে। নিচে **প্রয়োজনীয় ও সবচেয়ে ব্যবহৃত** কিছু অ্যারে মেথড ব্যাখ্যা করা হলো:
  4 | 
  5 | ---
  6 | 
  7 | ## **1. `forEach()` – প্রতিটি আইটেমের উপর লুপ চালানো**  
  8 | এই মেথডটি একটি কলব্যাক ফাংশন চালায় এবং অ্যারেতে থাকা প্রতিটি উপাদানের জন্য একবার করে কাজ করে।  
  9 | 
 10 | ```js
 11 | const numbers = [1, 2, 3, 4];
 12 | 
 13 | numbers.forEach(num => {
 14 |     console.log(num * 2);
 15 | });
 16 | // Output: 2, 4, 6, 8
 17 | ```
 18 | 
 19 | ---
 20 | 
 21 | ## **2. `map()` – নতুন অ্যারে তৈরি করা (Transform করা)**  
 22 | `map()` মেথডটি মূল অ্যারেটিকে পরিবর্তন না করেই নতুন একটি অ্যারে তৈরি করে এবং প্রতিটি উপাদানের উপর নির্দিষ্ট ফাংশন প্রয়োগ করে।  
 23 | 
 24 | ```js
 25 | const numbers = [1, 2, 3, 4];
 26 | 
 27 | const squared = numbers.map(num => num ** 2);
 28 | console.log(squared);
 29 | // Output: [1, 4, 9, 16]
 30 | ```
 31 | 
 32 | ---
 33 | 
 34 | ## **3. `filter()` – নির্দিষ্ট শর্ত অনুযায়ী উপাদান বাছাই**  
 35 | এই মেথডটি একটি কন্ডিশন অনুযায়ী অ্যারের মধ্যে থাকা উপাদানগুলিকে ফিল্টার করে এবং নতুন অ্যারে তৈরি করে।
 36 | 
 37 | ```js
 38 | const numbers = [10, 25, 30, 45, 50];
 39 | 
 40 | const filteredNumbers = numbers.filter(num => num > 25);
 41 | console.log(filteredNumbers);
 42 | // Output: [30, 45, 50]
 43 | ```
 44 | 
 45 | ---
 46 | 
 47 | ## **4. `reduce()` – অ্যারেতে সংক্ষিপ্ত হিসাব করা**  
 48 | এই মেথডটি অ্যারের সব উপাদান একত্র করে একক মানে পরিণত করে (যেমন – যোগফল, গড়, সর্বোচ্চ মান)।  
 49 | 
 50 | ```js
 51 | const numbers = [1, 2, 3, 4];
 52 | 
 53 | const sum = numbers.reduce((acc, num) => acc + num, 0);
 54 | console.log(sum);
 55 | // Output: 10
 56 | ```
 57 | > **ব্যাখ্যা:**  
 58 | > - `acc` (accumulator) = আগের ধাপে যোগফল  
 59 | > - `num` = বর্তমান উপাদান  
 60 | > - `0` = শুরুর মান  
 61 | 
 62 | ---
 63 | 
 64 | ## **5. `find()` – শর্ত অনুযায়ী প্রথম মিল পাওয়া উপাদান খোঁজা**  
 65 | এই মেথডটি এমন একটি উপাদান খোঁজে যা নির্দিষ্ট শর্ত পূরণ করে।  
 66 | 
 67 | ```js
 68 | const numbers = [10, 20, 30, 40];
 69 | 
 70 | const foundNumber = numbers.find(num => num > 25);
 71 | console.log(foundNumber);
 72 | // Output: 30
 73 | ```
 74 | 
 75 | ---
 76 | 
 77 | ## **6. `findIndex()` – নির্দিষ্ট উপাদানের ইনডেক্স খুঁজে বের করা**  
 78 | এই মেথডটি `find()`-এর মতোই কাজ করে, তবে এটি উপাদানের পরিবর্তে **ইনডেক্স** রিটার্ন করে।
 79 | 
 80 | ```js
 81 | const numbers = [10, 20, 30, 40];
 82 | 
 83 | const index = numbers.findIndex(num => num > 25);
 84 | console.log(index);
 85 | // Output: 2  (30-এর ইনডেক্স)
 86 | ```
 87 | 
 88 | ---
 89 | 
 90 | ## **7. `some()` – কমপক্ষে একটি শর্ত মিললে `true` রিটার্ন করা**  
 91 | এই মেথডটি চেক করে যে, অ্যারেতে **কমপক্ষে একটি উপাদান** নির্দিষ্ট শর্ত পূরণ করে কি না।
 92 | 
 93 | ```js
 94 | const numbers = [1, 2, 3, 4];
 95 | 
 96 | const hasEven = numbers.some(num => num % 2 === 0);
 97 | console.log(hasEven);
 98 | // Output: true  (কারণ 2, 4 জোড় সংখ্যা)
 99 | ```
100 | 
101 | ---
102 | 
103 | ## **8. `every()` – সব উপাদান শর্ত পূরণ করলে `true` রিটার্ন করা**  
104 | এই মেথডটি `some()`-এর বিপরীত। এখানে অ্যারের **প্রতিটি উপাদান** শর্ত পূরণ করলে `true` রিটার্ন করবে।
105 | 
106 | ```js
107 | const numbers = [2, 4, 6, 8];
108 | 
109 | const allEven = numbers.every(num => num % 2 === 0);
110 | console.log(allEven);
111 | // Output: true
112 | ```
113 | 
114 | ---
115 | 
116 | ## **9. `sort()` – অ্যারে সাজানো**  
117 | এই মেথডটি অ্যারেতে থাকা উপাদানগুলোকে **অ্যালফাবেটিক্যালি বা সংখ্যা অনুযায়ী** সাজায়।
118 | 
119 | ```js
120 | const numbers = [30, 10, 50, 20, 40];
121 | 
122 | numbers.sort((a, b) => a - b);
123 | console.log(numbers);
124 | // Output: [10, 20, 30, 40, 50]  (Ascending Order)
125 | ```
126 | > **ব্যাখ্যা:**  
127 | > - `a - b` ব্যবহার করলে **Ascending Order (ছোট থেকে বড়)** সাজাবে।  
128 | > - `b - a` ব্যবহার করলে **Descending Order (বড় থেকে ছোট)** সাজাবে।
129 | 
130 | ---
131 | 
132 | ## **10. `reverse()` – অ্যারে উল্টো করে ফেলা**  
133 | এই মেথডটি অ্যারের উপাদানগুলোর ক্রম উল্টে দেয়।
134 | 
135 | ```js
136 | const numbers = [10, 20, 30, 40];
137 | 
138 | numbers.reverse();
139 | console.log(numbers);
140 | // Output: [40, 30, 20, 10]
141 | ```
142 | 
143 | ---
144 | 
145 | ## **11. `includes()` – নির্দিষ্ট উপাদান অ্যারেতে আছে কি না তা চেক করা**  
146 | এই মেথডটি `true` বা `false` রিটার্ন করে।
147 | 
148 | ```js
149 | const fruits = ['apple', 'banana', 'mango'];
150 | 
151 | console.log(fruits.includes('banana'));  // Output: true
152 | console.log(fruits.includes('grape'));   // Output: false
153 | ```
154 | 
155 | ---
156 | 
157 | ## **12. `concat()` – দুটি বা তার বেশি অ্যারে একত্র করা**  
158 | এই মেথডটি অ্যারে মিলে **নতুন অ্যারে** তৈরি করে।
159 | 
160 | ```js
161 | const arr1 = [1, 2];
162 | const arr2 = [3, 4];
163 | 
164 | const newArray = arr1.concat(arr2);
165 | console.log(newArray);
166 | // Output: [1, 2, 3, 4]
167 | ```
168 | 
169 | ---
170 | 
171 | ## **13. `join()` – অ্যারেকে স্ট্রিংয়ে রূপান্তর করা**  
172 | এই মেথডটি অ্যারেকে স্ট্রিংয়ে পরিবর্তন করে এবং **প্রতিটি উপাদানের মধ্যে নির্দিষ্ট আলাদা চিহ্ন যোগ করে।**
173 | 
174 | ```js
175 | const words = ['Hello', 'World'];
176 | 
177 | const sentence = words.join(' ');
178 | console.log(sentence);
179 | // Output: "Hello World"
180 | ```
181 | 
182 | ---
183 | 
184 | ## **14. `splice()` – অ্যারে থেকে উপাদান মুছে ফেলা বা যোগ করা**  
185 | এই মেথডটি নির্দিষ্ট ইনডেক্স থেকে উপাদান **মুছে ফেলে** বা নতুন উপাদান **যোগ করে।**
186 | 
187 | ```js
188 | const numbers = [10, 20, 30, 40];
189 | 
190 | numbers.splice(1, 2);  // 1নং ইনডেক্স থেকে ২টি এলিমেন্ট মুছে ফেলবে
191 | console.log(numbers);
192 | // Output: [10, 40]
193 | ```
194 | 
195 | ---
196 | 
197 | ## **15. `slice()` – অ্যারের নির্দিষ্ট অংশ কপি করা**  
198 | এই মেথডটি একটি নির্দিষ্ট অংশ **কপি** করে নতুন অ্যারে তৈরি করে।
199 | 
200 | ```js
201 | const numbers = [10, 20, 30, 40, 50];
202 | 
203 | const slicedNumbers = numbers.slice(1, 4);
204 | console.log(slicedNumbers);
205 | // Output: [20, 30, 40]
206 | ```
207 | 
208 | ---
209 | 
210 | ## **শেষ কথা**  
211 | এই মেথডগুলো **প্রোগ্রামিংয়ে ডাটা ম্যানিপুলেশন** এবং **অ্যারে নিয়ে কাজ করার ক্ষেত্রে** অনেক বেশি গুরুত্বপূর্ণ।


--------------------------------------------------------------------------------
/Interview-Question/Github-Question.md:
--------------------------------------------------------------------------------
  1 | # 💻 GitHub ভিত্তিক ইন্টারভিউ প্রশ্নোত্তর (জুনিয়র ডেভেলপারদের জন্য)
  2 | 
  3 | নিচে GitHub সম্পর্কে ২০টি গুরুত্বপূর্ণ প্রশ্ন ও উত্তর দেওয়া হলো — প্রতিটি প্রশ্নের সাথে বাংলা ও ইংরেজি ব্যাখ্যা রয়েছে।
  4 | 
  5 | ---
  6 | 
  7 | ### ✅ ১) GitHub কী? (What is GitHub?)  
  8 | **বাংলায়:** GitHub একটি অনলাইন প্ল্যাটফর্ম যেখানে Git রিপোজিটরি সংরক্ষণ ও শেয়ার করা যায়।  
  9 | **English:** GitHub is an online platform where Git repositories can be stored and shared.
 10 | 
 11 | ---
 12 | 
 13 | ### ✅ ২) GitHub-এ কীভাবে নতুন রিপোজিটরি তৈরি করবেন? (How do you create a new repository on GitHub?)  
 14 | **বাংলায়:** GitHub এ লগইন করে “New Repository” বাটনে ক্লিক করে নাম ও বিবরণ দিয়ে রিপোজিটরি তৈরি করা যায়।  
 15 | **English:** Log in to GitHub, click on “New Repository”, provide a name and description, and create it.
 16 | 
 17 | ---
 18 | 
 19 | ### ✅ ৩) README ফাইল কেন দরকার? (Why is a README file important?)  
 20 | **বাংলায়:** README ফাইল প্রোজেক্টের পরিচিতি ও ব্যবহারের নির্দেশনা দেয়।  
 21 | **English:** A README file introduces the project and explains how to use or install it.
 22 | 
 23 | ---
 24 | 
 25 | ### ✅ ৪) GitHub-এ কিভাবে প্রোজেক্ট আপলোড করবেন? (How do you upload a project to GitHub?)  
 26 | **বাংলায়:** লোকাল প্রজেক্টে Git init করে, add, commit করে তারপর GitHub রিপোজিটরির সাথে যুক্ত করে push করতে হয়।  
 27 | **English:** Initialize Git locally, add and commit files, link with GitHub repository, and push the code.
 28 | 
 29 | ---
 30 | 
 31 | ### ✅ ৫) GitHub Repo কে কিভাবে public বা private করা যায়? (How can you make a GitHub repository public or private?)  
 32 | **বাংলায়:** রিপোজিটরি তৈরি করার সময় বা Settings থেকে visibility পরিবর্তন করা যায়।  
 33 | **English:** You can set visibility while creating the repo or change it later from Settings.
 34 | 
 35 | ---
 36 | 
 37 | ### ✅ ৬) Fork কী? (What is a fork?)  
 38 | **বাংলায়:** Fork হলো অন্য কারো রিপোজিটরির কপি নিজের GitHub অ্যাকাউন্টে নেওয়া।  
 39 | **English:** A fork is a copy of someone else’s repository under your GitHub account.
 40 | 
 41 | ---
 42 | 
 43 | ### ✅ ৭) Pull Request কী? (What is a Pull Request?)  
 44 | **বাংলায়:** Pull Request হল কোড merge করার জন্য করা একটি অনুরোধ যা রিভিউ করা হয়।  
 45 | **English:** A Pull Request is a request to merge your code into another branch after review.
 46 | 
 47 | ---
 48 | 
 49 | ### ✅ ৮) Issue কী? (What is an issue on GitHub?)  
 50 | **বাংলায়:** Issue GitHub-এ একটি সমস্যা, বাগ বা ফিচার অনুরোধ রেকর্ড করার জন্য ব্যবহৃত হয়।  
 51 | **English:** An issue is used to report bugs, suggest features, or track tasks on GitHub.
 52 | 
 53 | ---
 54 | 
 55 | ### ✅ ৯) GitHub-এর কী কী Collaboration ফিচার আছে? (What collaboration features does GitHub offer?)  
 56 | **বাংলায়:** GitHub এ Pull Request, Issue tracking, Branch protection, এবং Discussion board রয়েছে।  
 57 | **English:** GitHub offers Pull Requests, Issue tracking, branch protection, and discussion boards.
 58 | 
 59 | ---
 60 | 
 61 | ### ✅ ১০) Contributor কাকে বলে? (Who is a contributor on GitHub?)  
 62 | **বাংলায়:** যিনি কোনো GitHub প্রোজেক্টে কোড, ডকুমেন্টেশন বা অন্যভাবে অবদান রাখেন।  
 63 | **English:** A contributor is someone who contributes code, documentation, or other input to a GitHub project.
 64 | 
 65 | ---
 66 | 
 67 | ### ✅ ১১) Star দেওয়া কী বোঝায়? (What does giving a star to a repository mean?)  
 68 | **বাংলায়:** এটি বোঝায় যে আপনি প্রোজেক্টটি পছন্দ করেছেন বা পরে দেখতে চান।  
 69 | **English:** It means you like the project or want to bookmark it for later.
 70 | 
 71 | ---
 72 | 
 73 | ### ✅ ১২) Watch ফিচার কী? (What is the watch feature?)  
 74 | **বাংলায়:** Watch করলে আপনি সেই রিপোজিটরির সব আপডেট বা নোটিফিকেশন পাবেন।  
 75 | **English:** Watching a repo lets you receive notifications about its updates or changes.
 76 | 
 77 | ---
 78 | 
 79 | ### ✅ ১৩) GitHub Actions কী? (What are GitHub Actions?)  
 80 | **বাংলায়:** GitHub Actions হল CI/CD সেটআপ করার একটি টুল যা স্বয়ংক্রিয়ভাবে কোড টেস্ট, বিল্ড ও ডিপ্লয় করতে সাহায্য করে।  
 81 | **English:** GitHub Actions is a CI/CD tool to automatically test, build, and deploy code.
 82 | 
 83 | ---
 84 | 
 85 | ### ✅ ১৪) GitHub Pages কী? (What is GitHub Pages?)  
 86 | **বাংলায়:** এটি GitHub থেকে সরাসরি ওয়েবসাইট হোস্ট করার একটি সুবিধা।  
 87 | **English:** GitHub Pages allows you to host a static website directly from a GitHub repository.
 88 | 
 89 | ---
 90 | 
 91 | ### ✅ ১৫) `.github` ডিরেক্টরি কী কাজে লাগে? (What is the purpose of the `.github` directory?)  
 92 | **বাংলায়:** এতে Issue template, PR template, ও GitHub Actions workflow রাখা যায়।  
 93 | **English:** It contains issue templates, PR templates, and GitHub Actions workflows.
 94 | 
 95 | ---
 96 | 
 97 | ### ✅ ১৬) GitHub Repository তে Collaborator কীভাবে যুক্ত করবেন? (How to add a collaborator to a GitHub repository?)  
 98 | **বাংলায়:** রিপোজিটরির Settings → Collaborators & Teams → Invite collaborator থেকে যুক্ত করা যায়।  
 99 | **English:** Go to Settings → Collaborators & Teams → Invite collaborator.
100 | 
101 | ---
102 | 
103 | ### ✅ ১৭) GitHub-এ কিভাবে Pull Request Merge করবেন? (How to merge a Pull Request on GitHub?)  
104 | **বাংলায়:** PR ওপেন করে review এর পর “Merge Pull Request” বাটন চাপলেই মার্জ হয়ে যায়।  
105 | **English:** Open the PR, review it, and click “Merge Pull Request” to complete the merge.
106 | 
107 | ---
108 | 
109 | ### ✅ ১৮) GitHub এ Branch Protection কী? (What is branch protection in GitHub?)  
110 | **বাংলায়:** এটি একটি সিকিউরিটি সেটিং যা কোনো ব্রাঞ্চে সরাসরি push আটকায় ও কোড রিভিউ বাধ্যতামূলক করে।  
111 | **English:** It’s a setting to restrict direct pushes and enforce code reviews on a branch.
112 | 
113 | ---
114 | 
115 | ### ✅ ১৯) Pull Request এ Reviewers অ্যাড করা কেন দরকার? (Why add reviewers in a Pull Request?)  
116 | **বাংলায়:** কোড রিভিউয়ের জন্য নির্দিষ্ট ডেভেলপারদের জানানো হয় যাতে তারা কোড যাচাই করে।  
117 | **English:** To notify specific developers for reviewing and verifying the code before merging.
118 | 
119 | ---
120 | 
121 | ### ✅ ২০) GitHub Repo ডিলিট বা আর্কাইভ কীভাবে করবেন? (How to delete or archive a GitHub repository?)  
122 | **বাংলায়:** Settings → Danger Zone থেকে আপনি রিপোজিটরি আর্কাইভ বা ডিলিট করতে পারবেন।  
123 | **English:** Go to Settings → Danger Zone to archive or delete the repository.
124 | 
125 | ---
126 | 


--------------------------------------------------------------------------------
/G. DOM/Method.md:
--------------------------------------------------------------------------------
  1 | ## **📌 JavaScript-এর Top DOM Methods & তাদের ব্যাখ্যা**  
  2 | DOM (Document Object Model) ম্যানিপুলেশনের জন্য JavaScript-এর কিছু গুরুত্বপূর্ণ মেথড আছে, যা ওয়েবপেজের এলিমেন্ট পরিবর্তন, অ্যাট্রিবিউট আপডেট এবং ইভেন্ট হ্যান্ডলিং সহজ করে তোলে।  
  3 | 
  4 | ---
  5 | 
  6 | ## **📌 1. Element Select করার মেথড**  
  7 | 👉 HTML ডকুমেন্ট থেকে এলিমেন্ট সিলেক্ট করার জন্য এই মেথডগুলো ব্যবহৃত হয়।  
  8 | 
  9 | ### **🔹 1. `document.getElementById(id)` - ID দিয়ে এলিমেন্ট খোঁজা**  
 10 | 👉 নির্দিষ্ট **ID** দ্বারা একটি নির্দিষ্ট এলিমেন্ট পাওয়া যায়।  
 11 | ```js
 12 | let title = document.getElementById("main-title");
 13 | title.innerText = "Updated Title!";
 14 | ```
 15 | ✅ **ব্যাখ্যা:**  
 16 | এটি `id="main-title"` থাকা এলিমেন্টের টেক্সট পরিবর্তন করবে।  
 17 | 
 18 | ---
 19 | 
 20 | ### **🔹 2. `document.getElementsByClassName(className)` - Class দিয়ে খোঁজা**  
 21 | 👉 নির্দিষ্ট **className** দ্বারা **একাধিক এলিমেন্টের লিস্ট (HTMLCollection)** পাওয়া যায়।  
 22 | ```js
 23 | let items = document.getElementsByClassName("item");
 24 | console.log(items[0].innerText); // প্রথম item এর টেক্সট দেখাবে
 25 | ```
 26 | ✅ **ব্যাখ্যা:**  
 27 | এটি `.item` ক্লাসযুক্ত সব এলিমেন্টকে খুঁজে পাবে এবং প্রথমটির টেক্সট দেখাবে।  
 28 | 
 29 | ---
 30 | 
 31 | ### **🔹 3. `document.getElementsByTagName(tagName)` - ট্যাগের মাধ্যমে খোঁজা**  
 32 | 👉 নির্দিষ্ট **HTML ট্যাগ** অনুযায়ী **একাধিক এলিমেন্ট** পাওয়া যায়।  
 33 | ```js
 34 | let paragraphs = document.getElementsByTagName("p");
 35 | console.log(paragraphs.length); // কতগুলো <p> আছে তা দেখাবে
 36 | ```
 37 | ✅ **ব্যাখ্যা:**  
 38 | সব `<p>` ট্যাগ সংগ্রহ করবে এবং কয়টি আছে তা দেখাবে।  
 39 | 
 40 | ---
 41 | 
 42 | ### **🔹 4. `document.querySelector(selector)` - CSS Selector দিয়ে একক এলিমেন্ট সিলেক্ট করা**  
 43 | 👉 **প্রথম মিল খাওয়া এলিমেন্ট** রিটার্ন করে।  
 44 | ```js
 45 | let firstItem = document.querySelector(".item");
 46 | firstItem.style.color = "red";
 47 | ```
 48 | ✅ **ব্যাখ্যা:**  
 49 | প্রথম `.item` ক্লাসযুক্ত এলিমেন্টকে লাল করে দেবে।  
 50 | 
 51 | ---
 52 | 
 53 | ### **🔹 5. `document.querySelectorAll(selector)` - CSS Selector দিয়ে সব এলিমেন্ট সিলেক্ট করা**  
 54 | 👉 **সব মিল খাওয়া এলিমেন্ট** সংগ্রহ করে।  
 55 | ```js
 56 | let allItems = document.querySelectorAll(".item");
 57 | allItems.forEach(item => item.style.fontWeight = "bold");
 58 | ```
 59 | ✅ **ব্যাখ্যা:**  
 60 | সব `.item` এলিমেন্টকে বোল্ড করে দেবে।  
 61 | 
 62 | ---
 63 | 
 64 | ## **📌 2. Content Manipulation (কনটেন্ট পরিবর্তনের মেথড)**  
 65 | 
 66 | ### **🔹 6. `innerText` - শুধুমাত্র টেক্সট পরিবর্তন করা**  
 67 | ```js
 68 | document.getElementById("title").innerText = "New Title!";
 69 | ```
 70 | ✅ **ব্যাখ্যা:**  
 71 | এটি শুধুমাত্র টেক্সট পরিবর্তন করবে, কিন্তু কোনো HTML ট্যাগ ইনসার্ট করতে পারবে না।  
 72 | 
 73 | ---
 74 | 
 75 | ### **🔹 7. `innerHTML` - HTML সহ পরিবর্তন করা**  
 76 | ```js
 77 | document.getElementById("content").innerHTML = "<h2>Updated Content</h2>";
 78 | ```
 79 | ✅ **ব্যাখ্যা:**  
 80 | এটি **HTML সহ কনটেন্ট পরিবর্তন করতে পারে।**  
 81 | 
 82 | ---
 83 | 
 84 | ### **🔹 8. `textContent` - সব টেক্সট পরিবর্তন করা (hidden text সহ)**  
 85 | ```js
 86 | document.getElementById("title").textContent = "Updated Text!";
 87 | ```
 88 | ✅ **ব্যাখ্যা:**  
 89 | 👉 `innerText` এর মতোই, তবে এটি **hidden text**-ও পরিবর্তন করতে পারে।  
 90 | 
 91 | ---
 92 | 
 93 | ## **📌 3. Attribute Manipulation (অ্যাট্রিবিউট পরিবর্তনের মেথড)**  
 94 | 
 95 | ### **🔹 9. `setAttribute(attribute, value)` - নতুন অ্যাট্রিবিউট যোগ বা পরিবর্তন করা**  
 96 | ```js
 97 | document.getElementById("image").setAttribute("src", "new-image.jpg");
 98 | ```
 99 | ✅ **ব্যাখ্যা:**  
100 | 👉 `src` পরিবর্তন করে **নতুন ইমেজ সেট করবে**।  
101 | 
102 | ---
103 | 
104 | ### **🔹 10. `getAttribute(attribute)` - নির্দিষ্ট অ্যাট্রিবিউটের মান পাওয়া**  
105 | ```js
106 | let link = document.getElementById("myLink");
107 | console.log(link.getAttribute("href")); // লিংকের URL দেখাবে
108 | ```
109 | ✅ **ব্যাখ্যা:**  
110 | 👉 `href` এর মান দেখাবে।  
111 | 
112 | ---
113 | 
114 | ### **🔹 11. `removeAttribute(attribute)` - অ্যাট্রিবিউট রিমুভ করা**  
115 | ```js
116 | document.getElementById("image").removeAttribute("alt");
117 | ```
118 | ✅ **ব্যাখ্যা:**  
119 | 👉 **alt অ্যাট্রিবিউট রিমুভ করবে।**  
120 | 
121 | ---
122 | 
123 | ## **📌 4. Adding & Removing Elements (নতুন এলিমেন্ট যোগ বা ডিলিট করার মেথড)**  
124 | 
125 | ### **🔹 12. `createElement(tagName)` - নতুন এলিমেন্ট তৈরি করা**  
126 | ```js
127 | let newDiv = document.createElement("div");
128 | newDiv.innerText = "This is a new div!";
129 | document.body.appendChild(newDiv);
130 | ```
131 | ✅ **ব্যাখ্যা:**  
132 | 👉 এটি নতুন `<div>` তৈরি করে **body তে যোগ করবে**।  
133 | 
134 | ---
135 | 
136 | ### **🔹 13. `appendChild(newElement)` - একটি এলিমেন্টে নতুন এলিমেন্ট যোগ করা**  
137 | ```js
138 | let ul = document.getElementById("list");
139 | let newItem = document.createElement("li");
140 | newItem.innerText = "New List Item";
141 | ul.appendChild(newItem);
142 | ```
143 | ✅ **ব্যাখ্যা:**  
144 | 👉 `<ul>`-এর শেষে একটি নতুন `<li>` যোগ করবে।  
145 | 
146 | ---
147 | 
148 | ### **🔹 14. `removeChild(childElement)` - একটি নির্দিষ্ট এলিমেন্ট ডিলিট করা**  
149 | ```js
150 | let list = document.getElementById("list");
151 | let firstItem = list.firstElementChild;
152 | list.removeChild(firstItem);
153 | ```
154 | ✅ **ব্যাখ্যা:**  
155 | 👉 লিস্টের প্রথম এলিমেন্ট ডিলিট করবে।  
156 | 
157 | ---
158 | 
159 | ### **🔹 15. `replaceChild(newChild, oldChild)` - একটি এলিমেন্ট পরিবর্তন করা**  
160 | ```js
161 | let list = document.getElementById("list");
162 | let newItem = document.createElement("li");
163 | newItem.innerText = "Replaced Item";
164 | list.replaceChild(newItem, list.firstElementChild);
165 | ```
166 | ✅ **ব্যাখ্যা:**  
167 | 👉 লিস্টের প্রথম আইটেমকে নতুন আইটেম দিয়ে রিপ্লেস করবে।  
168 | 
169 | ---
170 | 
171 | ## **📌 5. Event Handling (ইভেন্ট হ্যান্ডলিং)**  
172 | 
173 | ### **🔹 16. `addEventListener(event, function)` - ইভেন্ট যোগ করা**  
174 | ```js
175 | document.getElementById("btn").addEventListener("click", function () {
176 |     alert("Button Clicked!");
177 | });
178 | ```
179 | ✅ **ব্যাখ্যা:**  
180 | 👉 যখন **"btn" আইডির** বাটনে ক্লিক করা হবে, তখন **অ্যালার্ট দেখাবে**।  
181 | 
182 | ---
183 | 
184 | ### **🔹 17. `removeEventListener(event, function)` - ইভেন্ট রিমুভ করা**  
185 | ```js
186 | function sayHello() {
187 |     console.log("Hello!");
188 | }
189 | document.getElementById("btn").addEventListener("click", sayHello);
190 | document.getElementById("btn").removeEventListener("click", sayHello);
191 | ```
192 | ✅ **ব্যাখ্যা:**  
193 | 👉 প্রথমে ইভেন্ট যোগ করা হয়েছিল, পরে তা রিমুভ করা হলো।  
194 | 
195 | ---
196 | 
197 | **🔹 এই মেথডগুলোর মাধ্যমে DOM ম্যানিপুলেশন সহজে করা যায়।** 😊  
198 | 


--------------------------------------------------------------------------------
/D. Loop/Loop-English.md:
--------------------------------------------------------------------------------
  1 | ## **JavaScript Loops - Everything You Need to Know (With Real-Life Examples)**  
  2 | 
  3 | ### **What is a Loop in JavaScript?**
  4 | A **loop** is a programming construct that allows you to execute a block of code multiple times until a specified condition is met. Loops help automate repetitive tasks, making your code more efficient and easier to maintain.
  5 | 
  6 | For example, if you want to print "Hello, World!" 10 times, instead of writing 10 `console.log()` statements, you can use a loop.
  7 | 
  8 | ---
  9 | 
 10 | ## **Types of Loops in JavaScript**
 11 | 1. **for loop**  
 12 | 2. **while loop**  
 13 | 3. **do...while loop**  
 14 | 4. **for...in loop** (for objects)  
 15 | 5. **for...of loop** (for arrays and iterables)  
 16 | 
 17 | ---
 18 | 
 19 | ## **1. `for` Loop**
 20 | The `for` loop is the most commonly used loop in JavaScript. It runs a block of code **a specific number of times**.
 21 | 
 22 | ### **Syntax:**
 23 | ```javascript
 24 | for (initialization; condition; increment/decrement) {
 25 |     // Code to execute
 26 | }
 27 | ```
 28 | 
 29 | ### **Example: Print numbers 1 to 5**
 30 | ```javascript
 31 | for (let i = 1; i <= 5; i++) {
 32 |     console.log(i);
 33 | }
 34 | ```
 35 | ### **Real-Life Example: Generating Invoice Numbers**
 36 | Imagine you are generating invoice numbers from **1001 to 1010**.
 37 | ```javascript
 38 | for (let invoice = 1001; invoice <= 1010; invoice++) {
 39 |     console.log("Invoice Number: " + invoice);
 40 | }
 41 | ```
 42 | 
 43 | ---
 44 | 
 45 | ## **2. `while` Loop**
 46 | The `while` loop runs **as long as the condition is true**.
 47 | 
 48 | ### **Syntax:**
 49 | ```javascript
 50 | while (condition) {
 51 |     // Code to execute
 52 | }
 53 | ```
 54 | 
 55 | ### **Example: Print numbers 1 to 5**
 56 | ```javascript
 57 | let i = 1;
 58 | while (i <= 5) {
 59 |     console.log(i);
 60 |     i++;
 61 | }
 62 | ```
 63 | 
 64 | ### **Real-Life Example: Counting Money in an ATM Machine**
 65 | Imagine an ATM is dispensing **$10 bills** until the balance is **$0**.
 66 | ```javascript
 67 | let balance = 50; // $50 available in ATM
 68 | while (balance > 0) {
 69 |     console.log("Dispensing $10 bill");
 70 |     balance -= 10;
 71 | }
 72 | console.log("No more cash available.");
 73 | ```
 74 | 
 75 | ---
 76 | 
 77 | ## **3. `do...while` Loop**
 78 | The `do...while` loop is similar to `while`, but **it always runs at least once** before checking the condition.
 79 | 
 80 | ### **Syntax:**
 81 | ```javascript
 82 | do {
 83 |     // Code to execute
 84 | } while (condition);
 85 | ```
 86 | 
 87 | ### **Example: Print numbers 1 to 5**
 88 | ```javascript
 89 | let i = 1;
 90 | do {
 91 |     console.log(i);
 92 |     i++;
 93 | } while (i <= 5);
 94 | ```
 95 | 
 96 | ### **Real-Life Example: Asking for User Input Until Correct**
 97 | Imagine asking for a **password** until the user enters the correct one.
 98 | ```javascript
 99 | let correctPassword = "1234";
100 | let userInput;
101 | 
102 | do {
103 |     userInput = prompt("Enter your password:");
104 | } while (userInput !== correctPassword);
105 | 
106 | console.log("Access granted!");
107 | ```
108 | 
109 | ---
110 | 
111 | ## **4. `for...in` Loop (For Objects)**
112 | The `for...in` loop is used to **iterate over object properties**.
113 | 
114 | ### **Syntax:**
115 | ```javascript
116 | for (let key in object) {
117 |     // Code to execute
118 | }
119 | ```
120 | 
121 | ### **Example: Loop Through an Object**
122 | ```javascript
123 | let person = {
124 |     name: "Shihab",
125 |     age: 25,
126 |     city: "Dhaka"
127 | };
128 | 
129 | for (let key in person) {
130 |     console.log(key + ": " + person[key]);
131 | }
132 | ```
133 | **Output:**
134 | ```
135 | name: Shihab
136 | age: 25
137 | city: Dhaka
138 | ```
139 | 
140 | ### **Real-Life Example: Displaying Product Information**
141 | Imagine you have product details stored in an object, and you want to display them.
142 | ```javascript
143 | let product = {
144 |     name: "Laptop",
145 |     price: "$1000",
146 |     brand: "HP"
147 | };
148 | 
149 | for (let key in product) {
150 |     console.log(key + ": " + product[key]);
151 | }
152 | ```
153 | 
154 | ---
155 | 
156 | ## **5. `for...of` Loop (For Arrays & Iterables)**
157 | The `for...of` loop is used to iterate over **arrays, strings, or any iterable object**.
158 | 
159 | ### **Syntax:**
160 | ```javascript
161 | for (let item of iterable) {
162 |     // Code to execute
163 | }
164 | ```
165 | 
166 | ### **Example: Loop Through an Array**
167 | ```javascript
168 | let colors = ["Red", "Green", "Blue"];
169 | 
170 | for (let color of colors) {
171 |     console.log(color);
172 | }
173 | ```
174 | **Output:**
175 | ```
176 | Red
177 | Green
178 | Blue
179 | ```
180 | 
181 | ### **Real-Life Example: Displaying a List of Students**
182 | Imagine you have a list of students and want to display their names.
183 | ```javascript
184 | let students = ["Shihab", "Ayesha", "Rahim"];
185 | 
186 | for (let student of students) {
187 |     console.log("Student: " + student);
188 | }
189 | ```
190 | 
191 | ---
192 | 
193 | ## **Loop Control Statements**
194 | - `break` → Stops the loop immediately.  
195 | - `continue` → Skips the current iteration and moves to the next.  
196 | 
197 | ### **Example: Stop Loop When a Certain Condition is Met**
198 | ```javascript
199 | for (let i = 1; i <= 10; i++) {
200 |     if (i === 5) {
201 |         console.log("Stopping loop at 5");
202 |         break;
203 |     }
204 |     console.log(i);
205 | }
206 | ```
207 | **Output:**
208 | ```
209 | 1
210 | 2
211 | 3
212 | 4
213 | Stopping loop at 5
214 | ```
215 | 
216 | ### **Example: Skip a Specific Value**
217 | ```javascript
218 | for (let i = 1; i <= 5; i++) {
219 |     if (i === 3) {
220 |         continue;  // Skips 3
221 |     }
222 |     console.log(i);
223 | }
224 | ```
225 | **Output:**
226 | ```
227 | 1
228 | 2
229 | 4
230 | 5
231 | ```
232 | 
233 | ---
234 | 
235 | ## **Final Thoughts**
236 | ### **Which Loop Should You Use?**
237 | | Loop Type | Best Used For |
238 | |-----------|--------------|
239 | | `for` | When you know the exact number of iterations |
240 | | `while` | When you don’t know the number of iterations in advance |
241 | | `do...while` | When the loop must run at least once |
242 | | `for...in` | When looping over object properties |
243 | | `for...of` | When looping over arrays or iterable objects |
244 | 
245 | ---
246 | 
247 | ## **Conclusion**
248 | JavaScript loops are **essential** for automating repetitive tasks. They make your code more **efficient, cleaner, and easier to manage**. By mastering loops, you can build **dynamic applications, automate workflows, and handle data more effectively**.
249 | 
250 | Would you like to practice with some real-world coding exercises? 🚀


--------------------------------------------------------------------------------
/B. Condition/Condition-English.md:
--------------------------------------------------------------------------------
  1 | ### **JavaScript Conditionals - Everything You Need to Know**
  2 | 
  3 | Conditionals in JavaScript are used to perform different actions based on different conditions. The basic idea is to check if something is true or false and then execute certain code based on that evaluation.
  4 | 
  5 | ---
  6 | 
  7 | ## **1. `if` Statement**
  8 | The `if` statement is used to execute a block of code only if a specified condition is true.
  9 | 
 10 | ### **Syntax:**
 11 | ```javascript
 12 | if (condition) {
 13 |     // Code to be executed if the condition is true
 14 | }
 15 | ```
 16 | 
 17 | ### **Example:**
 18 | ```javascript
 19 | let age = 18;
 20 | if (age >= 18) {
 21 |     console.log("You are an adult.");
 22 | }
 23 | // Output: "You are an adult."
 24 | ```
 25 | 
 26 | ---
 27 | 
 28 | ## **2. `if...else` Statement**
 29 | The `if...else` statement executes one block of code if the condition is true, and another block of code if the condition is false.
 30 | 
 31 | ### **Syntax:**
 32 | ```javascript
 33 | if (condition) {
 34 |     // Code to be executed if the condition is true
 35 | } else {
 36 |     // Code to be executed if the condition is false
 37 | }
 38 | ```
 39 | 
 40 | ### **Example:**
 41 | ```javascript
 42 | let age = 16;
 43 | if (age >= 18) {
 44 |     console.log("You are an adult.");
 45 | } else {
 46 |     console.log("You are a minor.");
 47 | }
 48 | // Output: "You are a minor."
 49 | ```
 50 | 
 51 | ---
 52 | 
 53 | ## **3. `else if` Statement**
 54 | The `else if` statement allows you to check multiple conditions. You can have multiple `else if` blocks, and the first one that evaluates to true will execute its code block.
 55 | 
 56 | ### **Syntax:**
 57 | ```javascript
 58 | if (condition1) {
 59 |     // Code to be executed if condition1 is true
 60 | } else if (condition2) {
 61 |     // Code to be executed if condition2 is true
 62 | } else {
 63 |     // Code to be executed if neither condition1 nor condition2 is true
 64 | }
 65 | ```
 66 | 
 67 | ### **Example:**
 68 | ```javascript
 69 | let temperature = 25;
 70 | 
 71 | if (temperature > 30) {
 72 |     console.log("It's a hot day.");
 73 | } else if (temperature > 20) {
 74 |     console.log("It's a warm day.");
 75 | } else {
 76 |     console.log("It's a cold day.");
 77 | }
 78 | // Output: "It's a warm day."
 79 | ```
 80 | 
 81 | ---
 82 | 
 83 | ## **4. Ternary (Conditional) Operator**
 84 | The ternary operator is a shorthand for `if...else` statements. It evaluates a condition and returns one of two values based on the condition's truth value.
 85 | 
 86 | ### **Syntax:**
 87 | ```javascript
 88 | condition ? expr1 : expr2
 89 | ```
 90 | 
 91 | - If the condition is true, `expr1` is executed.
 92 | - If the condition is false, `expr2` is executed.
 93 | 
 94 | ### **Example:**
 95 | ```javascript
 96 | let age = 20;
 97 | let result = (age >= 18) ? "Adult" : "Minor";
 98 | console.log(result);  // Output: "Adult"
 99 | ```
100 | 
101 | ---
102 | 
103 | ## **5. `switch` Statement**
104 | The `switch` statement is used to perform different actions based on multiple possible conditions. It is an alternative to using many `if...else if` statements.
105 | 
106 | ### **Syntax:**
107 | ```javascript
108 | switch (expression) {
109 |     case value1:
110 |         // Code to be executed if expression equals value1
111 |         break;
112 |     case value2:
113 |         // Code to be executed if expression equals value2
114 |         break;
115 |     default:
116 |         // Code to be executed if expression doesn't match any case
117 | }
118 | ```
119 | 
120 | ### **Example:**
121 | ```javascript
122 | let day = 2;
123 | let dayName;
124 | 
125 | switch (day) {
126 |     case 1:
127 |         dayName = "Monday";
128 |         break;
129 |     case 2:
130 |         dayName = "Tuesday";
131 |         break;
132 |     case 3:
133 |         dayName = "Wednesday";
134 |         break;
135 |     default:
136 |         dayName = "Unknown day";
137 | }
138 | 
139 | console.log(dayName);  // Output: "Tuesday"
140 | ```
141 | 
142 | ---
143 | 
144 | ## **6. Logical Operators in Conditions**
145 | You can combine multiple conditions using **logical operators** (`&&` for AND, `||` for OR, and `!` for NOT).
146 | 
147 | ### **Example with `&&` (AND):**
148 | ```javascript
149 | let age = 20;
150 | let hasTicket = true;
151 | 
152 | if (age >= 18 && hasTicket) {
153 |     console.log("You can enter the event.");
154 | }
155 | // Output: "You can enter the event."
156 | ```
157 | 
158 | ### **Example with `||` (OR):**
159 | ```javascript
160 | let age = 16;
161 | let hasPermission = true;
162 | 
163 | if (age >= 18 || hasPermission) {
164 |     console.log("You can enter the event.");
165 | }
166 | // Output: "You can enter the event."
167 | ```
168 | 
169 | ### **Example with `!` (NOT):**
170 | ```javascript
171 | let isRainy = false;
172 | 
173 | if (!isRainy) {
174 |     console.log("It's a sunny day!");
175 | }
176 | // Output: "It's a sunny day!"
177 | ```
178 | 
179 | ---
180 | 
181 | ## **7. Short-Circuit Evaluation**
182 | In JavaScript, conditions with logical operators (`&&` and `||`) can short-circuit, meaning they can stop evaluating as soon as the result is clear.
183 | 
184 | ### **Example with `&&` (AND):**
185 | ```javascript
186 | let age = 20;
187 | let hasTicket = false;
188 | 
189 | if (age >= 18 && hasTicket) {
190 |     console.log("You can enter.");
191 | } else {
192 |     console.log("You cannot enter.");
193 | }
194 | // Output: "You cannot enter."
195 | ```
196 | In this case, since `hasTicket` is `false`, JavaScript does not need to check further conditions.
197 | 
198 | ### **Example with `||` (OR):**
199 | ```javascript
200 | let age = 16;
201 | let hasPermission = true;
202 | 
203 | if (age >= 18 || hasPermission) {
204 |     console.log("You can enter.");
205 | }
206 | // Output: "You can enter."
207 | ```
208 | Here, since `hasPermission` is `true`, JavaScript doesn't even evaluate `age >= 18` because the result is already determined by the first condition.
209 | 
210 | ---
211 | 
212 | ## **8. Nested Conditionals**
213 | You can nest one conditional inside another for more complex logic.
214 | 
215 | ### **Example:**
216 | ```javascript
217 | let age = 25;
218 | let isStudent = true;
219 | 
220 | if (age >= 18) {
221 |     if (isStudent) {
222 |         console.log("You are an adult student.");
223 |     } else {
224 |         console.log("You are an adult.");
225 |     }
226 | } else {
227 |     console.log("You are a minor.");
228 | }
229 | // Output: "You are an adult student."
230 | ```
231 | 
232 | ---
233 | 
234 | ## **Conclusion**
235 | Conditionals are crucial for controlling the flow of a program based on different conditions. They allow you to make decisions in code and perform different actions depending on various scenarios.
236 | 
237 | Would you like to try some practice exercises using conditionals?


--------------------------------------------------------------------------------
/H. ES6/Bangla-ES6-Keywards.md:
--------------------------------------------------------------------------------
  1 | ES6 (ECMAScript 2015) JavaScript-এর সবচেয়ে শক্তিশালী এবং গুরুত্বপূর্ণ বৈশিষ্ট্যগুলি এনেছে, যা কোড লিখতে অনেক সুবিধা এবং সরলতা আনে। ES6-এর কিছু প্রধান বৈশিষ্ট্য বা "কিওয়ার্ড" এখানে ব্যাখ্যা করা হলো:
  2 | 
  3 | ### **1. `let` এবং `const`**
  4 | - **`let`**: এটি একটি ব্লক-স্কোপড (block-scoped) ভেরিয়েবল ডিক্লেয়ার করতে ব্যবহার হয়, যা `var` এর চেয়ে আরও নিরাপদ এবং পূর্বানুমানযোগ্য।
  5 | - **`const`**: এটি এমন ভেরিয়েবল ডিক্লেয়ার করতে ব্যবহৃত হয় যেগুলির মান পুনরায় নির্ধারণ করা যাবে না। এটি ইনমিউটেবল কোড লেখার জন্য উপকারী।
  6 | 
  7 | ```js
  8 | let x = 5;    // ব্লক-স্কোপড
  9 | const y = 10; // পুনরায় নির্ধারণ করা যাবে না
 10 | ```
 11 | 
 12 | ### **2. Arrow Functions (`=>`)**
 13 | এগুলি সংক্ষিপ্ত সিনট্যাক্সে ফাংশন এক্সপ্রেশন লিখতে সাহায্য করে এবং এটি `this` কে "লেক্সিক্যালি" ইনহেরিট করে, যা কলব্যাক ফাংশনগুলিতে খুব উপকারী।
 14 | 
 15 | ```js
 16 | // সাধারণ ফাংশন
 17 | function add(a, b) {
 18 |   return a + b;
 19 | }
 20 | 
 21 | // Arrow function
 22 | const add = (a, b) => a + b;
 23 | ```
 24 | 
 25 | ### **3. Template Literals (`` ` ``)**
 26 | এই ফিচারের মাধ্যমে আপনি স্ট্রিংয়ে এক্সপ্রেশন এম্বেড করতে পারবেন। `${}` ব্যবহার করে আপনি ভেরিয়েবল এবং এক্সপ্রেশনকে স্ট্রিংয়ের মধ্যে বসাতে পারেন।
 27 | 
 28 | ```js
 29 | const name = "John";
 30 | const greeting = `Hello, ${name}!`;  // "Hello, John!"
 31 | ```
 32 | 
 33 | ### **4. Destructuring Assignment**
 34 | এই ফিচারের মাধ্যমে আপনি অ্যারে বা অবজেক্ট থেকে ভ্যালু আলাদা আলাদা ভেরিয়েবলে বের করতে পারবেন। এটি কোডকে অনেক বেশি পাঠযোগ্য এবং সংক্ষিপ্ত করে তোলে।
 35 | 
 36 | - **Array Destructuring**:
 37 | ```js
 38 | let [a, b] = [1, 2]; // a = 1, b = 2
 39 | ```
 40 | 
 41 | - **Object Destructuring**:
 42 | ```js
 43 | let person = { name: "John", age: 25 };
 44 | let { name, age } = person;  // name = "John", age = 25
 45 | ```
 46 | 
 47 | ### **5. Spread Operator (`...`)**
 48 | স্প্রেড অপারেটর ব্যবহার করে আপনি অ্যারে বা অবজেক্টের উপাদানগুলোকে প্রসারিত বা বিস্তৃত করতে পারবেন।
 49 | 
 50 | - **Arrays**:
 51 | ```js
 52 | const arr1 = [1, 2];
 53 | const arr2 = [...arr1, 3, 4]; // arr2 = [1, 2, 3, 4]
 54 | ```
 55 | 
 56 | - **Objects**:
 57 | ```js
 58 | const obj1 = { a: 1, b: 2 };
 59 | const obj2 = { ...obj1, c: 3 };  // obj2 = { a: 1, b: 2, c: 3 }
 60 | ```
 61 | 
 62 | ### **6. Default Parameters**
 63 | ফাংশনের প্যারামিটারগুলির জন্য ডিফল্ট মান প্রদান করা যায়, যদি সেগুলি পাস না করা হয় বা `undefined` হয়।
 64 | 
 65 | ```js
 66 | function greet(name = "Guest") {
 67 |   console.log(`Hello, ${name}!`);
 68 | }
 69 | 
 70 | greet("Alice");  // Output: "Hello, Alice!"
 71 | greet();         // Output: "Hello, Guest!"
 72 | ```
 73 | 
 74 | ### **7. Rest Parameters (`...`)**
 75 | রেস্ট প্যারামিটার ফাংশনে একটি অপরিবর্তনীয় সংখ্যক আর্গুমেন্টকে অ্যারে হিসেবে গ্রহণ করতে ব্যবহৃত হয়।
 76 | 
 77 | ```js
 78 | function sum(...numbers) {
 79 |   return numbers.reduce((acc, num) => acc + num, 0);
 80 | }
 81 | 
 82 | console.log(sum(1, 2, 3));  // Output: 6
 83 | ```
 84 | 
 85 | ### **8. Classes**
 86 | ES6 এ অবজেক্ট-ওরিয়েন্টেড প্রোগ্রামিংয়ের জন্য `class` সিস্টেম এসেছে, যা `prototype` ভিত্তিক অবজেক্ট নির্মাণের তুলনায় আরও পরিচিত।
 87 | 
 88 | ```js
 89 | class Person {
 90 |   constructor(name, age) {
 91 |     this.name = name;
 92 |     this.age = age;
 93 |   }
 94 | 
 95 |   sayHello() {
 96 |     console.log(`Hello, my name is ${this.name}`);
 97 |   }
 98 | }
 99 | 
100 | const john = new Person("John", 30);
101 | john.sayHello();  // Output: "Hello, my name is John"
102 | ```
103 | 
104 | ### **9. Modules (`import` / `export`)**
105 | ES6 মডিউল সিস্টেমটি কোডের ভগ্নাংশ বা মডিউল তৈরি এবং একে অপরের মধ্যে ইম্পোর্ট/এক্সপোর্ট করার সুবিধা দেয়, যা কোডের পুনঃব্যবহারযোগ্যতা এবং সংগঠনে সহায়ক।
106 | 
107 | - **Exporting a function**:
108 | ```js
109 | export function greet(name) {
110 |   return `Hello, ${name}!`;
111 | }
112 | ```
113 | 
114 | - **Importing a function**:
115 | ```js
116 | import { greet } from './greet.js';
117 | ```
118 | 
119 | ### **10. Promises**
120 | প্রমিস হলো একটি প্লেসহোল্ডার যা ভবিষ্যতে কোন মান রেজলভ বা রিজেক্ট হবে তা প্রতীক্ষা করে। এটি অ্যাসিঙ্ক্রোনাস অপারেশনকে আরও কার্যকরভাবে পরিচালনা করতে সহায়ক।
121 | 
122 | ```js
123 | let promise = new Promise((resolve, reject) => {
124 |   let success = true;
125 |   
126 |   if (success) {
127 |     resolve("Operation was successful");
128 |   } else {
129 |     reject("Something went wrong");
130 |   }
131 | });
132 | 
133 | promise
134 |   .then(result => console.log(result))    // Output: "Operation was successful"
135 |   .catch(error => console.log(error));    // Output: "Something went wrong"
136 | ```
137 | 
138 | ### **11. `async` / `await`**
139 | `async` এবং `await` ব্যবহার করে অ্যাসিঙ্ক্রোনাস কোডকে আরও সিঙ্ক্রোনাসভাবে লেখা যায়।
140 | 
141 | ```js
142 | async function fetchData() {
143 |   let response = await fetch('https://jsonplaceholder.typicode.com/users');
144 |   let data = await response.json();
145 |   console.log(data);
146 | }
147 | 
148 | fetchData();
149 | ```
150 | 
151 | ### **12. `for...of` Loop**
152 | `for...of` লুপটি অ্যারে বা স্ট্রিংয়ের মতো ইটারেবল অবজেক্টের উপাদানগুলোকে লুপ করার জন্য ব্যবহৃত হয়।
153 | 
154 | ```js
155 | let arr = [10, 20, 30];
156 | 
157 | for (let num of arr) {
158 |   console.log(num);
159 | }
160 | // Output: 10, 20, 30
161 | ```
162 | 
163 | ### **13. `Map` এবং `Set`**
164 | - **`Map`**: এটি একটি কনটেইনার যেটি কী-ভ্যালু পেয়ার হিসাবে কাজ করে, যেখানে কী যেকোনো ডেটাটাইপ হতে পারে।
165 | ```js
166 | let map = new Map();
167 | map.set('name', 'John');
168 | map.set('age', 25);
169 | console.log(map.get('name')); // Output: "John"
170 | ```
171 | 
172 | - **`Set`**: এটি একটি সেট যা ইউনিক ভ্যালু (ডুপ্লিকেট না থাকা) ধারণ করে।
173 | ```js
174 | let set = new Set();
175 | set.add(1);
176 | set.add(2);
177 | set.add(2); // Duplicate, will be ignored
178 | console.log(set); // Output: Set { 1, 2 }
179 | ```
180 | 
181 | ---
182 | 
183 | ### **ES6 এর প্রধান বৈশিষ্ট্যগুলির সংক্ষিপ্ত বিবরণ:**
184 | 
185 | 1. **`let` / `const`** – ব্লক-স্কোপড ভেরিয়েবল
186 | 2. **Arrow functions** (`=>`) – সংক্ষিপ্ত ফাংশন সিনট্যাক্স
187 | 3. **Template literals** – স্ট্রিংয়ের মধ্যে এক্সপ্রেশন এম্বেড করা
188 | 4. **Destructuring** – অ্যারে/অবজেক্ট থেকে ভ্যালু বের করা
189 | 5. **Spread operator** (`...`) – অ্যারে/অবজেক্টের উপাদান প্রসারিত করা
190 | 6. **Default parameters** – ফাংশনের প্যারামিটারগুলির জন্য ডিফল্ট মান
191 | 7. **Rest parameters** (`...`) – ভেরিয়েবল আর্গুমেন্ট সংগ্রহ করা
192 | 8. **Classes** – অবজেক্ট-ওরিয়েন্টেড প্রোগ্রামিং
193 | 9. **Modules** (`import`/`export`) – কোডের ভগ্নাংশ তৈরি ও ব্যবহার
194 | 10. **Promises** – অ্যাসিঙ্ক্রোনাস অপারেশন পরিচালনা
195 | 11. **`async`/`await`** – সিঙ্ক্রোনাসের মতো অ্যাসিঙ্ক্রোনাস কোড লেখা
196 | 12. **`for...of`** – ইটারেবল অবজেক্টে লুপ করা
197 | 13. **`Map` / `Set`** – নতুন ডেটা স্ট্রাকচার
198 | 
199 | এসব ES6 বৈশিষ্ট্যগুলি JavaScript কোড লেখার জন্য আরও শক্তিশালী এবং সহজ করেছে। যদি কোন বিষয় সম্পর্কে বিস্তারিত জানতে চান, আমাকে জানাতে পারেন! 😊


--------------------------------------------------------------------------------
/H. ES6/Object-Method.md:
--------------------------------------------------------------------------------
  1 | ### **ES6 এবং পরবর্তী আপডেটের গুরুত্বপূর্ণ Object Methods**  
  2 | 
  3 | ES6 (ECMAScript 2015) এবং এর পরবর্তী সংস্করণগুলোতে (ES7, ES8, ইত্যাদি) অবজেক্ট নিয়ে কাজ করার জন্য অনেক শক্তিশালী মেথড যুক্ত হয়েছে। নিচে গুরুত্বপূর্ণ **Object Methods** ব্যাখ্যা করা হলো:
  4 | 
  5 | ---
  6 | 
  7 | ## **1. `Object.keys()` – অবজেক্টের সমস্ত কী (keys) পাওয়া**  
  8 | এই মেথডটি একটি অবজেক্টের **সকল কী (keys)** এর একটি অ্যারে রিটার্ন করে।
  9 | 
 10 | ```js
 11 | const person = { name: "John", age: 30, city: "New York" };
 12 | 
 13 | console.log(Object.keys(person));
 14 | // Output: ['name', 'age', 'city']
 15 | ```
 16 | 
 17 | ---
 18 | 
 19 | ## **2. `Object.values()` – অবজেক্টের সমস্ত মান (values) পাওয়া**  
 20 | এই মেথডটি একটি অবজেক্টের **সকল মান (values)** এর একটি অ্যারে রিটার্ন করে।
 21 | 
 22 | ```js
 23 | const person = { name: "John", age: 30, city: "New York" };
 24 | 
 25 | console.log(Object.values(person));
 26 | // Output: ['John', 30, 'New York']
 27 | ```
 28 | 
 29 | ---
 30 | 
 31 | ## **3. `Object.entries()` – কী-ভ্যালু জোড়া (key-value pairs) অ্যারে আকারে পাওয়া**  
 32 | এই মেথডটি অবজেক্টের **প্রতিটি কী এবং তার মানকে অ্যারেতে রূপান্তর করে।**
 33 | 
 34 | ```js
 35 | const person = { name: "John", age: 30, city: "New York" };
 36 | 
 37 | console.log(Object.entries(person));
 38 | // Output: [['name', 'John'], ['age', 30], ['city', 'New York']]
 39 | ```
 40 | 
 41 | ---
 42 | 
 43 | ## **4. `Object.assign()` – দুটি বা তার বেশি অবজেক্ট একত্র করা**  
 44 | এই মেথডটি একটি অবজেক্টের সাথে অন্য অবজেক্টের প্রপার্টি গুলো মার্জ (merge) করতে ব্যবহৃত হয়।
 45 | 
 46 | ```js
 47 | const obj1 = { a: 1, b: 2 };
 48 | const obj2 = { c: 3, d: 4 };
 49 | 
 50 | const mergedObj = Object.assign({}, obj1, obj2);
 51 | console.log(mergedObj);
 52 | // Output: { a: 1, b: 2, c: 3, d: 4 }
 53 | ```
 54 | 
 55 | ---
 56 | 
 57 | ## **5. `Object.freeze()` – অবজেক্ট পরিবর্তন প্রতিরোধ করা**  
 58 | এই মেথডটি অবজেক্টকে **ফ্রিজ (freeze)** করে, যাতে নতুন প্রপার্টি যোগ, মুছে ফেলা বা আপডেট করা যায় না।
 59 | 
 60 | ```js
 61 | const obj = { name: "John", age: 30 };
 62 | 
 63 | Object.freeze(obj);
 64 | 
 65 | obj.age = 35;  // পরিবর্তন সম্ভব নয়
 66 | obj.city = "New York";  // নতুন প্রপার্টি যোগ করা যাবে না
 67 | delete obj.name;  // ডিলিট করা যাবে না
 68 | 
 69 | console.log(obj);
 70 | // Output: { name: 'John', age: 30 }
 71 | ```
 72 | 
 73 | ---
 74 | 
 75 | ## **6. `Object.seal()` – নতুন প্রপার্টি যোগ করতে দেবে না, কিন্তু মান পরিবর্তন করা যাবে**  
 76 | `Object.seal()` মেথডটি `freeze()`-এর মতোই, তবে এখানে **বিদ্যমান প্রপার্টির মান পরিবর্তন করা যায়, কিন্তু নতুন কিছু যোগ বা মুছে ফেলা যায় না।**
 77 | 
 78 | ```js
 79 | const obj = { name: "John", age: 30 };
 80 | 
 81 | Object.seal(obj);
 82 | 
 83 | obj.age = 35;  // পরিবর্তন সম্ভব
 84 | obj.city = "New York";  // নতুন প্রপার্টি যোগ করা যাবে না
 85 | delete obj.name;  // ডিলিট করা যাবে না
 86 | 
 87 | console.log(obj);
 88 | // Output: { name: 'John', age: 35 }
 89 | ```
 90 | 
 91 | ---
 92 | 
 93 | ## **7. `Object.hasOwnProperty()` – অবজেক্টে নির্দিষ্ট কী আছে কি না তা চেক করা**  
 94 | এই মেথডটি চেক করে যে, অবজেক্টে কোনো নির্দিষ্ট **প্রপার্টি (key)** আছে কি না।
 95 | 
 96 | ```js
 97 | const person = { name: "John", age: 30 };
 98 | 
 99 | console.log(person.hasOwnProperty("name")); // Output: true
100 | console.log(person.hasOwnProperty("city")); // Output: false
101 | ```
102 | 
103 | ---
104 | 
105 | ## **8. `Object.getOwnPropertyNames()` – অবজেক্টের সমস্ত কী পাওয়া**  
106 | এই মেথডটি `Object.keys()`-এর মতোই কাজ করে, তবে এটি **`non-enumerable` প্রপার্টি** সহ সব কিছু রিটার্ন করে।
107 | 
108 | ```js
109 | const person = { name: "John", age: 30 };
110 | 
111 | console.log(Object.getOwnPropertyNames(person));
112 | // Output: ['name', 'age']
113 | ```
114 | 
115 | ---
116 | 
117 | ## **9. `Object.fromEntries()` – কী-ভ্যালু জোড়া থেকে অবজেক্ট তৈরি করা**  
118 | `Object.entries()` বিপরীত কাজ করে `Object.fromEntries()`, যা অ্যারে থেকে অবজেক্ট তৈরি করে।
119 | 
120 | ```js
121 | const entries = [['name', 'John'], ['age', 30]];
122 | 
123 | const person = Object.fromEntries(entries);
124 | console.log(person);
125 | // Output: { name: 'John', age: 30 }
126 | ```
127 | 
128 | ---
129 | 
130 | ## **10. `Object.is()` – দুইটি অবজেক্ট বা মান সমান কি না তা চেক করা**  
131 | এই মেথডটি `===` অপারেটরের মতো কাজ করে, তবে কিছু ব্যতিক্রম হ্যান্ডেল করতে পারে।
132 | 
133 | ```js
134 | console.log(Object.is(10, 10)); // Output: true
135 | console.log(Object.is({}, {})); // Output: false (কারণ আলাদা reference)
136 | console.log(Object.is(NaN, NaN)); // Output: true (সাধারণ === হলে false রিটার্ন করতো)
137 | ```
138 | 
139 | ---
140 | 
141 | ## **11. `Object.defineProperty()` – নতুন প্রপার্টি যোগ করে কাস্টম কনফিগারেশন সেট করা**  
142 | এই মেথডটি অবজেক্টের কোনো নির্দিষ্ট প্রপার্টির কনফিগারেশন সেট করতে ব্যবহৃত হয়।
143 | 
144 | ```js
145 | const person = {};
146 | 
147 | Object.defineProperty(person, 'name', {
148 |     value: 'John',
149 |     writable: false, // মান পরিবর্তন করা যাবে না
150 |     enumerable: true, // লুপে দেখা যাবে
151 |     configurable: false // মুছে ফেলা যাবে না
152 | });
153 | 
154 | console.log(person.name); // Output: 'John'
155 | 
156 | person.name = 'Doe'; // পরিবর্তন সম্ভব নয়
157 | console.log(person.name); // Output: 'John'
158 | ```
159 | 
160 | ---
161 | 
162 | ## **12. `Object.getPrototypeOf()` – অবজেক্টের প্রোটোটাইপ খুঁজে বের করা**  
163 | এই মেথডটি কোনো অবজেক্টের **প্রোটোটাইপ (prototype)** রিটার্ন করে।
164 | 
165 | ```js
166 | const obj = {};
167 | console.log(Object.getPrototypeOf(obj) === Object.prototype);
168 | // Output: true
169 | ```
170 | 
171 | ---
172 | 
173 | ## **13. `Object.setPrototypeOf()` – অবজেক্টের প্রোটোটাইপ সেট করা**  
174 | এই মেথডটি অবজেক্টের প্রোটোটাইপ পরিবর্তন করতে ব্যবহৃত হয়।
175 | 
176 | ```js
177 | const parent = { greet: function() { console.log("Hello!"); } };
178 | const child = {};
179 | 
180 | Object.setPrototypeOf(child, parent);
181 | child.greet();  // Output: Hello!
182 | ```
183 | 
184 | ---
185 | 
186 | ## **সংক্ষেপে**
187 | | Method | কাজ |
188 | |--------|-------|
189 | | `Object.keys()` | সব key (property) অ্যারে হিসেবে রিটার্ন করে |
190 | | `Object.values()` | সব value অ্যারে হিসেবে রিটার্ন করে |
191 | | `Object.entries()` | key-value অ্যারে আকারে রিটার্ন করে |
192 | | `Object.assign()` | অবজেক্ট মার্জ করে |
193 | | `Object.freeze()` | অবজেক্ট পরিবর্তন প্রতিরোধ করে |
194 | | `Object.seal()` | নতুন প্রপার্টি যোগ করতে দেবে না, কিন্তু মান পরিবর্তন করা যাবে |
195 | | `Object.hasOwnProperty()` | অবজেক্টে নির্দিষ্ট প্রপার্টি আছে কিনা চেক করে |
196 | | `Object.getOwnPropertyNames()` | সব প্রপার্টি রিটার্ন করে (non-enumerable সহ) |
197 | | `Object.fromEntries()` | key-value পেয়ার থেকে অবজেক্ট তৈরি করে |
198 | | `Object.is()` | দুইটি মান বা অবজেক্ট সমান কি না চেক করে |
199 | | `Object.defineProperty()` | প্রপার্টির কনফিগারেশন সেট করে |
200 | | `Object.getPrototypeOf()` | অবজেক্টের প্রোটোটাইপ খুঁজে বের করে |
201 | | `Object.setPrototypeOf()` | অবজেক্টের প্রোটোটাইপ পরিবর্তন করে |
202 | 
203 | ---
204 | 
205 | **এই মেথডগুলো অবজেক্ট নিয়ে কাজ করার জন্য খুবই গুরুত্বপূর্ণ। 


--------------------------------------------------------------------------------
/H. ES6/API.md:
--------------------------------------------------------------------------------
  1 | # **🔹 API (Application Programming Interface) All About**  
  2 | 
  3 | ✅ **API (Application Programming Interface)** হলো **একটি মাধ্যম**, যা সফটওয়্যার, ওয়েবসাইট বা অ্যাপের মধ্যে **data exchange** করতে সাহায্য করে।  
  4 | ✅ এটি **সার্ভার এবং ক্লায়েন্টের মধ্যে যোগাযোগের মাধ্যম** হিসাবে কাজ করে।  
  5 | ✅ API সাধারণত **JSON format-এ data send/receive করে।**  
  6 | 
  7 | ---
  8 | 
  9 | # **🔹 API কিভাবে কাজ করে?**  
 10 | 👉 API মূলত **Client (যেমন: Browser, Mobile App) ও Server (Database, Backend System)-এর মধ্যে তথ্য আদান-প্রদান করে।**  
 11 | 
 12 | ### **💡 API Workflow:**  
 13 | 1️⃣ **User Request পাঠায়** → (Browser বা Mobile App থেকে API call করা হয়)  
 14 | 2️⃣ **Server API Request গ্রহণ করে** → (Backend API request process করে)  
 15 | 3️⃣ **Server Response পাঠায়** → (API Response হিসাবে JSON data পাঠায়)  
 16 | 4️⃣ **User Response পায়** → (Frontend response data show করে)  
 17 | 
 18 | 🔥 **API সাধারণত HTTP Request Method ব্যবহার করে:**  
 19 | ✅ **GET** → ডাটা আনার জন্য  
 20 | ✅ **POST** → নতুন ডাটা পাঠানোর জন্য  
 21 | ✅ **PUT/PATCH** → বিদ্যমান ডাটা আপডেটের জন্য  
 22 | ✅ **DELETE** → ডাটা মুছে ফেলার জন্য  
 23 | 
 24 | ---
 25 | 
 26 | # **🔹 API Types (API-এর ধরণ)**  
 27 | ✅ **1️⃣ REST API** → Web API, যা **HTTP request ব্যবহার করে data exchange করে।**  
 28 | ✅ **2️⃣ SOAP API** → XML-based API, সাধারণত **বড় প্রতিষ্ঠান ব্যবহার করে।**  
 29 | ✅ **3️⃣ GraphQL API** → Client যে ডাটা চায়, ঠিক সেই data return করে।  
 30 | ✅ **4️⃣ WebSocket API** → **Real-time communication (Chat, Notifications, Live Updates)** এর জন্য ব্যবহৃত হয়।  
 31 | 
 32 | ---
 33 | 
 34 | # **🔹 API এর বাস্তব ব্যবহার (Real-life Examples of API)**  
 35 | ✅ **1️⃣ Weather API:** Current Weather & Forecast দেখানোর জন্য।  
 36 | ✅ **2️⃣ Payment API:** Online Payment (PayPal, Stripe, bKash)।  
 37 | ✅ **3️⃣ Google Maps API:** ওয়েবসাইট বা অ্যাপে মানচিত্র দেখানোর জন্য।  
 38 | ✅ **4️⃣ Social Media API:** Facebook, Twitter, Instagram Authentication & Post Fetch করার জন্য।  
 39 | ✅ **5️⃣ E-commerce API:** Product Data, Payment, Inventory Management ইত্যাদি।  
 40 | 
 41 | ---
 42 | 
 43 | # **🔹 API Methods (HTTP Request Methods) with Real Examples**  
 44 | 
 45 | ### **✅ 1️⃣ GET Request (API থেকে ডাটা নেওয়া)**
 46 | 👉 **Arrow Function + `async/await` ব্যবহার করে API থেকে JSON data লোড করা**  
 47 | ```js
 48 | const fetchUsers = async () => {
 49 |     try {
 50 |         let response = await fetch('https://jsonplaceholder.typicode.com/users');
 51 |         let data = await response.json();
 52 |         console.log(data);
 53 |     } catch (error) {
 54 |         console.error("Error:", error.message);
 55 |     }
 56 | };
 57 | 
 58 | fetchUsers();
 59 | ```
 60 | **🔥 Output:**  
 61 | 👉 API থেকে **10 জন ইউজারের JSON ডাটা পাওয়া যাবে।**  
 62 | 
 63 | ---
 64 | 
 65 | ### **✅ 2️⃣ POST Request (API তে নতুন ডাটা পাঠানো)**  
 66 | 👉 **Arrow Function ব্যবহার করে API-তে নতুন ডাটা পাঠানো (Create New User)**  
 67 | 
 68 | ```js
 69 | const createUser = async () => {
 70 |     try {
 71 |         let response = await fetch('https://jsonplaceholder.typicode.com/users', {
 72 |             method: "POST",
 73 |             headers: {
 74 |                 "Content-Type": "application/json"
 75 |             },
 76 |             body: JSON.stringify({
 77 |                 name: "John Doe",
 78 |                 email: "john@example.com"
 79 |             })
 80 |         });
 81 | 
 82 |         let data = await response.json();
 83 |         console.log("User Created:", data);
 84 |     } catch (error) {
 85 |         console.error("Error:", error.message);
 86 |     }
 87 | };
 88 | 
 89 | createUser();
 90 | ```
 91 | **🔥 Output:**  
 92 | 👉 নতুন ইউজার তৈরি হয়ে **API থেকে নতুন ইউজারের JSON ডাটা ফেরত আসবে।**  
 93 | 
 94 | ---
 95 | 
 96 | ### **✅ 3️⃣ PUT Request (API তে বিদ্যমান ডাটা আপডেট করা)**  
 97 | 👉 **Arrow Function দিয়ে ইউজারের ডাটা আপডেট করা**  
 98 | 
 99 | ```js
100 | const updateUser = async (userId) => {
101 |     try {
102 |         let response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`, {
103 |             method: "PUT",
104 |             headers: {
105 |                 "Content-Type": "application/json"
106 |             },
107 |             body: JSON.stringify({
108 |                 name: "Updated Name",
109 |                 email: "updated@example.com"
110 |             })
111 |         });
112 | 
113 |         let data = await response.json();
114 |         console.log("User Updated:", data);
115 |     } catch (error) {
116 |         console.error("Error:", error.message);
117 |     }
118 | };
119 | 
120 | updateUser(1);
121 | ```
122 | 👉 **ইউজারের `name` ও `email` আপডেট করা হয়েছে।**  
123 | 
124 | ---
125 | 
126 | ### **✅ 4️⃣ PATCH Request (Specific Data Update করা)**  
127 | ```js
128 | const patchUser = async (userId) => {
129 |     try {
130 |         let response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`, {
131 |             method: "PATCH",
132 |             headers: {
133 |                 "Content-Type": "application/json"
134 |             },
135 |             body: JSON.stringify({
136 |                 email: "patched@example.com"
137 |             })
138 |         });
139 | 
140 |         let data = await response.json();
141 |         console.log("User Patched:", data);
142 |     } catch (error) {
143 |         console.error("Error:", error.message);
144 |     }
145 | };
146 | 
147 | patchUser(1);
148 | ```
149 | 👉 **শুধুমাত্র `email` ফিল্ড আপডেট করা হয়েছে।**  
150 | 
151 | ---
152 | 
153 | ### **✅ 5️⃣ DELETE Request (API থেকে ডাটা মুছে ফেলা)**  
154 | 👉 **Arrow Function দিয়ে API থেকে ইউজার ডিলিট করা**  
155 | 
156 | ```js
157 | const deleteUser = async (userId) => {
158 |     try {
159 |         let response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`, {
160 |             method: "DELETE"
161 |         });
162 | 
163 |         console.log("User Deleted:", userId);
164 |     } catch (error) {
165 |         console.error("Error:", error.message);
166 |     }
167 | };
168 | 
169 | deleteUser(1);
170 | ```
171 | 👉 **এই API কল করলে ইউজার ডিলিট হয়ে যাবে।**  
172 | 
173 | ---
174 | 
175 | # **🔹 API Authentication & Security**  
176 | ✅ **1️⃣ API Key** → Unique Key, যা API ব্যবহার করার অনুমতি দেয়।  
177 | ✅ **2️⃣ OAuth** → Secure Authentication (Google Login, Facebook Login)।  
178 | ✅ **3️⃣ JWT (JSON Web Token)** → User Authentication & Authorization।  
179 | ✅ **4️⃣ Rate Limiting** → API ব্যবহার করার লিমিট সেট করা হয়।  
180 | 
181 | ---
182 | 
183 | # **📌 সংক্ষেপে (API Summary)**  
184 | ✔️ **API হল সফটওয়্যার/ওয়েবসাইটের মধ্যে ডাটা আদান-প্রদানের মাধ্যম।**  
185 | ✔️ **HTTP Request Methods (GET, POST, PUT, PATCH, DELETE) ব্যবহার করে API ডাটা নিয়ন্ত্রণ করে।**  
186 | ✔️ **`fetch()` ও `async/await` ব্যবহার করে API কল করা যায়।**  
187 | ✔️ **API Authentication (API Key, OAuth, JWT) ব্যবহার করে Security বাড়ানো হয়।**  
188 | ✔️ **API ব্যবহার করে Real-time Data Fetch করা যায়।**  
189 | 
190 | ---


--------------------------------------------------------------------------------
/H. ES6/English-ES6-Keywards.md:
--------------------------------------------------------------------------------
  1 | In **ES6 (ECMAScript 2015)**, a number of powerful and useful features were introduced, which significantly enhanced JavaScript's capabilities. Below are some of the most important and powerful features (or "keywords") introduced in ES6:
  2 | 
  3 | ### **1. `let` and `const`**  
  4 | - **`let`** allows you to declare variables that are block-scoped (only accessible inside the block where they're declared). This is more predictable and safer than `var`, which is function-scoped.
  5 | - **`const`** is used to declare variables that **cannot be reassigned** once they are assigned a value. This ensures immutability in your code.
  6 |   
  7 | ```js
  8 | let x = 5;    // Block-scoped
  9 | const y = 10; // Cannot be reassigned
 10 | ```
 11 | 
 12 | ### **2. Arrow Functions (`=>`)**
 13 | Arrow functions provide a concise syntax to write function expressions. They also don't have their own `this`, which is particularly useful when working with callbacks.
 14 | 
 15 | ```js
 16 | // Regular function
 17 | function add(a, b) {
 18 |   return a + b;
 19 | }
 20 | 
 21 | // Arrow function
 22 | const add = (a, b) => a + b;
 23 | ```
 24 | 
 25 | ### **3. Template Literals (`` ` ``)**
 26 | Template literals allow you to embed expressions inside strings using backticks (`` ` ``) instead of quotes. You can use `${}` to embed variables and expressions.
 27 | 
 28 | ```js
 29 | const name = "John";
 30 | const greeting = `Hello, ${name}!`;  // "Hello, John!"
 31 | ```
 32 | 
 33 | ### **4. Destructuring Assignment**
 34 | Destructuring allows you to unpack values from arrays or properties from objects into distinct variables in a more readable and concise manner.
 35 | 
 36 | - **Array Destructuring:**
 37 | ```js
 38 | let [a, b] = [1, 2]; // a = 1, b = 2
 39 | ```
 40 | 
 41 | - **Object Destructuring:**
 42 | ```js
 43 | let person = { name: "John", age: 25 };
 44 | let { name, age } = person;  // name = "John", age = 25
 45 | ```
 46 | 
 47 | ### **5. Spread Operator (`...`)**
 48 | The spread operator allows you to expand or spread elements from an array or object. It makes working with collections more flexible.
 49 | 
 50 | - **Arrays:**
 51 | ```js
 52 | const arr1 = [1, 2];
 53 | const arr2 = [...arr1, 3, 4]; // arr2 = [1, 2, 3, 4]
 54 | ```
 55 | 
 56 | - **Objects:**
 57 | ```js
 58 | const obj1 = { a: 1, b: 2 };
 59 | const obj2 = { ...obj1, c: 3 };  // obj2 = { a: 1, b: 2, c: 3 }
 60 | ```
 61 | 
 62 | ### **6. Default Parameters**
 63 | You can provide default values for function parameters in case they are not passed or are `undefined`.
 64 | 
 65 | ```js
 66 | function greet(name = "Guest") {
 67 |   console.log(`Hello, ${name}!`);
 68 | }
 69 | 
 70 | greet("Alice");  // Output: "Hello, Alice!"
 71 | greet();         // Output: "Hello, Guest!"
 72 | ```
 73 | 
 74 | ### **7. Rest Parameters (`...`)**
 75 | The rest parameter allows you to represent an indefinite number of arguments as an array in function definitions.
 76 | 
 77 | ```js
 78 | function sum(...numbers) {
 79 |   return numbers.reduce((acc, num) => acc + num, 0);
 80 | }
 81 | 
 82 | console.log(sum(1, 2, 3));  // Output: 6
 83 | ```
 84 | 
 85 | ### **8. Classes**
 86 | ES6 introduced the `class` syntax to define objects and deal with inheritance in a more familiar way (for those coming from object-oriented languages like Java or C#).
 87 | 
 88 | ```js
 89 | class Person {
 90 |   constructor(name, age) {
 91 |     this.name = name;
 92 |     this.age = age;
 93 |   }
 94 | 
 95 |   sayHello() {
 96 |     console.log(`Hello, my name is ${this.name}`);
 97 |   }
 98 | }
 99 | 
100 | const john = new Person("John", 30);
101 | john.sayHello();  // Output: "Hello, my name is John"
102 | ```
103 | 
104 | ### **9. Modules (`import` / `export`)**
105 | ES6 modules allow you to break your code into smaller files and import/export code between them. This helps with better code organization and reusability.
106 | 
107 | - **Exporting a function:**
108 | ```js
109 | export function greet(name) {
110 |   return `Hello, ${name}!`;
111 | }
112 | ```
113 | 
114 | - **Importing a function:**
115 | ```js
116 | import { greet } from './greet.js';
117 | ```
118 | 
119 | ### **10. Promises**
120 | A promise is a placeholder for a value that will be resolved or rejected in the future. It’s widely used to handle asynchronous operations.
121 | 
122 | ```js
123 | let promise = new Promise((resolve, reject) => {
124 |   let success = true;
125 |   
126 |   if (success) {
127 |     resolve("Operation was successful");
128 |   } else {
129 |     reject("Something went wrong");
130 |   }
131 | });
132 | 
133 | promise
134 |   .then(result => console.log(result))    // Output: "Operation was successful"
135 |   .catch(error => console.log(error));    // Output: "Something went wrong"
136 | ```
137 | 
138 | ### **11. `async` / `await`**
139 | `async` and `await` allow you to write asynchronous code in a more synchronous-like manner. `async` is used to define an asynchronous function, and `await` pauses the function until the promise is resolved.
140 | 
141 | ```js
142 | async function fetchData() {
143 |   let response = await fetch('https://jsonplaceholder.typicode.com/users');
144 |   let data = await response.json();
145 |   console.log(data);
146 | }
147 | 
148 | fetchData();
149 | ```
150 | 
151 | ### **12. `for...of` Loop**
152 | The `for...of` loop allows you to loop through the elements of an iterable object (like an array or a string).
153 | 
154 | ```js
155 | let arr = [10, 20, 30];
156 | 
157 | for (let num of arr) {
158 |   console.log(num);
159 | }
160 | // Output: 10, 20, 30
161 | ```
162 | 
163 | ### **13. `Map` and `Set`**
164 | - **`Map`**: A collection of key-value pairs where keys can be any datatype.
165 | ```js
166 | let map = new Map();
167 | map.set('name', 'John');
168 | map.set('age', 25);
169 | console.log(map.get('name')); // Output: "John"
170 | ```
171 | 
172 | - **`Set`**: A collection of unique values (no duplicates).
173 | ```js
174 | let set = new Set();
175 | set.add(1);
176 | set.add(2);
177 | set.add(2); // Duplicate, will be ignored
178 | console.log(set); // Output: Set { 1, 2 }
179 | ```
180 | 
181 | ---
182 | 
183 | ### **Summary of Powerful ES6 Features:**
184 | 
185 | 1. **`let` / `const`** – Block-scoped variables
186 | 2. **Arrow functions** (`=>`) – Concise function syntax
187 | 3. **Template literals** – Interpolating variables into strings
188 | 4. **Destructuring** – Extracting values from arrays/objects
189 | 5. **Spread operator** (`...`) – Expanding values in arrays/objects
190 | 6. **Default parameters** – Default values for function parameters
191 | 7. **Rest parameters** (`...`) – Collecting arguments into an array
192 | 8. **Classes** – Object-oriented approach to JavaScript
193 | 9. **Modules** (`import`/`export`) – Modular code
194 | 10. **Promises** – Asynchronous programming
195 | 11. **`async`/`await`** – Synchronous-like asynchronous code
196 | 12. **`for...of`** – Loop through iterable objects
197 | 13. **`Map` / `Set`** – New data structures for collections
198 | 
199 | These ES6 features make JavaScript easier, more flexible, and more powerful to work with.


--------------------------------------------------------------------------------
/A. Operator/Operator-English.md:
--------------------------------------------------------------------------------
  1 | ### **JavaScript Operators - Everything You Need to Know**
  2 | 
  3 | Operators in JavaScript are symbols or keywords used to perform operations on variables and values. They can be classified into several types based on their function.
  4 | 
  5 | ---
  6 | 
  7 | ## **1. Arithmetic Operators**
  8 | These operators are used to perform basic mathematical operations:
  9 | 
 10 | | Operator | Description           | Example        | Result |
 11 | |----------|-----------------------|----------------|--------|
 12 | | `+`      | Addition              | `5 + 3`        | `8`    |
 13 | | `-`      | Subtraction           | `5 - 3`        | `2`    |
 14 | | `*`      | Multiplication        | `5 * 3`        | `15`   |
 15 | | `/`      | Division              | `6 / 3`        | `2`    |
 16 | | `%`      | Modulo (Remainder)    | `5 % 3`        | `2`    |
 17 | | `**`     | Exponentiation        | `2 ** 3`       | `8`    |
 18 | 
 19 | ### **Examples:**
 20 | ```javascript
 21 | let a = 10, b = 3;
 22 | console.log(a + b);  // Output: 13 (Addition)
 23 | console.log(a - b);  // Output: 7  (Subtraction)
 24 | console.log(a * b);  // Output: 30 (Multiplication)
 25 | console.log(a / b);  // Output: 3.333 (Division)
 26 | console.log(a % b);  // Output: 1  (Modulo)
 27 | console.log(2 ** 3); // Output: 8  (Exponentiation)
 28 | ```
 29 | 
 30 | ---
 31 | 
 32 | ## **2. Assignment Operators**
 33 | These operators are used to assign values to variables:
 34 | 
 35 | | Operator | Description                 | Example    | Result |
 36 | |----------|-----------------------------|------------|--------|
 37 | | `=`      | Assigns value to a variable  | `x = 5`    | `x = 5`|
 38 | | `+=`     | Adds and assigns value       | `x += 3`   | `x = x + 3`|
 39 | | `-=`     | Subtracts and assigns value  | `x -= 2`   | `x = x - 2`|
 40 | | `*=`     | Multiplies and assigns value | `x *= 2`   | `x = x * 2`|
 41 | | `/=`     | Divides and assigns value    | `x /= 2`   | `x = x / 2`|
 42 | | `%=`     | Assigns the remainder        | `x %= 2`   | `x = x % 2`|
 43 | 
 44 | ### **Examples:**
 45 | ```javascript
 46 | let x = 5;
 47 | x += 3;  // x = x + 3, Result: x = 8
 48 | x -= 2;  // x = x - 2, Result: x = 6
 49 | x *= 2;  // x = x * 2, Result: x = 12
 50 | x /= 4;  // x = x / 4, Result: x = 3
 51 | ```
 52 | 
 53 | ---
 54 | 
 55 | ## **3. Comparison Operators**
 56 | These operators are used to compare values and return a boolean (`true` or `false`):
 57 | 
 58 | | Operator | Description                | Example      | Result |
 59 | |----------|----------------------------|--------------|--------|
 60 | | `==`     | Equal to (value only)       | `5 == "5"`   | `true` |
 61 | | `===`    | Equal to (value and type)   | `5 === "5"`  | `false`|
 62 | | `!=`     | Not equal to (value only)   | `5 != 3`     | `true` |
 63 | | `!==`    | Not equal to (value and type)| `5 !== "5"`  | `true` |
 64 | | `>`      | Greater than                | `5 > 3`      | `true` |
 65 | | `<`      | Less than                   | `5 < 3`      | `false`|
 66 | | `>=`     | Greater than or equal to    | `5 >= 3`     | `true` |
 67 | | `<=`     | Less than or equal to       | `5 <= 3`     | `false`|
 68 | 
 69 | ### **Examples:**
 70 | ```javascript
 71 | console.log(5 == "5");   // Output: true
 72 | console.log(5 === "5");  // Output: false
 73 | console.log(5 != 3);     // Output: true
 74 | console.log(5 > 3);      // Output: true
 75 | console.log(5 <= 3);     // Output: false
 76 | ```
 77 | 
 78 | ---
 79 | 
 80 | ## **4. Logical Operators**
 81 | Logical operators are used to combine multiple conditions.
 82 | 
 83 | | Operator | Description       | Example               | Result |
 84 | |----------|-------------------|-----------------------|--------|
 85 | | `&&`     | AND               | `true && false`       | `false`|
 86 | | `||`     | OR                | `true || false`       | `true` |
 87 | | `!`      | NOT               | `!true`               | `false`|
 88 | 
 89 | ### **Examples:**
 90 | ```javascript
 91 | console.log(true && false);   // Output: false
 92 | console.log(true || false);   // Output: true
 93 | console.log(!true);           // Output: false
 94 | ```
 95 | 
 96 | ---
 97 | 
 98 | ## **5. Unary Operators**
 99 | These operators work on a single operand.
100 | 
101 | | Operator | Description        | Example          | Result |
102 | |----------|--------------------|------------------|--------|
103 | | `++`     | Increment (Add 1)   | `x++` or `++x`   | `x = x + 1` |
104 | | `--`     | Decrement (Subtract 1)| `x--` or `--x`  | `x = x - 1` |
105 | | `typeof` | Returns type of operand| `typeof x`     | `"number"` |
106 | | `!`      | Logical NOT         | `!true`          | `false` |
107 | 
108 | ### **Examples:**
109 | ```javascript
110 | let x = 5;
111 | console.log(x++);  // Output: 5 (Post-increment)
112 | console.log(++x);  // Output: 7 (Pre-increment)
113 | 
114 | console.log(typeof "Hello"); // Output: "string"
115 | console.log(typeof 5);       // Output: "number"
116 | ```
117 | 
118 | ---
119 | 
120 | ## **6. Ternary (Conditional) Operator**
121 | The ternary operator is a shorthand for `if-else` statements.
122 | 
123 | | Operator | Description                    | Example                            | Result   |
124 | |----------|----------------------------------|------------------------------------|----------|
125 | | `? :`    | Conditional (if-else shorthand)  | `condition ? expr1 : expr2`        | Returns `expr1` if condition is true, `expr2` if false |
126 | 
127 | ### **Example:**
128 | ```javascript
129 | let age = 20;
130 | let result = (age >= 18) ? "Adult" : "Minor";
131 | console.log(result);  // Output: "Adult"
132 | ```
133 | 
134 | ---
135 | 
136 | ## **7. Type Operators**
137 | These operators are used to work with data types.
138 | 
139 | | Operator  | Description           | Example             | Result   |
140 | |-----------|-----------------------|---------------------|----------|
141 | | `typeof`  | Returns the data type | `typeof 10`         | `"number"` |
142 | | `instanceof` | Checks if an object is an instance of a class | `obj instanceof Array` | `true` or `false` |
143 | 
144 | ### **Examples:**
145 | ```javascript
146 | console.log(typeof 10);       // Output: "number"
147 | console.log([1, 2] instanceof Array);  // Output: true
148 | ```
149 | 
150 | ---
151 | 
152 | ## **8. Bitwise Operators**
153 | These operators perform bit-level operations on numbers:
154 | 
155 | | Operator  | Description         | Example      | Result   |
156 | |-----------|---------------------|--------------|----------|
157 | | `&`       | AND                 | `5 & 3`      | `1`      |
158 | | `|`       | OR                  | `5 | 3`      | `7`      |
159 | | `^`       | XOR (Exclusive OR)  | `5 ^ 3`      | `6`      |
160 | | `~`       | NOT                 | `~5`         | `-6`     |
161 | | `<<`      | Left shift          | `5 << 1`     | `10`     |
162 | | `>>`      | Right shift         | `5 >> 1`     | `2`      |
163 | | `>>>`     | Zero-fill right shift | `-5 >>> 1`  | `2147483642` |
164 | 
165 | ### **Example:**
166 | ```javascript
167 | console.log(5 & 3); // Output: 1
168 | console.log(5 | 3); // Output: 7
169 | ```
170 | 
171 | ---
172 | 
173 | ### **Conclusion**
174 | JavaScript has a wide range of operators to perform various operations. Understanding these operators is essential for effective programming.  
175 | Would you like to try out some exercises or examples with these operators?


--------------------------------------------------------------------------------
/A. Operator/Operator-Bangla.md:
--------------------------------------------------------------------------------
  1 | ### **📌 জাভাস্ক্রিপ্ট অপারেটর (Operators) সম্পর্কে সম্পূর্ণ গাইড**  
  2 | 
  3 | অপারেটর হল এমন কিছু চিহ্ন বা প্রতীক যা ভেরিয়েবল বা মানের উপর নির্দিষ্ট অপারেশন (গাণিতিক, তুলনা, লজিক্যাল, ইত্যাদি) সম্পাদন করতে ব্যবহৃত হয়।  
  4 | 
  5 | ---
  6 | 
  7 | ## **🔹 জাভাস্ক্রিপ্ট অপারেটরের প্রকারভেদ**  
  8 | 
  9 | ✅ **Arithmetic Operators** (গাণিতিক অপারেটর)  
 10 | ✅ **Assignment Operators** (নির্ধারণ অপারেটর)  
 11 | ✅ **Comparison Operators** (তুলনামূলক অপারেটর)  
 12 | ✅ **Logical Operators** (যৌক্তিক অপারেটর)  
 13 | ✅ **Bitwise Operators** (বিটওয়াইজ অপারেটর)  
 14 | ✅ **Ternary Operator** (টারনারি অপারেটর)  
 15 | ✅ **Type Operators** (টাইপ চেক করার অপারেটর)  
 16 | 
 17 | ---
 18 | 
 19 | ## **🔹 ১. গাণিতিক অপারেটর (Arithmetic Operators)**  
 20 | গাণিতিক অপারেটর সংখ্যা বা গাণিতিক মান নিয়ে কাজ করে।  
 21 | 
 22 | | অপারেটর | কাজ | উদাহরণ | আউটপুট |
 23 | |----------|---------|-----------|---------|
 24 | | `+` | যোগ | `10 + 5` | `15` |
 25 | | `-` | বিয়োগ | `10 - 5` | `5` |
 26 | | `*` | গুণ | `10 * 5` | `50` |
 27 | | `/` | ভাগ | `10 / 5` | `2` |
 28 | | `%` | ভাগশেষ | `10 % 3` | `1` |
 29 | | `**` | ঘাত (Exponentiation) | `2 ** 3` | `8` |
 30 | | `++` | ইনক্রিমেন্ট (১ বাড়ানো) | `let a = 5; a++;` | `6` |
 31 | | `--` | ডিক্রিমেন্ট (১ কমানো) | `let a = 5; a--;` | `4` |
 32 | 
 33 | ```javascript
 34 | let x = 10;
 35 | let y = 3;
 36 | console.log(x + y);  // 13
 37 | console.log(x - y);  // 7
 38 | console.log(x * y);  // 30
 39 | console.log(x / y);  // 3.33
 40 | console.log(x % y);  // 1
 41 | console.log(x ** y); // 1000
 42 | ```
 43 | 
 44 | ---
 45 | 
 46 | ## **🔹 ২. অ্যাসাইনমেন্ট অপারেটর (Assignment Operators)**  
 47 | এটি একটি ভেরিয়েবলে মান সেট বা পরিবর্তন করতে ব্যবহৃত হয়।  
 48 | 
 49 | | অপারেটর | কাজ | উদাহরণ | সমতুল্য |
 50 | |----------|------------|------------|------------|
 51 | | `=` | মান সেট করা | `x = 10` | `x = 10` |
 52 | | `+=` | যোগ ও সেট | `x += 5` | `x = x + 5` |
 53 | | `-=` | বিয়োগ ও সেট | `x -= 5` | `x = x - 5` |
 54 | | `*=` | গুণ ও সেট | `x *= 5` | `x = x * 5` |
 55 | | `/=` | ভাগ ও সেট | `x /= 5` | `x = x / 5` |
 56 | | `%=` | ভাগশেষ ও সেট | `x %= 5` | `x = x % 5` |
 57 | | `**=` | ঘাত ও সেট | `x **= 2` | `x = x ** 2` |
 58 | 
 59 | ```javascript
 60 | let x = 10;
 61 | x += 5;  // x = x + 5 (x এখন 15)
 62 | x *= 2;  // x = x * 2 (x এখন 30)
 63 | console.log(x);
 64 | ```
 65 | 
 66 | ---
 67 | 
 68 | ## **🔹 ৩. তুলনামূলক অপারেটর (Comparison Operators)**  
 69 | এই অপারেটর দুটি মান তুলনা করতে ব্যবহৃত হয় এবং `true` বা `false` রিটার্ন করে।  
 70 | 
 71 | | অপারেটর | কাজ | উদাহরণ | আউটপুট |
 72 | |----------|------------|------------|------------|
 73 | | `==` | সমান কিনা চেক করে | `10 == "10"` | `true` |
 74 | | `===` | মান ও টাইপ উভয়ই চেক করে | `10 === "10"` | `false` |
 75 | | `!=` | অসমান কিনা চেক করে | `10 != 5` | `true` |
 76 | | `!==` | মান ও টাইপ উভয়ই চেক করে | `10 !== "10"` | `true` |
 77 | | `>` | বড় কিনা চেক করে | `10 > 5` | `true` |
 78 | | `<` | ছোট কিনা চেক করে | `10 < 5` | `false` |
 79 | | `>=` | বড় বা সমান কিনা চেক করে | `10 >= 10` | `true` |
 80 | | `<=` | ছোট বা সমান কিনা চেক করে | `5 <= 10` | `true` |
 81 | 
 82 | ```javascript
 83 | console.log(10 == "10");   // true (কেবল মান চেক করে)
 84 | console.log(10 === "10");  // false (মান ও টাইপ চেক করে)
 85 | console.log(10 > 5);       // true
 86 | console.log(10 <= 10);     // true
 87 | ```
 88 | 
 89 | ---
 90 | 
 91 | ## **🔹 ৪. যৌক্তিক অপারেটর (Logical Operators)**  
 92 | একাধিক শর্ত একসাথে পরীক্ষা করতে ব্যবহৃত হয়।  
 93 | 
 94 | | অপারেটর | কাজ | উদাহরণ | আউটপুট |
 95 | |----------|------------|------------|------------|
 96 | | `&&` | AND (দুইটি শর্তই `true` হতে হবে) | `true && false` | `false` |
 97 | | `||` | OR (একটি শর্ত `true` হলেই হবে) | `true || false` | `true` |
 98 | | `!` | NOT (বিপরীত ফলাফল দেয়) | `!true` | `false` |
 99 | 
100 | ```javascript
101 | let a = true;
102 | let b = false;
103 | console.log(a && b);  // false
104 | console.log(a || b);  // true
105 | console.log(!a);      // false
106 | ```
107 | 
108 | ---
109 | 
110 | ## **🔹 ৫. বিটওয়াইজ অপারেটর (Bitwise Operators)**  
111 | এটি বাইনারি সংখ্যা নিয়ে কাজ করে।  
112 | 
113 | | অপারেটর | কাজ | উদাহরণ |
114 | |----------|------------|------------|
115 | | `&` | AND | `5 & 1` (0101 & 0001 → 0001 = 1) |
116 | | `|` | OR | `5 | 1` (0101 | 0001 → 0101 = 5) |
117 | | `^` | XOR | `5 ^ 1` (0101 ^ 0001 → 0100 = 4) |
118 | | `~` | NOT | `~5` (0101 → 1010 = -6) |
119 | | `<<` | Left Shift | `5 << 1` (0101 → 1010 = 10) |
120 | | `>>` | Right Shift | `5 >> 1` (0101 → 0010 = 2) |
121 | 
122 | ---
123 | 
124 | ## **🔹 ৬. টারনারি অপারেটর (Ternary Operator)**  
125 | এটি `if-else` এর সংক্ষিপ্ত রূপ।  
126 | 
127 | ```javascript
128 | let age = 20;
129 | let status = (age >= 18) ? "Adult" : "Minor";
130 | console.log(status);  // Output: "Adult"
131 | ```
132 | 
133 | ---
134 | 
135 | ## **🔹 ৭. টাইপ চেক অপারেটর (Type Operators)**  
136 | ভেরিয়েবলের টাইপ চেক করতে ব্যবহৃত হয়।  
137 | 
138 | | অপারেটর | কাজ | উদাহরণ |
139 | |----------|------------|------------|
140 | | `typeof` | ডাটার টাইপ দেখায় | `typeof "Hello"` (Output: `"string"`) |
141 | | `instanceof` | অবজেক্টের ইনস্ট্যান্স চেক করে | `arr instanceof Array` |
142 | 
143 | ```javascript
144 | console.log(typeof 100);      // "number"
145 | console.log(typeof "Hello");  // "string"
146 | console.log([1, 2, 3] instanceof Array); // true
147 | ```
148 | 
149 | ---
150 | 
151 | ## **📌 JavaScript Operators (অপারেটর) - Table Format**  
152 | 
153 | | অপারেটর | নাম | কাজ | উদাহরণ | আউটপুট |
154 | |----------|------------------|---------------------|--------------|---------|
155 | | `+` | যোগ (Addition) | দুটি সংখ্যা যোগ করে | `10 + 5` | `15` |
156 | | `-` | বিয়োগ (Subtraction) | একটি সংখ্যা থেকে আরেকটি সংখ্যা বিয়োগ করে | `10 - 5` | `5` |
157 | | `*` | গুণ (Multiplication) | দুটি সংখ্যা গুণ করে | `10 * 5` | `50` |
158 | | `/` | ভাগ (Division) | একটি সংখ্যা আরেকটি দ্বারা ভাগ করে | `10 / 5` | `2` |
159 | | `%` | ভাগশেষ (Modulus) | ভাগশেষ রিটার্ন করে | `10 % 3` | `1` |
160 | | `**` | ঘাত (Exponentiation) | পাওয়ার হিসাব করে | `2 ** 3` | `8` |
161 | | `=` | অ্যাসাইনমেন্ট (Assignment) | মান সেট করে | `x = 10` | `10` |
162 | | `+=` | যোগ অ্যাসাইন (Addition Assignment) | মান যোগ করে অ্যাসাইন করে | `x += 5` | `15` |
163 | | `-=` | বিয়োগ অ্যাসাইন (Subtraction Assignment) | মান বিয়োগ করে অ্যাসাইন করে | `x -= 5` | `5` |
164 | | `*=` | গুণ অ্যাসাইন (Multiplication Assignment) | মান গুণ করে অ্যাসাইন করে | `x *= 2` | `20` |
165 | | `/=` | ভাগ অ্যাসাইন (Division Assignment) | মান ভাগ করে অ্যাসাইন করে | `x /= 2` | `5` |
166 | | `%=` | ভাগশেষ অ্যাসাইন (Modulus Assignment) | ভাগশেষ দিয়ে অ্যাসাইন করে | `x %= 3` | `1` |
167 | | `==` | সমান (Equal) | মান সমান কিনা চেক করে | `10 == "10"` | `true` |
168 | | `===` | কঠোর সমান (Strict Equal) | মান ও টাইপ সমান কিনা চেক করে | `10 === "10"` | `false` |
169 | | `!=` | অসমান (Not Equal) | মান অসমান কিনা চেক করে | `10 != 5` | `true` |
170 | | `!==` | কঠোর অসমান (Strict Not Equal) | মান ও টাইপ অসমান কিনা চেক করে | `10 !== "10"` | `true` |
171 | | `>` | বড় (Greater Than) | বড় কিনা চেক করে | `10 > 5` | `true` |
172 | | `<` | ছোট (Less Than) | ছোট কিনা চেক করে | `10 < 5` | `false` |
173 | | `>=` | বড় বা সমান (Greater Than or Equal) | বড় বা সমান কিনা চেক করে | `10 >= 10` | `true` |
174 | | `<=` | ছোট বা সমান (Less Than or Equal) | ছোট বা সমান কিনা চেক করে | `10 <= 5` | `false` |
175 | | `&&` | AND অপারেটর | দুটি শর্ত সত্য হলে সত্য | `true && false` | `false` |
176 | | `||` | OR অপারেটর | যেকোনো একটি শর্ত সত্য হলে সত্য | `true || false` | `true` |
177 | | `!` | NOT অপারেটর | বিপরীত ফলাফল দেয় | `!true` | `false` |
178 | | `++` | ইনক্রিমেন্ট (Increment) | ১ যোগ করে | `x++` | `x + 1` |
179 | | `--` | ডিক্রিমেন্ট (Decrement) | ১ বিয়োগ করে | `x--` | `x - 1` |
180 | 
181 | এই টেবিলটি ব্যবহার করে তুমি **JavaScript Operators** সহজে বুঝতে পারবে 🚀🔥
182 | 


--------------------------------------------------------------------------------
/B. Condition/Condition-Bangla.md:
--------------------------------------------------------------------------------
  1 | ### **📌 জাভাস্ক্রিপ্টে কন্ডিশন (Condition) সম্পর্কে সম্পূর্ণ গাইড**  
  2 | 
  3 | কন্ডিশন বা শর্ত হলো এমন কিছু সিকোয়েন্স যা নির্দিষ্ট শর্তের ভিত্তিতে কোড চালাতে সাহায্য করে। জাভাস্ক্রিপ্টে কন্ডিশনাল স্টেটমেন্টের মাধ্যমে শর্ত পূরণ হলে কিছু কাজ করা যায়। এটি প্রোগ্রামিংয়ের অন্যতম গুরুত্বপূর্ণ অংশ, যেটি কোডের কার্যক্রমের ধারা নিয়ন্ত্রণ করে।  
  4 | 
  5 | ---
  6 | 
  7 | ## **🔹 কন্ডিশনাল স্টেটমেন্টের প্রকারভেদ**  
  8 | ✅ **if statement**  
  9 | ✅ **if-else statement**  
 10 | ✅ **else-if statement**  
 11 | ✅ **switch statement**  
 12 | 
 13 | ---
 14 | 
 15 | ## **🔹 ১. if statement**  
 16 | `if` স্টেটমেন্ট শর্তের ভিত্তিতে কোডের কোনো অংশ চালায়। যদি শর্ত `true` হয়, তাহলে কোডটি execute হবে।  
 17 | 
 18 | **Syntax:**
 19 | ```javascript
 20 | if (condition) {
 21 |   // Code to be executed if the condition is true
 22 | }
 23 | ```
 24 | 
 25 | **উদাহরণ:**
 26 | ```javascript
 27 | let age = 20;
 28 | if (age >= 18) {
 29 |     console.log("You are an adult.");
 30 | }
 31 | ```
 32 | **Output:**
 33 | ```
 34 | You are an adult.
 35 | ```
 36 | 
 37 | এখানে, যদি `age` ১৮ বা তার বেশি হয়, তাহলে `"You are an adult."` মেসেজটি কনসোল-এ দেখাবে।  
 38 | 
 39 | ---
 40 | 
 41 | ## **🔹 ২. if-else statement**  
 42 | `if-else` স্টেটমেন্টে, শর্ত যদি `true` হয়, তাহলে প্রথম ব্লক execute হবে। কিন্তু শর্ত `false` হলে `else` ব্লক execute হবে।  
 43 | 
 44 | **Syntax:**
 45 | ```javascript
 46 | if (condition) {
 47 |   // Code to be executed if the condition is true
 48 | } else {
 49 |   // Code to be executed if the condition is false
 50 | }
 51 | ```
 52 | 
 53 | **উদাহরণ:**
 54 | ```javascript
 55 | let age = 15;
 56 | if (age >= 18) {
 57 |     console.log("You are an adult.");
 58 | } else {
 59 |     console.log("You are a minor.");
 60 | }
 61 | ```
 62 | **Output:**
 63 | ```
 64 | You are a minor.
 65 | ```
 66 | 
 67 | এখানে, যদি `age` ১৮ বা তার বেশি না হয়, তাহলে `"You are a minor."` মেসেজটি কনসোল-এ দেখাবে।  
 68 | 
 69 | ---
 70 | 
 71 | ## **🔹 ৩. else-if statement**  
 72 | `else-if` স্টেটমেন্ট ব্যবহার করে একাধিক শর্ত চেক করা যায়। এটি `if` এবং `else` এর মধ্যে অবস্থান নেয়, এবং একাধিক শর্তে কার্যকর হতে পারে।  
 73 | 
 74 | **Syntax:**
 75 | ```javascript
 76 | if (condition1) {
 77 |   // Code to be executed if condition1 is true
 78 | } else if (condition2) {
 79 |   // Code to be executed if condition2 is true
 80 | } else {
 81 |   // Code to be executed if neither condition is true
 82 | }
 83 | ```
 84 | 
 85 | **উদাহরণ:**
 86 | ```javascript
 87 | let age = 20;
 88 | if (age >= 60) {
 89 |     console.log("You are a senior citizen.");
 90 | } else if (age >= 18) {
 91 |     console.log("You are an adult.");
 92 | } else {
 93 |     console.log("You are a minor.");
 94 | }
 95 | ```
 96 | **Output:**
 97 | ```
 98 | You are an adult.
 99 | ```
100 | 
101 | এখানে প্রথমে `age >= 60` শর্তটি পরীক্ষা করা হয়, যদি না হয় তবে `age >= 18` পরীক্ষা হবে এবং তার পরে `else` অংশ execute হবে।  
102 | 
103 | ---
104 | 
105 | ## **🔹 ৪. switch statement**  
106 | `switch` স্টেটমেন্টটি একাধিক শর্ত চেক করার জন্য ব্যবহৃত হয়। এটি অনেক `if-else` স্টেটমেন্টের চেয়ে সহজ এবং স্পষ্ট।  
107 | 
108 | **Syntax:**
109 | ```javascript
110 | switch (expression) {
111 |   case value1:
112 |     // Code to be executed if the expression equals value1
113 |     break;
114 |   case value2:
115 |     // Code to be executed if the expression equals value2
116 |     break;
117 |   default:
118 |     // Code to be executed if the expression doesn't match any case
119 | }
120 | ```
121 | 
122 | **উদাহরণ:**
123 | ```javascript
124 | let day = 3;
125 | switch (day) {
126 |   case 1:
127 |     console.log("Sunday");
128 |     break;
129 |   case 2:
130 |     console.log("Monday");
131 |     break;
132 |   case 3:
133 |     console.log("Tuesday");
134 |     break;
135 |   case 4:
136 |     console.log("Wednesday");
137 |     break;
138 |   default:
139 |     console.log("Invalid day");
140 | }
141 | ```
142 | **Output:**
143 | ```
144 | Tuesday
145 | ```
146 | 
147 | এখানে, `day` এর মান ৩ হওয়ায় `"Tuesday"` মেসেজটি কনসোল-এ দেখাবে।  
148 | 
149 | ---
150 | 
151 | ## **🔹 ৫. তোলনামূলক অপারেটর (Comparison Operators)**  
152 | কন্ডিশনাল স্টেটমেন্টে শর্ত নির্ধারণ করতে **তুলনামূলক অপারেটর** ব্যবহৃত হয়। যেমন `==`, `===`, `!=`, `>`, `<`, ইত্যাদি।
153 | 
154 | **উদাহরণ:**
155 | ```javascript
156 | let x = 10;
157 | let y = 20;
158 | if (x < y) {
159 |     console.log("x is smaller than y");
160 | }
161 | ```
162 | **Output:**
163 | ```
164 | x is smaller than y
165 | ```
166 | 
167 | ---
168 | 
169 | ## **🔹 ৬. লজিক্যাল অপারেটর (Logical Operators)**  
170 | কন্ডিশনে একাধিক শর্ত যুক্ত করার জন্য **লজিক্যাল অপারেটর** যেমন `&&` (AND), `||` (OR), `!` (NOT) ব্যবহৃত হয়।
171 | 
172 | **উদাহরণ:**
173 | ```javascript
174 | let age = 20;
175 | let hasPermission = true;
176 | if (age >= 18 && hasPermission) {
177 |     console.log("Access granted.");
178 | } else {
179 |     console.log("Access denied.");
180 | }
181 | ```
182 | **Output:**
183 | ```
184 | Access granted.
185 | ```
186 | 
187 | এখানে, `age` ১৮ বা তার বেশি এবং `hasPermission` সত্য হলে অ্যাক্সেস গ্রান্ট করা হবে।  
188 | 
189 | ---
190 | 
191 | ## **🔹 ৭. নেস্টেড কন্ডিশন (Nested Conditionals)**  
192 | কখনো কখনো এক কন্ডিশনকে আরেক কন্ডিশনের ভিতরে রাখার প্রয়োজন হয়, তাকে **নেস্টেড কন্ডিশন** বলে।  
193 | 
194 | **উদাহরণ:**
195 | ```javascript
196 | let age = 20;
197 | let hasLicense = true;
198 | if (age >= 18) {
199 |     if (hasLicense) {
200 |         console.log("You can drive.");
201 |     } else {
202 |         console.log("You cannot drive without a license.");
203 |     }
204 | } else {
205 |     console.log("You are too young to drive.");
206 | }
207 | ```
208 | **Output:**
209 | ```
210 | You can drive.
211 | ```
212 | 
213 | ---
214 | 
215 | ## **📌 JavaScript Condition Methods (শর্তমূলক স্টেটমেন্ট) - Table Format**  
216 | 
217 | | শর্ত | বর্ণনা | সিনট্যাক্স | উদাহরণ | আউটপুট |
218 | |-------|-----------------|--------------------|----------------------|----------|
219 | | `if` | শর্ত সত্য হলে কোড চলবে | `if(condition) { code }` | ```javascript if (10 > 5) { console.log("True"); } ``` | `"True"` |
220 | | `if-else` | শর্ত সত্য হলে `if` ব্লক চলবে, নাহলে `else` ব্লক | `if(condition) { code } else { code }` | ```javascript let age = 16; if (age >= 18) { console.log("Adult"); } else { console.log("Underage"); } ``` | `"Underage"` |
221 | | `if-else if-else` | একাধিক শর্ত চেক করার জন্য ব্যবহার হয় | `if(condition1) { } else if(condition2) { } else { }` | ```javascript let marks = 75; if (marks >= 80) { console.log("A+"); } else if (marks >= 60) { console.log("B"); } else { console.log("Fail"); } ``` | `"B"` |
222 | | `switch-case` | একাধিক নির্দিষ্ট মান চেক করতে ব্যবহার হয় | `switch(value) { case x: code; break; default: code; }` | ```javascript let day = 3; switch (day) { case 1: console.log("Sunday"); break; case 2: console.log("Monday"); break; case 3: console.log("Tuesday"); break; default: console.log("Invalid Day"); } ``` | `"Tuesday"` |
223 | | `ternary operator` | ছোট আকারে `if-else` লেখার জন্য ব্যবহৃত হয় | `condition ? trueValue : falseValue` | ```javascript let age = 20; let status = (age >= 18) ? "Adult" : "Minor"; console.log(status); ``` | `"Adult"` |
224 | | `logical AND (&&)` | দুই শর্ত সত্য হলে সত্য রিটার্ন করবে | `condition1 && condition2` | ```javascript let x = 5; if (x > 0 && x < 10) { console.log("Between 0 and 10"); } ``` | `"Between 0 and 10"` |
225 | | `logical OR (||)` | যেকোনো একটি শর্ত সত্য হলে সত্য রিটার্ন করবে | `condition1 || condition2` | ```javascript let y = 15; if (y < 10 || y > 20) { console.log("Out of range"); } ``` | `"Out of range"` |
226 | | `logical NOT (!)` | শর্তের বিপরীত মান ফেরত দেয় | `!condition` | ```javascript let isRaining = false; if (!isRaining) { console.log("Go outside!"); } ``` | `"Go outside!"` |
227 | 
228 | এই টেবিলটি ব্যবহার করে তুমি **JavaScript Condition Statements** সহজে শিখতে পারবে 🚀🔥


--------------------------------------------------------------------------------
/E. Object/Object-English.md:
--------------------------------------------------------------------------------
  1 | # **JavaScript Objects - Everything You Need to Know (With Real-Life Examples)**  
  2 | 
  3 | ## **What is an Object in JavaScript?**  
  4 | An **object** in JavaScript is a collection of **key-value pairs**. It is used to store multiple related values under a single variable name.  
  5 | 
  6 | ### **Why Use Objects?**  
  7 | - Objects allow us to **group related data** together.  
  8 | - Objects make it easy to **organize, access, and modify** data.  
  9 | - Unlike arrays, which store values **in an ordered list**, objects use **named properties** to store values.  
 10 | 
 11 | ---
 12 | 
 13 | ## **How to Create an Object?**  
 14 | 
 15 | ### **1️⃣ Using Object Literal `{}`**
 16 | The easiest way to create an object is using curly braces `{}`.  
 17 | ```javascript
 18 | let person = {
 19 |     name: "Shihab",
 20 |     age: 25,
 21 |     city: "Dhaka"
 22 | };
 23 | 
 24 | console.log(person);  // Output: { name: 'Shihab', age: 25, city: 'Dhaka' }
 25 | ```
 26 | 🔹 Here, `name`, `age`, and `city` are **keys (properties)**, and `"Shihab"`, `25`, and `"Dhaka"` are **values**.  
 27 | 
 28 | ---
 29 | 
 30 | ### **2️⃣ Using `new Object()` (Less Common)**
 31 | ```javascript
 32 | let person = new Object();
 33 | person.name = "Shihab";
 34 | person.age = 25;
 35 | person.city = "Dhaka";
 36 | 
 37 | console.log(person);
 38 | ```
 39 | 🔹 This method is less common and generally not recommended unless needed.
 40 | 
 41 | ---
 42 | 
 43 | ## **Accessing Object Properties**
 44 | You can access object properties in two ways:  
 45 | 
 46 | ### **1️⃣ Dot Notation (`object.property`)**
 47 | ```javascript
 48 | console.log(person.name);  // Output: Shihab
 49 | console.log(person.age);   // Output: 25
 50 | ```
 51 | 
 52 | ### **2️⃣ Bracket Notation (`object["property"]`)**
 53 | ```javascript
 54 | console.log(person["city"]);  // Output: Dhaka
 55 | ```
 56 | 🔹 **Use bracket notation** when the property name contains **spaces or special characters**.
 57 | 
 58 | Example:
 59 | ```javascript
 60 | let user = {
 61 |     "full name": "Shihab Hasan",
 62 |     age: 25
 63 | };
 64 | 
 65 | console.log(user["full name"]);  // Output: Shihab Hasan
 66 | ```
 67 | 
 68 | ---
 69 | 
 70 | ## **Modifying Object Properties**
 71 | You can **update** or **add** properties to an object.
 72 | 
 73 | ### **Updating Existing Property**
 74 | ```javascript
 75 | person.age = 26;
 76 | console.log(person.age);  // Output: 26
 77 | ```
 78 | 
 79 | ### **Adding a New Property**
 80 | ```javascript
 81 | person.country = "Bangladesh";
 82 | console.log(person.country);  // Output: Bangladesh
 83 | ```
 84 | 
 85 | ### **Deleting a Property**
 86 | ```javascript
 87 | delete person.city;
 88 | console.log(person.city);  // Output: undefined
 89 | ```
 90 | 
 91 | ---
 92 | 
 93 | ## **Looping Through an Object**
 94 | Use a **`for...in` loop** to iterate over an object’s properties.
 95 | 
 96 | ```javascript
 97 | let car = {
 98 |     brand: "Toyota",
 99 |     model: "Corolla",
100 |     year: 2023
101 | };
102 | 
103 | for (let key in car) {
104 |     console.log(key + ": " + car[key]);
105 | }
106 | ```
107 | 🔹 **Output:**
108 | ```
109 | brand: Toyota
110 | model: Corolla
111 | year: 2023
112 | ```
113 | 
114 | ---
115 | 
116 | ## **Object Methods (Functions Inside Objects)**
117 | A **method** is a function stored inside an object.
118 | 
119 | ```javascript
120 | let person = {
121 |     name: "Shihab",
122 |     age: 25,
123 |     greet: function() {
124 |         console.log("Hello, my name is " + this.name);
125 |     }
126 | };
127 | 
128 | person.greet();  // Output: Hello, my name is Shihab
129 | ```
130 | 🔹 **`this` refers to the object itself** and helps access its properties.
131 | 
132 | ---
133 | 
134 | ## **Checking if a Property Exists**
135 | Use the **`in` operator** or **`hasOwnProperty()`** to check if a property exists.
136 | 
137 | ```javascript
138 | console.log("age" in person);  // Output: true
139 | console.log(person.hasOwnProperty("city"));  // Output: false
140 | ```
141 | 
142 | ---
143 | 
144 | ## **Real-Life Examples of Objects**
145 | ### **1️⃣ Storing User Information**
146 | ```javascript
147 | let user = {
148 |     username: "shihab123",
149 |     email: "shihab@example.com",
150 |     password: "securepass",
151 |     isLoggedIn: false
152 | };
153 | console.log(user);
154 | ```
155 | 
156 | ---
157 | 
158 | ### **2️⃣ Representing a Bank Account**
159 | ```javascript
160 | let bankAccount = {
161 |     accountNumber: "123456789",
162 |     balance: 5000,
163 |     deposit: function(amount) {
164 |         this.balance += amount;
165 |         console.log("Deposited: $" + amount);
166 |         console.log("New Balance: $" + this.balance);
167 |     },
168 |     withdraw: function(amount) {
169 |         if (amount > this.balance) {
170 |             console.log("Insufficient funds.");
171 |         } else {
172 |             this.balance -= amount;
173 |             console.log("Withdrawn: $" + amount);
174 |             console.log("New Balance: $" + this.balance);
175 |         }
176 |     }
177 | };
178 | 
179 | bankAccount.deposit(1000);
180 | bankAccount.withdraw(2000);
181 | ```
182 | 
183 | ---
184 | 
185 | ### **3️⃣ Storing Product Details (E-commerce Example)**
186 | ```javascript
187 | let product = {
188 |     name: "Laptop",
189 |     brand: "HP",
190 |     price: 800,
191 |     inStock: true,
192 |     showDetails: function() {
193 |         console.log(this.name + " by " + this.brand + " costs $" + this.price);
194 |     }
195 | };
196 | 
197 | product.showDetails();  // Output: Laptop by HP costs $800
198 | ```
199 | 
200 | ---
201 | 
202 | ### **4️⃣ Employee Database Example**
203 | ```javascript
204 | let employees = [
205 |     { name: "John", position: "Manager", salary: 5000 },
206 |     { name: "Jane", position: "Developer", salary: 4000 },
207 |     { name: "Mike", position: "Designer", salary: 3500 }
208 | ];
209 | 
210 | for (let employee of employees) {
211 |     console.log(employee.name + " works as a " + employee.position);
212 | }
213 | ```
214 | 🔹 **Output:**
215 | ```
216 | John works as a Manager
217 | Jane works as a Developer
218 | Mike works as a Designer
219 | ```
220 | 
221 | ---
222 | 
223 | ## **Nested Objects (Object Inside Another Object)**
224 | Objects can contain other objects.
225 | 
226 | ```javascript
227 | let person = {
228 |     name: "Shihab",
229 |     address: {
230 |         city: "Dhaka",
231 |         country: "Bangladesh"
232 |     }
233 | };
234 | 
235 | console.log(person.address.city);  // Output: Dhaka
236 | ```
237 | 
238 | ---
239 | 
240 | ## **Object Destructuring**
241 | Extract values from an object easily.
242 | 
243 | ```javascript
244 | let student = {
245 |     name: "Shihab",
246 |     age: 25,
247 |     grade: "A"
248 | };
249 | 
250 | let { name, age } = student;
251 | console.log(name);  // Output: Shihab
252 | console.log(age);   // Output: 25
253 | ```
254 | 
255 | ---
256 | 
257 | ## **Object.keys(), Object.values(), Object.entries()**
258 | ### **1️⃣ `Object.keys()` - Get All Property Names**
259 | ```javascript
260 | let person = { name: "Shihab", age: 25, city: "Dhaka" };
261 | console.log(Object.keys(person));  
262 | // Output: [ 'name', 'age', 'city' ]
263 | ```
264 | 
265 | ### **2️⃣ `Object.values()` - Get All Property Values**
266 | ```javascript
267 | console.log(Object.values(person));  
268 | // Output: [ 'Shihab', 25, 'Dhaka' ]
269 | ```
270 | 
271 | ### **3️⃣ `Object.entries()` - Get Key-Value Pairs as an Array**
272 | ```javascript
273 | console.log(Object.entries(person));  
274 | // Output: [ ['name', 'Shihab'], ['age', 25], ['city', 'Dhaka'] ]
275 | ```
276 | 
277 | ---
278 | 
279 | ## **Conclusion**
280 | - Objects store **key-value** pairs.
281 | - You can access properties using **dot notation** or **bracket notation**.
282 | - Objects can have **methods (functions inside objects)**.
283 | - You can loop through an object using **`for...in`**.
284 | - Use **destructuring** and **built-in methods** (`Object.keys()`, `Object.values()`) for easier manipulation.
285 | 
286 | Would you like some practice problems on objects? 🚀🔥


--------------------------------------------------------------------------------
/F. Function/Function-English.md:
--------------------------------------------------------------------------------
  1 | # **JavaScript Functions - Everything You Need to Know 🚀**  
  2 | 
  3 | A **function** in JavaScript is a block of code that performs a specific task. Functions help in **code reusability, modularity, and better organization**.  
  4 | 
  5 | ---
  6 | 
  7 | ## **Why Use Functions?**
  8 | ✅ **Avoid repetition** – Write once, use multiple times.  
  9 | ✅ **Organized code** – Break big problems into smaller tasks.  
 10 | ✅ **Easier debugging** – Fix issues in one place.  
 11 | ✅ **Improved readability** – Code is easier to understand.  
 12 | 
 13 | ---
 14 | 
 15 | ## **How to Declare a Function?**
 16 | JavaScript provides different ways to define a function.
 17 | 
 18 | ### **1️⃣ Function Declaration (Named Function)**
 19 | ```javascript
 20 | function greet() {
 21 |     console.log("Hello, Shihab!");
 22 | }
 23 | 
 24 | greet();  // Output: Hello, Shihab!
 25 | ```
 26 | 🔹 **`function`** keyword is used.  
 27 | 🔹 The function runs only when it is **called**.  
 28 | 
 29 | ---
 30 | 
 31 | ### **2️⃣ Function with Parameters & Arguments**
 32 | A function can take **parameters** (inputs) to process data.
 33 | 
 34 | ```javascript
 35 | function greet(name) {
 36 |     console.log("Hello, " + name + "!");
 37 | }
 38 | 
 39 | greet("Shihab");  // Output: Hello, Shihab!
 40 | greet("Hasan");   // Output: Hello, Hasan!
 41 | ```
 42 | 🔹 **`name`** is a **parameter** (like a placeholder).  
 43 | 🔹 `"Shihab"` and `"Hasan"` are **arguments** (actual values).  
 44 | 
 45 | ---
 46 | 
 47 | ### **3️⃣ Function with Return Value**
 48 | A function can return a value instead of just printing it.
 49 | 
 50 | ```javascript
 51 | function add(a, b) {
 52 |     return a + b;  // Returns the sum of a and b
 53 | }
 54 | 
 55 | let result = add(10, 20);
 56 | console.log(result);  // Output: 30
 57 | ```
 58 | 🔹 `return` sends a value back to where the function was called.  
 59 | 
 60 | ---
 61 | 
 62 | ### **4️⃣ Function Expression (Anonymous Function)**
 63 | A function can be stored inside a variable.
 64 | 
 65 | ```javascript
 66 | let multiply = function(a, b) {
 67 |     return a * b;
 68 | };
 69 | 
 70 | console.log(multiply(5, 3));  // Output: 15
 71 | ```
 72 | 🔹 **No function name** (anonymous function).  
 73 | 🔹 Stored inside a variable `multiply`.  
 74 | 
 75 | ---
 76 | 
 77 | ### **5️⃣ Arrow Function (ES6)**
 78 | A **shorter** and modern way to write functions.
 79 | 
 80 | ```javascript
 81 | const subtract = (a, b) => a - b;
 82 | 
 83 | console.log(subtract(10, 5));  // Output: 5
 84 | ```
 85 | 🔹 No need for `{}` and `return` if the function has only one line.  
 86 | 
 87 | ---
 88 | 
 89 | ### **6️⃣ Default Parameters**
 90 | Set default values for parameters.
 91 | 
 92 | ```javascript
 93 | function greet(name = "Guest") {
 94 |     console.log("Hello, " + name + "!");
 95 | }
 96 | 
 97 | greet();         // Output: Hello, Guest!
 98 | greet("Shihab"); // Output: Hello, Shihab!
 99 | ```
100 | 🔹 If no argument is passed, `"Guest"` is used.  
101 | 
102 | ---
103 | 
104 | ### **7️⃣ Rest Parameters (`...`)**
105 | A function can take **multiple arguments** using the `...` operator.
106 | 
107 | ```javascript
108 | function sum(...numbers) {
109 |     let total = 0;
110 |     for (let num of numbers) {
111 |         total += num;
112 |     }
113 |     return total;
114 | }
115 | 
116 | console.log(sum(10, 20, 30));  // Output: 60
117 | console.log(sum(5, 15, 25, 35)); // Output: 80
118 | ```
119 | 🔹 `...numbers` collects all arguments into an **array**.  
120 | 
121 | ---
122 | 
123 | ## **Function Scope & Hoisting**
124 | ### **🔹 Local Scope**
125 | Variables declared inside a function **cannot** be accessed outside.
126 | 
127 | ```javascript
128 | function test() {
129 |     let message = "Hello";
130 |     console.log(message);
131 | }
132 | 
133 | test(); // Output: Hello
134 | console.log(message); // ❌ Error (message is not defined)
135 | ```
136 | 
137 | ---
138 | 
139 | ### **🔹 Global Scope**
140 | A variable declared outside a function is **global** and can be used anywhere.
141 | 
142 | ```javascript
143 | let message = "Hello";
144 | 
145 | function test() {
146 |     console.log(message);
147 | }
148 | 
149 | test(); // Output: Hello
150 | console.log(message); // Output: Hello
151 | ```
152 | 
153 | ---
154 | 
155 | ### **🔹 Hoisting**
156 | Function **declarations** are **hoisted** (moved to the top) and can be used before defining them.
157 | 
158 | ```javascript
159 | sayHello();
160 | 
161 | function sayHello() {
162 |     console.log("Hello, World!");
163 | }
164 | 
165 | // Output: Hello, World!
166 | ```
167 | 
168 | 🔹 Function **expressions & arrow functions are NOT hoisted**:
169 | ```javascript
170 | console.log(add(5, 3)); // ❌ Error (Cannot access 'add' before initialization)
171 | 
172 | const add = (a, b) => a + b;
173 | ```
174 | 
175 | ---
176 | 
177 | ## **Callback Functions**
178 | A function that is passed as an **argument** to another function.
179 | 
180 | ```javascript
181 | function greet(name, callback) {
182 |     console.log("Hello, " + name);
183 |     callback();
184 | }
185 | 
186 | function sayGoodbye() {
187 |     console.log("Goodbye!");
188 | }
189 | 
190 | greet("Shihab", sayGoodbye);
191 | 
192 | // Output:
193 | // Hello, Shihab
194 | // Goodbye!
195 | ```
196 | 
197 | 🔹 **Used in async operations like fetching data, handling events, etc.**  
198 | 
199 | ---
200 | 
201 | ## **IIFE (Immediately Invoked Function Expression)**
202 | A function that runs **immediately** after definition.
203 | 
204 | ```javascript
205 | (function() {
206 |     console.log("This function runs automatically!");
207 | })();
208 | ```
209 | 
210 | 🔹 **Used to avoid polluting the global scope.**  
211 | 
212 | ---
213 | 
214 | ## **Higher-Order Functions**
215 | Functions that take **another function as an argument** or **return a function**.
216 | 
217 | ```javascript
218 | function applyOperation(a, b, operation) {
219 |     return operation(a, b);
220 | }
221 | 
222 | function multiply(x, y) {
223 |     return x * y;
224 | }
225 | 
226 | console.log(applyOperation(5, 3, multiply));  // Output: 15
227 | ```
228 | 
229 | 🔹 **Used in map, filter, reduce, event listeners, and promises.**  
230 | 
231 | ---
232 | 
233 | ## **Real-Life Examples of Functions**
234 | ### **1️⃣ Generating a Random OTP (One-Time Password)**
235 | ```javascript
236 | function generateOTP() {
237 |     return Math.floor(1000 + Math.random() * 9000);
238 | }
239 | 
240 | console.log("Your OTP is: " + generateOTP());
241 | ```
242 | 
243 | ---
244 | 
245 | ### **2️⃣ Checking if a Number is Even or Odd**
246 | ```javascript
247 | function isEven(number) {
248 |     return number % 2 === 0;
249 | }
250 | 
251 | console.log(isEven(10)); // Output: true
252 | console.log(isEven(7));  // Output: false
253 | ```
254 | 
255 | ---
256 | 
257 | ### **3️⃣ Fetching Data from an API (Async Function)**
258 | ```javascript
259 | async function fetchData() {
260 |     let response = await fetch("https://jsonplaceholder.typicode.com/users");
261 |     let data = await response.json();
262 |     console.log(data);
263 | }
264 | 
265 | fetchData();
266 | ```
267 | 🔹 **Uses `fetch()` to get data from an API.**  
268 | 
269 | ---
270 | 
271 | ## **Practice Questions**
272 | ### **1️⃣ Write a function to find the factorial of a number.**
273 | ```javascript
274 | function factorial(n) {
275 |     // Your code here
276 | }
277 | ```
278 | 
279 | ### **2️⃣ Write a function to reverse a string.**
280 | ```javascript
281 | function reverseString(str) {
282 |     // Your code here
283 | }
284 | ```
285 | 
286 | ### **3️⃣ Write a function that checks if a number is prime.**
287 | ```javascript
288 | function isPrime(num) {
289 |     // Your code here
290 | }
291 | ```
292 | 
293 | ---
294 | 
295 | ## **Conclusion**
296 | ✅ Functions **make code reusable and modular**.  
297 | ✅ Use **function declarations, expressions, and arrow functions**.  
298 | ✅ **Use parameters, return values, and default values** for flexibility.  
299 | ✅ **Callbacks, IIFE, and higher-order functions** are powerful tools.  
300 | ✅ **Practice functions to become a pro! 🚀**  


--------------------------------------------------------------------------------
/H. ES6/Keys-ASCII-Code.md:
--------------------------------------------------------------------------------
  1 | এখানে **ASCII কোড** সহ সব সাধারণ কিপ্যাডের কীয়ের তালিকা দেওয়া হলো:
  2 | 
  3 | ### **ASCII কোডের সাথে সমস্ত কী (Keys):**
  4 | 
  5 | | **Key**        | **ASCII Code** | **Description**                |
  6 | |----------------|----------------|--------------------------------|
  7 | | `Space`        | 32             | স্পেস (Space)                  |
  8 | | `!`            | 33             | এক্সক্লেমেশন মার্ক (Exclamation Mark) |
  9 | | `"`            | 34             | ডাবল কোটেশন (Double Quote)   |
 10 | | `#`            | 35             | হ্যাশ (Hash/Pound)             |
 11 | | `$`            | 36             | ডলার সাইন (Dollar Sign)       |
 12 | | `%`            | 37             | পারসেন্ট সাইন (Percent Sign)  |
 13 | | `&`            | 38             | অ্যান্ড সাইন (Ampersand)       |
 14 | | `'`            | 39             | সিঙ্গেল কোটেশন (Single Quote)|
 15 | | `(`            | 40             | ওপেন ব্র্যাকেট (Open Parenthesis) |
 16 | | `)`            | 41             | ক্লোজ ব্র্যাকেট (Close Parenthesis) |
 17 | | `*`            | 42             | অ্যাস্টারিস্ক (Asterisk)       |
 18 | | `+`            | 43             | প্লাস (Plus)                   |
 19 | | `,`            | 44             | কমা (Comma)                   |
 20 | | `-`            | 45             | মাইনাস (Minus/Hyphen)         |
 21 | | `.`            | 46             | ডট (Period)                   |
 22 | | `/`            | 47             | স্ল্যাশ (Slash)               |
 23 | | `0`            | 48             | শূন্য (Zero)                   |
 24 | | `1`            | 49             | এক (One)                       |
 25 | | `2`            | 50             | দুই (Two)                      |
 26 | | `3`            | 51             | তিন (Three)                    |
 27 | | `4`            | 52             | চার (Four)                     |
 28 | | `5`            | 53             | পাঁচ (Five)                    |
 29 | | `6`            | 54             | ছয় (Six)                      |
 30 | | `7`            | 55             | সাত (Seven)                    |
 31 | | `8`            | 56             | আট (Eight)                     |
 32 | | `9`            | 57             | নয় (Nine)                     |
 33 | | `:`            | 58             | কোলন (Colon)                  |
 34 | | `;`            | 59             | সেমিকোলন (Semicolon)          |
 35 | | `<`            | 60             | লেস-থান (Less Than)           |
 36 | | `=`            | 61             | সমান (Equal)                   |
 37 | | `>`            | 62             | গ্রেটার-থান (Greater Than)    |
 38 | | `?`            | 63             | কুইশ্চন মার্ক (Question Mark)  |
 39 | | `@`            | 64             | অ্যাট দ্য রেট (At Symbol)     |
 40 | | `A`            | 65             | ক্যাপিটাল A                   |
 41 | | `B`            | 66             | ক্যাপিটাল B                   |
 42 | | `C`            | 67             | ক্যাপিটাল C                   |
 43 | | `D`            | 68             | ক্যাপিটাল D                   |
 44 | | `E`            | 69             | ক্যাপিটাল E                   |
 45 | | `F`            | 70             | ক্যাপিটাল F                   |
 46 | | `G`            | 71             | ক্যাপিটাল G                   |
 47 | | `H`            | 72             | ক্যাপিটাল H                   |
 48 | | `I`            | 73             | ক্যাপিটাল I                   |
 49 | | `J`            | 74             | ক্যাপিটাল J                   |
 50 | | `K`            | 75             | ক্যাপিটাল K                   |
 51 | | `L`            | 76             | ক্যাপিটাল L                   |
 52 | | `M`            | 77             | ক্যাপিটাল M                   |
 53 | | `N`            | 78             | ক্যাপিটাল N                   |
 54 | | `O`            | 79             | ক্যাপিটাল O                   |
 55 | | `P`            | 80             | ক্যাপিটাল P                   |
 56 | | `Q`            | 81             | ক্যাপিটাল Q                   |
 57 | | `R`            | 82             | ক্যাপিটাল R                   |
 58 | | `S`            | 83             | ক্যাপিটাল S                   |
 59 | | `T`            | 84             | ক্যাপিটাল T                   |
 60 | | `U`            | 85             | ক্যাপিটাল U                   |
 61 | | `V`            | 86             | ক্যাপিটাল V                   |
 62 | | `W`            | 87             | ক্যাপিটাল W                   |
 63 | | `X`            | 88             | ক্যাপিটাল X                   |
 64 | | `Y`            | 89             | ক্যাপিটাল Y                   |
 65 | | `Z`            | 90             | ক্যাপিটাল Z                   |
 66 | | `[`            | 91             | ওপেন স্কয়ার ব্র্যাকেট (Open Square Bracket) |
 67 | | `\`            | 92             | ব্যাকস্ল্যাশ (Backslash)      |
 68 | | `]`            | 93             | ক্লোজ স্কয়ার ব্র্যাকেট (Close Square Bracket) |
 69 | | `^`            | 94             | কেয়ারট (Caret)                |
 70 | | `_`            | 95             | আন্ডারস্কোর (Underscore)      |
 71 | | `` ` ``        | 96             | ব্যাকটিক (Backtick)           |
 72 | | `a`            | 97             | ছোট a (Small a)               |
 73 | | `b`            | 98             | ছোট b (Small b)               |
 74 | | `c`            | 99             | ছোট c (Small c)               |
 75 | | `d`            | 100            | ছোট d (Small d)               |
 76 | | `e`            | 101            | ছোট e (Small e)               |
 77 | | `f`            | 102            | ছোট f (Small f)               |
 78 | | `g`            | 103            | ছোট g (Small g)               |
 79 | | `h`            | 104            | ছোট h (Small h)               |
 80 | | `i`            | 105            | ছোট i (Small i)               |
 81 | | `j`            | 106            | ছোট j (Small j)               |
 82 | | `k`            | 107            | ছোট k (Small k)               |
 83 | | `l`            | 108            | ছোট l (Small l)               |
 84 | | `m`            | 109            | ছোট m (Small m)               |
 85 | | `n`            | 110            | ছোট n (Small n)               |
 86 | | `o`            | 111            | ছোট o (Small o)               |
 87 | | `p`            | 112            | ছোট p (Small p)               |
 88 | | `q`            | 113            | ছোট q (Small q)               |
 89 | | `r`            | 114            | ছোট r (Small r)               |
 90 | | `s`            | 115            | ছোট s (Small s)               |
 91 | | `t`            | 116            | ছোট t (Small t)               |
 92 | | `u`            | 117            | ছোট u (Small u)               |
 93 | | `v`            | 118            | ছোট v (Small v)               |
 94 | | `w`            | 119            | ছোট w (Small w)               |
 95 | | `x`            | 120            | ছোট x (Small x)               |
 96 | | `y`            | 121            | ছোট y (Small y)               |
 97 | | `z`            | 122            | ছোট z (Small z)               |
 98 | | `{`            | 123            | ওপেন কিউরলি ব্র্যাকেট (Open Curly Bracket) |
 99 | | `|`            | 124            | পাইপ (Pipe)                   |
100 | | `}`            | 125            | ক্লোজ কিউরলি ব্র্যাকেট (Close Curly Bracket) |
101 | | `~`            | 126            | টিলড (~)                      |
102 | 
103 | ---
104 | 
105 | ### **📌 অন্যান্য গুরুত্বপূর্ণ কী:**
106 | | **Key**        | **ASCII Code** |
107 | |----------------|----------------|
108 | | `Backspace`    | 8              |
109 | | `Tab`          | 9              |
110 | | `Enter`        | 13             |
111 | | `Shift`        | 16             |
112 | | `Ctrl`         | 17             |
113 | | `Alt`          | 18             |
114 | | `CapsLock`     | 20             |
115 | | `Esc`          | 27             |
116 | | `Space`        | 32             |
117 | | `ArrowUp`      | 38             |
118 | | `ArrowDown`    | 40             |
119 | | `ArrowLeft`    | 37             |
120 | | `ArrowRight`   | 39             |
121 | 
122 | ---
123 | 
124 | ### **🎯 উপসংহার:**
125 | এটি **ASCII কোড** এর একটি তালিকা। এই কোড ব্যবহার করে আপনি কীবোর্ডের যেকোনো কী চিহ্নিত করতে পারেন এবং প্রোগ্রামে সেগুলোর মাধ্যমে অ্যাকশন বা ইভেন্ট ট্রিগার করতে পারেন।
126 | 


--------------------------------------------------------------------------------
/G. DOM/Dom-Event-English.md:
--------------------------------------------------------------------------------
  1 | # **JavaScript DOM Events - Everything You Need to Know 🚀**  
  2 | 
  3 | ## **What is the DOM?**  
  4 | The **DOM (Document Object Model)** is a representation of an HTML document as a **tree structure** where each HTML element is a **node**. JavaScript can manipulate this structure to change, add, or remove elements dynamically.
  5 | 
  6 | ## **What are JavaScript Events?**  
  7 | An **event** is an action that occurs in the browser, such as:  
  8 | ✅ Clicking a button 🖱️  
  9 | ✅ Typing in an input field ⌨️  
 10 | ✅ Scrolling a page 🖱️  
 11 | ✅ Hovering over an element 🎯  
 12 | 
 13 | JavaScript allows us to **listen** for these events and execute code in response.
 14 | 
 15 | ---
 16 | 
 17 | ## **1️⃣ Ways to Add Event Listeners**
 18 | ### **1. Inline Event Handling (Not Recommended ❌)**
 19 | Adding an event **directly in HTML**:
 20 | ```html
 21 | <button onclick="alert('Button Clicked!')">Click Me</button>
 22 | ```
 23 | 🔹 **Drawback:** Hard to manage for large projects.
 24 | 
 25 | ---
 26 | 
 27 | ### **2. Using the `onclick` Property (Better but Limited)**
 28 | Assigning an event **directly in JavaScript**:
 29 | ```html
 30 | <button id="myBtn">Click Me</button>
 31 | <script>
 32 |     let btn = document.getElementById("myBtn");
 33 |     btn.onclick = function () {
 34 |         alert("Button Clicked!");
 35 |     };
 36 | </script>
 37 | ```
 38 | 🔹 **Limitations:** Only **one** event handler can be assigned per event.
 39 | 
 40 | ---
 41 | 
 42 | ### **3. Using `addEventListener()` (Best Practice ✅)**
 43 | The **modern** and recommended way to handle events:
 44 | ```html
 45 | <button id="myBtn">Click Me</button>
 46 | <script>
 47 |     let btn = document.getElementById("myBtn");
 48 |     btn.addEventListener("click", function () {
 49 |         alert("Button Clicked!");
 50 |     });
 51 | </script>
 52 | ```
 53 | ✅ **Multiple event listeners** can be added.  
 54 | ✅ Works for **all types of events**.  
 55 | 
 56 | ---
 57 | 
 58 | ## **2️⃣ Common JavaScript Events**
 59 | | Event Type | Description |
 60 | |------------|-------------|
 61 | | `click` | When an element is clicked |
 62 | | `mouseover` | When mouse hovers over an element |
 63 | | `mouseout` | When mouse leaves an element |
 64 | | `keydown` | When a key is pressed |
 65 | | `keyup` | When a key is released |
 66 | | `change` | When an input value changes |
 67 | | `submit` | When a form is submitted |
 68 | | `load` | When the page finishes loading |
 69 | | `scroll` | When the page is scrolled |
 70 | 
 71 | ---
 72 | 
 73 | ## **3️⃣ Event Object (`event`)**
 74 | When an event happens, JavaScript provides an **event object** (`event` or `e`) with details.
 75 | 
 76 | ### **Example: Using the Event Object**
 77 | ```html
 78 | <button id="btn">Click Me</button>
 79 | <script>
 80 |     document.getElementById("btn").addEventListener("click", function (event) {
 81 |         console.log(event.type);  // Output: "click"
 82 |         console.log(event.target); // Output: <button>Click Me</button>
 83 |     });
 84 | </script>
 85 | ```
 86 | ✅ **`event.type`** → Tells which event occurred.  
 87 | ✅ **`event.target`** → Gives the element that triggered the event.  
 88 | 
 89 | ---
 90 | 
 91 | ## **4️⃣ Prevent Default Behavior (`event.preventDefault()`)**
 92 | Some elements have **default behavior** (e.g., links redirecting, form submission). We can **prevent** this.
 93 | 
 94 | ### **Example: Preventing Link Navigation**
 95 | ```html
 96 | <a href="https://google.com" id="myLink">Google</a>
 97 | <script>
 98 |     document.getElementById("myLink").addEventListener("click", function (event) {
 99 |         event.preventDefault(); // Stops navigation
100 |         alert("Link Clicked but not Redirecting!");
101 |     });
102 | </script>
103 | ```
104 | ✅ The link **won’t redirect** when clicked.
105 | 
106 | ---
107 | 
108 | ## **5️⃣ Event Propagation (Bubbling & Capturing)**
109 | Events can **propagate** (travel) through the **DOM hierarchy**.
110 | 
111 | ### **🔹 Event Bubbling (Default)**
112 | The event starts from the **target element** and moves **upward**.
113 | 
114 | ```html
115 | <div id="parent">
116 |     <button id="child">Click Me</button>
117 | </div>
118 | <script>
119 |     document.getElementById("parent").addEventListener("click", function () {
120 |         console.log("Parent Clicked!");
121 |     });
122 | 
123 |     document.getElementById("child").addEventListener("click", function () {
124 |         console.log("Button Clicked!");
125 |     });
126 | </script>
127 | ```
128 | **Output when clicking the button:**  
129 | ```
130 | Button Clicked!
131 | Parent Clicked!
132 | ```
133 | 🔹 The **button event happens first**, then the **parent event**.
134 | 
135 | ### **🔹 Stopping Bubbling (`event.stopPropagation()`)**
136 | ```javascript
137 | document.getElementById("child").addEventListener("click", function (event) {
138 |     console.log("Button Clicked!");
139 |     event.stopPropagation(); // Stops event from going to parent
140 | });
141 | ```
142 | Now **only** `"Button Clicked!"` will be logged.
143 | 
144 | ### **🔹 Event Capturing (Use `{ capture: true }`)**
145 | If we want the **parent to trigger first**, we use:
146 | ```javascript
147 | document.getElementById("parent").addEventListener("click", function () {
148 |     console.log("Parent Clicked!");
149 | }, true); // Capturing mode
150 | 
151 | document.getElementById("child").addEventListener("click", function () {
152 |     console.log("Button Clicked!");
153 | });
154 | ```
155 | **Output when clicking the button:**  
156 | ```
157 | Parent Clicked!
158 | Button Clicked!
159 | ```
160 | 🔹 The **parent event happens first**, then the **button event**.
161 | 
162 | ---
163 | 
164 | ## **6️⃣ Event Delegation (Handling Multiple Elements Efficiently)**
165 | Instead of adding event listeners to multiple child elements, we add **one event listener** to a parent and use **`event.target`**.
166 | 
167 | ### **Example: Event Delegation for Multiple Buttons**
168 | ```html
169 | <div id="buttonContainer">
170 |     <button class="btn">Button 1</button>
171 |     <button class="btn">Button 2</button>
172 |     <button class="btn">Button 3</button>
173 | </div>
174 | 
175 | <script>
176 |     document.getElementById("buttonContainer").addEventListener("click", function (event) {
177 |         if (event.target.classList.contains("btn")) {
178 |             alert(event.target.innerText + " Clicked!");
179 |         }
180 |     });
181 | </script>
182 | ```
183 | ✅ **More efficient** than adding separate listeners for each button.  
184 | 
185 | ---
186 | 
187 | ## **7️⃣ Removing Event Listeners (`removeEventListener()`)**
188 | We can remove an event listener when it's no longer needed.
189 | 
190 | ### **Example: Removing Click Event After First Click**
191 | ```html
192 | <button id="stopBtn">Click Me</button>
193 | <script>
194 |     function showMessage() {
195 |         alert("Button Clicked!");
196 |         document.getElementById("stopBtn").removeEventListener("click", showMessage);
197 |     }
198 | 
199 |     document.getElementById("stopBtn").addEventListener("click", showMessage);
200 | </script>
201 | ```
202 | ✅ The event listener **removes itself** after the first click.
203 | 
204 | ---
205 | 
206 | ## **🔥 Real-Life Applications of JavaScript Events**
207 | ✅ **Form Validation** – Prevent form submission if fields are empty.  
208 | ✅ **Image Sliders** – Change images on button click.  
209 | ✅ **Infinite Scroll** – Load more content as you scroll.  
210 | ✅ **Dropdown Menus** – Open/close menus on hover or click.  
211 | ✅ **Light/Dark Mode Toggle** – Change theme on button click.  
212 | 
213 | ---
214 | 
215 | ## **🎯 Final Summary**
216 | ✔️ **`addEventListener()`** → Best practice for handling events.  
217 | ✔️ **Event Object (`event`)** → Gives details about the event.  
218 | ✔️ **Prevent Default (`event.preventDefault()`)** → Stops default browser behavior.  
219 | ✔️ **Event Propagation (Bubbling & Capturing)** → How events travel in the DOM.  
220 | ✔️ **Event Delegation** → Attach events to parent elements for efficiency.  
221 | ✔️ **`removeEventListener()`** → Remove event listeners when needed.  
222 | 
223 | ---
224 | 
225 | ## **🔥 Ready to Practice? Try These Challenges!**
226 | 1️⃣ Create a button that changes the **background color** randomly when clicked.  
227 | 2️⃣ Build a **custom dropdown menu** using JavaScript events.  
228 | 3️⃣ Implement a **live character counter** for an input field. 
229 | 


--------------------------------------------------------------------------------
/0. Introduction/JS-Intro-English.md:
--------------------------------------------------------------------------------
  1 | ### **JavaScript - Everything You Need to Know**
  2 | 
  3 | JavaScript is a **high-level, interpreted programming language** primarily used for building dynamic, interactive websites. It is one of the core technologies of web development, along with HTML and CSS. Here’s everything you should know about JavaScript:
  4 | 
  5 | ---
  6 | 
  7 | ## **1. What is JavaScript?**
  8 | JavaScript is a **scripting language** that allows you to create dynamically updating content, control multimedia, animate images, and much more. It is **client-side**, meaning it runs in the browser and interacts directly with HTML and CSS.
  9 | 
 10 | ---
 11 | 
 12 | ## **2. Basics of JavaScript**
 13 | 
 14 | ### **a. Writing JavaScript**
 15 | JavaScript code can be written directly within the `<script>` tag in an HTML file or in external `.js` files.
 16 | 
 17 | ### **Example of Inline Script in HTML:**
 18 | ```html
 19 | <!DOCTYPE html>
 20 | <html lang="en">
 21 | <head>
 22 |     <meta charset="UTF-8">
 23 |     <title>JavaScript Example</title>
 24 | </head>
 25 | <body>
 26 | 
 27 |     <h1>Hello, JavaScript!</h1>
 28 | 
 29 |     <script>
 30 |         alert("Welcome to JavaScript!");
 31 |     </script>
 32 | 
 33 | </body>
 34 | </html>
 35 | ```
 36 | 
 37 | ### **Example of External JavaScript File:**
 38 | ```html
 39 | <!DOCTYPE html>
 40 | <html lang="en">
 41 | <head>
 42 |     <meta charset="UTF-8">
 43 |     <title>External JavaScript</title>
 44 |     <script src="script.js"></script>
 45 | </head>
 46 | <body>
 47 |     <h1>Welcome to JavaScript</h1>
 48 | </body>
 49 | </html>
 50 | ```
 51 | In the `script.js` file:
 52 | ```javascript
 53 | alert("This is an external JavaScript file!");
 54 | ```
 55 | 
 56 | ---
 57 | 
 58 | ## **3. Variables and Data Types**
 59 | JavaScript is **loosely typed**, meaning you don’t need to declare the data type of a variable.
 60 | 
 61 | ### **Declaring Variables**
 62 | You can declare variables using:
 63 | - `let` (block-scoped)
 64 | - `const` (block-scoped, read-only)
 65 | - `var` (function-scoped, old way)
 66 | 
 67 | ### **Example:**
 68 | ```javascript
 69 | let name = "Shihab";
 70 | const age = 25;
 71 | var city = "Dhaka";
 72 | ```
 73 | 
 74 | ### **Data Types**
 75 | JavaScript has 7 primitive data types:
 76 | 1. **String** – Represents text (e.g., `"Hello"`)
 77 | 2. **Number** – Represents numbers (e.g., `25`)
 78 | 3. **BigInt** – Represents large integers (e.g., `100n`)
 79 | 4. **Boolean** – Represents `true` or `false`
 80 | 5. **undefined** – Represents a variable that has been declared but not assigned a value
 81 | 6. **null** – Represents an intentional absence of value
 82 | 7. **Symbol** – Represents a unique, immutable value
 83 | 
 84 | ---
 85 | 
 86 | ## **4. Operators**
 87 | JavaScript has various operators to perform operations on variables and values:
 88 | 
 89 | ### **a. Arithmetic Operators**:
 90 | ```javascript
 91 | let x = 5, y = 3;
 92 | console.log(x + y);  // Output: 8
 93 | ```
 94 | 
 95 | ### **b. Assignment Operators**:
 96 | ```javascript
 97 | let x = 10;
 98 | x += 5;  // x = x + 5
 99 | console.log(x);  // Output: 15
100 | ```
101 | 
102 | ### **c. Comparison Operators**:
103 | ```javascript
104 | console.log(5 > 3);  // Output: true
105 | ```
106 | 
107 | ### **d. Logical Operators**:
108 | ```javascript
109 | let x = true, y = false;
110 | console.log(x && y);  // Output: false
111 | ```
112 | 
113 | ---
114 | 
115 | ## **5. Control Flow - Conditional Statements**
116 | 
117 | ### **a. if...else Statement**
118 | ```javascript
119 | let age = 20;
120 | if (age >= 18) {
121 |     console.log("You are an adult.");
122 | } else {
123 |     console.log("You are a minor.");
124 | }
125 | ```
126 | 
127 | ### **b. switch Statement**
128 | ```javascript
129 | let day = 2;
130 | switch (day) {
131 |     case 1: console.log("Monday"); break;
132 |     case 2: console.log("Tuesday"); break;
133 |     default: console.log("Unknown day");
134 | }
135 | ```
136 | 
137 | ---
138 | 
139 | ## **6. Functions**
140 | Functions allow you to group code into reusable blocks.
141 | 
142 | ### **Function Declaration:**
143 | ```javascript
144 | function greet(name) {
145 |     console.log("Hello, " + name);
146 | }
147 | greet("Shihab");  // Output: "Hello, Shihab"
148 | ```
149 | 
150 | ### **Function Expression:**
151 | ```javascript
152 | const greet = function(name) {
153 |     console.log("Hello, " + name);
154 | };
155 | greet("Shihab");  // Output: "Hello, Shihab"
156 | ```
157 | 
158 | ### **Arrow Functions** (ES6+):
159 | ```javascript
160 | const greet = (name) => console.log("Hello, " + name);
161 | greet("Shihab");  // Output: "Hello, Shihab"
162 | ```
163 | 
164 | ---
165 | 
166 | ## **7. Loops**
167 | 
168 | ### **a. for Loop**
169 | ```javascript
170 | for (let i = 0; i < 5; i++) {
171 |     console.log(i);  // Output: 0 1 2 3 4
172 | }
173 | ```
174 | 
175 | ### **b. while Loop**
176 | ```javascript
177 | let i = 0;
178 | while (i < 5) {
179 |     console.log(i);  // Output: 0 1 2 3 4
180 |     i++;
181 | }
182 | ```
183 | 
184 | ### **c. forEach Loop (Array method)**
185 | ```javascript
186 | let colors = ["Red", "Green", "Blue"];
187 | colors.forEach((color) => {
188 |     console.log(color);  // Output: Red Green Blue
189 | });
190 | ```
191 | 
192 | ---
193 | 
194 | ## **8. Arrays and Objects**
195 | 
196 | ### **a. Arrays**
197 | Arrays are ordered collections of items, and each item has an index.
198 | 
199 | ```javascript
200 | let fruits = ["Apple", "Banana", "Mango"];
201 | console.log(fruits[0]);  // Output: Apple
202 | ```
203 | 
204 | ### **b. Objects**
205 | Objects store collections of key-value pairs.
206 | 
207 | ```javascript
208 | let person = {
209 |     name: "Shihab",
210 |     age: 25,
211 |     city: "Dhaka"
212 | };
213 | console.log(person.name);  // Output: Shihab
214 | ```
215 | 
216 | ---
217 | 
218 | ## **9. DOM Manipulation**
219 | JavaScript interacts with HTML through the **Document Object Model (DOM)**. The DOM represents the structure of a webpage.
220 | 
221 | ### **Accessing Elements**:
222 | ```javascript
223 | let heading = document.getElementById("myHeading");
224 | console.log(heading.innerHTML);
225 | ```
226 | 
227 | ### **Changing Element Content**:
228 | ```javascript
229 | heading.innerHTML = "Hello, JavaScript!";
230 | ```
231 | 
232 | ### **Event Handling**:
233 | ```javascript
234 | document.getElementById("myButton").addEventListener("click", function() {
235 |     alert("Button clicked!");
236 | });
237 | ```
238 | 
239 | ---
240 | 
241 | ## **10. ES6+ Features (Modern JavaScript)**
242 | 
243 | ### **a. let, const (Block-scoping)**
244 | ```javascript
245 | let x = 10;
246 | const y = 20;
247 | ```
248 | 
249 | ### **b. Template Literals** (String Interpolation)
250 | ```javascript
251 | let name = "Shihab";
252 | console.log(`Hello, ${name}!`);  // Output: "Hello, Shihab!"
253 | ```
254 | 
255 | ### **c. Destructuring Assignment**
256 | ```javascript
257 | let person = { name: "Shihab", age: 25 };
258 | let { name, age } = person;
259 | console.log(name);  // Output: "Shihab"
260 | ```
261 | 
262 | ### **d. Spread and Rest Operators**
263 | ```javascript
264 | let arr1 = [1, 2, 3];
265 | let arr2 = [...arr1, 4, 5];  // Spread operator
266 | console.log(arr2);  // Output: [1, 2, 3, 4, 5]
267 | 
268 | const sum = (...numbers) => numbers.reduce((total, num) => total + num, 0);
269 | console.log(sum(1, 2, 3));  // Output: 6
270 | ```
271 | 
272 | ### **e. Promises (Asynchronous Programming)**
273 | ```javascript
274 | let myPromise = new Promise((resolve, reject) => {
275 |     let success = true;
276 |     if (success) {
277 |         resolve("Operation successful!");
278 |     } else {
279 |         reject("Operation failed.");
280 |     }
281 | });
282 | 
283 | myPromise.then((message) => {
284 |     console.log(message);
285 | }).catch((message) => {
286 |     console.log(message);
287 | });
288 | ```
289 | 
290 | ---
291 | 
292 | ## **11. Error Handling - try...catch**
293 | JavaScript provides the `try...catch` statement for catching errors.
294 | 
295 | ### **Example:**
296 | ```javascript
297 | try {
298 |     let x = y;  // ReferenceError (y is not defined)
299 | } catch (error) {
300 |     console.log("An error occurred: " + error.message);
301 | }
302 | ```
303 | 
304 | ---
305 | 
306 | ## **Conclusion**
307 | JavaScript is a versatile language that powers the web. It allows you to build interactive, dynamic websites and perform many types of tasks, from simple operations to complex data processing and animations.
308 | 
309 | Would you like to dive deeper into any specific JavaScript topic or practice with examples?


--------------------------------------------------------------------------------
/C. Array/Array-Bangla.md:
--------------------------------------------------------------------------------
  1 | ### **📌 জাভাস্ক্রিপ্টের অ্যারে (Array) সম্পর্কে সম্পূর্ণ গাইড**  
  2 | 
  3 | অ্যারে হলো এক ধরনের ডাটা স্ট্রাকচার, যা একাধিক ভ্যালু একসাথে সংরক্ষণ করতে পারে।  
  4 | 
  5 | ---
  6 | ## **🔹 কিভাবে অ্যারে ডিক্লেয়ার করবেন?**  
  7 | জাভাস্ক্রিপ্টে অ্যারে ডিক্লেয়ার করার কয়েকটি উপায় আছে:  
  8 | 
  9 | ### **✅ লিটারাল সিনট্যাক্স ব্যবহার করে (সবচেয়ে সাধারণ পদ্ধতি)**
 10 | ```javascript
 11 | let animals = ["Dog", "Cat", "Rabbit", "Bird"];
 12 | console.log(animals); // Output: ["Dog", "Cat", "Rabbit", "Bird"]
 13 | ```
 14 | 
 15 | ### **✅ Array কনস্ট্রাক্টর ব্যবহার করে**
 16 | ```javascript
 17 | let numbers = new Array(10, 20, 30, 40);
 18 | console.log(numbers); // Output: [10, 20, 30, 40]
 19 | ```
 20 | 
 21 | ### **✅ খালি অ্যারে তৈরি করে পরে ডাটা যোগ করা**
 22 | ```javascript
 23 | let fruits = [];
 24 | fruits[0] = "Mango";
 25 | fruits[1] = "Banana";
 26 | console.log(fruits); // Output: ["Mango", "Banana"]
 27 | ```
 28 | 
 29 | ---
 30 | ## **🔹 অ্যারের ইনডেক্স ও অ্যাক্সেস করা**  
 31 | অ্যারে ইনডেক্স **০ (zero-based indexing)** থেকে শুরু হয়।  
 32 | 
 33 | ```javascript
 34 | let colors = ["Red", "Green", "Blue"];
 35 | console.log(colors[0]); // Output: Red
 36 | console.log(colors[1]); // Output: Green
 37 | console.log(colors[2]); // Output: Blue
 38 | ```
 39 | 
 40 | ---
 41 | ## **🔹 গুরুত্বপূর্ণ অ্যারে মেথড (Methods)**  
 42 | 
 43 | ### **✅ ১. length - অ্যারের দৈর্ঘ্য (length) বের করা**
 44 | ```javascript
 45 | let numbers = [10, 20, 30, 40];
 46 | console.log(numbers.length); // Output: 4
 47 | ```
 48 | 
 49 | ### **✅ ২. push() - নতুন উপাদান শেষে যোগ করা**
 50 | ```javascript
 51 | let fruits = ["Apple", "Banana"];
 52 | fruits.push("Orange");
 53 | console.log(fruits); // Output: ["Apple", "Banana", "Orange"]
 54 | ```
 55 | 
 56 | ### **✅ ৩. pop() - শেষের উপাদান সরানো**
 57 | ```javascript
 58 | let fruits = ["Apple", "Banana", "Orange"];
 59 | fruits.pop();
 60 | console.log(fruits); // Output: ["Apple", "Banana"]
 61 | ```
 62 | 
 63 | ### **✅ ৪. unshift() - শুরুতে নতুন উপাদান যোগ করা**
 64 | ```javascript
 65 | let fruits = ["Banana", "Orange"];
 66 | fruits.unshift("Apple");
 67 | console.log(fruits); // Output: ["Apple", "Banana", "Orange"]
 68 | ```
 69 | 
 70 | ### **✅ ৫. shift() - প্রথম উপাদান সরানো**
 71 | ```javascript
 72 | let fruits = ["Apple", "Banana", "Orange"];
 73 | fruits.shift();
 74 | console.log(fruits); // Output: ["Banana", "Orange"]
 75 | ```
 76 | 
 77 | ### **✅ ৬. indexOf() - নির্দিষ্ট উপাদানের ইনডেক্স খুঁজে বের করা**
 78 | ```javascript
 79 | let animals = ["Dog", "Cat", "Bird"];
 80 | console.log(animals.indexOf("Cat")); // Output: 1
 81 | console.log(animals.indexOf("Lion")); // Output: -1 (না থাকলে -1 রিটার্ন করে)
 82 | ```
 83 | 
 84 | ### **✅ ৭. includes() - কোনো উপাদান আছে কিনা চেক করা**
 85 | ```javascript
 86 | let animals = ["Dog", "Cat", "Bird"];
 87 | console.log(animals.includes("Cat")); // Output: true
 88 | console.log(animals.includes("Lion")); // Output: false
 89 | ```
 90 | 
 91 | ### **✅ ৮. slice() - নির্দিষ্ট অংশ কপি করা (অরিজিনাল অ্যারে পরিবর্তন হয় না)**
 92 | ```javascript
 93 | let numbers = [10, 20, 30, 40, 50];
 94 | let newNumbers = numbers.slice(1, 4); // ১ থেকে ৪ (৪ ইনডেক্স বাদ)
 95 | console.log(newNumbers); // Output: [20, 30, 40]
 96 | ```
 97 | 
 98 | ### **✅ ৯. splice() - অ্যারে থেকে উপাদান মুছে ফেলা বা যুক্ত করা (অরিজিনাল অ্যারে পরিবর্তন হয়)**
 99 | ```javascript
100 | let numbers = [10, 20, 30, 40, 50];
101 | numbers.splice(2, 1); // ২ নম্বর ইনডেক্স থেকে ১টি উপাদান রিমুভ
102 | console.log(numbers); // Output: [10, 20, 40, 50]
103 | ```
104 | 
105 | ### **✅ ১০. reverse() - অ্যারের উপাদানগুলো উল্টানো**
106 | ```javascript
107 | let letters = ["A", "B", "C"];
108 | letters.reverse();
109 | console.log(letters); // Output: ["C", "B", "A"]
110 | ```
111 | 
112 | ### **✅ ১১. sort() - অ্যারে সাজানো (Alphabetically)**
113 | ```javascript
114 | let names = ["Shihab", "Rahim", "Karim", "Abdul"];
115 | names.sort();
116 | console.log(names); // Output: ["Abdul", "Karim", "Rahim", "Shihab"]
117 | ```
118 | 
119 | ### **✅ ১২. map() - প্রতিটি উপাদানে ফাংশন প্রয়োগ করা**
120 | ```javascript
121 | let numbers = [1, 2, 3, 4, 5];
122 | let squares = numbers.map(num => num * num);
123 | console.log(squares); // Output: [1, 4, 9, 16, 25]
124 | ```
125 | 
126 | ### **✅ ১৩. filter() - নির্দিষ্ট শর্ত অনুযায়ী ফিল্টার করা**
127 | ```javascript
128 | let numbers = [10, 20, 25, 30, 35, 40];
129 | let filteredNumbers = numbers.filter(num => num > 25);
130 | console.log(filteredNumbers); // Output: [30, 35, 40]
131 | ```
132 | 
133 | ### **✅ ১৪. reduce() - সমস্ত উপাদান যোগ বা অন্য কোনো অপারেশন করা**
134 | ```javascript
135 | let numbers = [1, 2, 3, 4, 5];
136 | let sum = numbers.reduce((total, num) => total + num, 0);
137 | console.log(sum); // Output: 15
138 | ```
139 | 
140 | ---
141 | ## **🔹 মাল্টিডাইমেনশনাল (Two-Dimensional) অ্যারে**  
142 | একটি অ্যারের মধ্যে আরেকটি অ্যারে থাকলে তাকে মাল্টিডাইমেনশনাল অ্যারে বলা হয়।  
143 | 
144 | ```javascript
145 | let matrix = [
146 |     [1, 2, 3],
147 |     [4, 5, 6],
148 |     [7, 8, 9]
149 | ];
150 | 
151 | console.log(matrix[0][1]); // Output: 2
152 | console.log(matrix[2][2]); // Output: 9
153 | ```
154 | 
155 | ---
156 | ## **🔹 অ্যারের ওপর লুপ চালানো**  
157 | 
158 | ### **✅ for লুপ ব্যবহার করে**
159 | ```javascript
160 | let fruits = ["Mango", "Banana", "Apple"];
161 | for (let i = 0; i < fruits.length; i++) {
162 |     console.log(fruits[i]);
163 | }
164 | ```
165 | 
166 | ### **✅ forEach() মেথড ব্যবহার করে**
167 | ```javascript
168 | let fruits = ["Mango", "Banana", "Apple"];
169 | fruits.forEach(fruit => console.log(fruit));
170 | ```
171 | 
172 | ### **✅ for...of লুপ ব্যবহার করে**
173 | ```javascript
174 | let colors = ["Red", "Green", "Blue"];
175 | for (let color of colors) {
176 |     console.log(color);
177 | }
178 | ```
179 | 
180 | ---
181 | 
182 | ## **📌 JavaScript Array Methods (অ্যারে মেথড) - Table Format**  
183 | 
184 | | মেথড | বর্ণনা | উদাহরণ | আউটপুট |
185 | |------------|---------------------------------|-------------------------------------|--------------------------|
186 | | `push()` | নতুন এলিমেন্ট অ্যারের শেষে যোগ করে | ```javascript let arr = [1, 2, 3]; arr.push(4); console.log(arr); ``` | `[1, 2, 3, 4]` |
187 | | `pop()` | অ্যারের শেষ এলিমেন্ট সরিয়ে রিটার্ন করে | ```javascript let arr = [1, 2, 3]; arr.pop(); console.log(arr); ``` | `[1, 2]` |
188 | | `shift()` | অ্যারের প্রথম এলিমেন্ট সরিয়ে রিটার্ন করে | ```javascript let arr = [1, 2, 3]; arr.shift(); console.log(arr); ``` | `[2, 3]` |
189 | | `unshift()` | নতুন এলিমেন্ট অ্যারের শুরুতে যোগ করে | ```javascript let arr = [2, 3]; arr.unshift(1); console.log(arr); ``` | `[1, 2, 3]` |
190 | | `concat()` | দুটি বা তার বেশি অ্যারে যুক্ত করে নতুন অ্যারে তৈরি করে | ```javascript let arr1 = [1, 2], arr2 = [3, 4]; let newArr = arr1.concat(arr2); console.log(newArr); ``` | `[1, 2, 3, 4]` |
191 | | `slice()` | নির্দিষ্ট অংশ কেটে নতুন অ্যারে তৈরি করে | ```javascript let arr = [1, 2, 3, 4, 5]; let sliced = arr.slice(1, 4); console.log(sliced); ``` | `[2, 3, 4]` |
192 | | `splice()` | নির্দিষ্ট স্থানে এলিমেন্ট যোগ বা অপসারণ করে | ```javascript let arr = [1, 2, 3, 4]; arr.splice(2, 1, 99); console.log(arr); ``` | `[1, 2, 99, 4]` |
193 | | `indexOf()` | নির্দিষ্ট মানের ইনডেক্স খুঁজে বের করে | ```javascript let arr = [10, 20, 30]; console.log(arr.indexOf(20)); ``` | `1` |
194 | | `includes()` | নির্দিষ্ট মান অ্যারেতে আছে কিনা চেক করে | ```javascript let arr = [1, 2, 3]; console.log(arr.includes(2)); ``` | `true` |
195 | | `join()` | অ্যারের সকল এলিমেন্ট স্ট্রিং আকারে যোগ করে | ```javascript let arr = ["Hello", "World"]; console.log(arr.join(" ")); ``` | `"Hello World"` |
196 | | `reverse()` | অ্যারে উল্টে দেয় | ```javascript let arr = [1, 2, 3]; arr.reverse(); console.log(arr); ``` | `[3, 2, 1]` |
197 | | `sort()` | অ্যারে ক্রমানুসারে সাজায় | ```javascript let arr = [3, 1, 4, 2]; arr.sort(); console.log(arr); ``` | `[1, 2, 3, 4]` |
198 | | `map()` | প্রতিটি এলিমেন্টের উপর ফাংশন চালিয়ে নতুন অ্যারে তৈরি করে | ```javascript let arr = [1, 2, 3]; let squared = arr.map(x => x * x); console.log(squared); ``` | `[1, 4, 9]` |
199 | | `filter()` | শর্ত অনুযায়ী নতুন অ্যারে তৈরি করে | ```javascript let arr = [1, 2, 3, 4]; let even = arr.filter(x => x % 2 === 0); console.log(even); ``` | `[2, 4]` |
200 | | `reduce()` | সমস্ত এলিমেন্ট একত্র করে একটি মান তৈরি করে | ```javascript let arr = [1, 2, 3, 4]; let sum = arr.reduce((a, b) => a + b, 0); console.log(sum); ``` | `10` |
201 | | `find()` | শর্ত মিলে এমন প্রথম এলিমেন্ট খুঁজে বের করে | ```javascript let arr = [10, 20, 30]; let found = arr.find(x => x > 15); console.log(found); ``` | `20` |
202 | | `findIndex()` | শর্ত মিলে এমন প্রথম এলিমেন্টের ইনডেক্স দেয় | ```javascript let arr = [5, 10, 15]; let index = arr.findIndex(x => x > 8); console.log(index); ``` | `1` |
203 | | `every()` | সব এলিমেন্ট শর্ত মেনে চললে `true` দেয় | ```javascript let arr = [2, 4, 6]; console.log(arr.every(x => x % 2 === 0)); ``` | `true` |
204 | | `some()` | অন্তত একটি এলিমেন্ট শর্ত মেনে চললে `true` দেয় | ```javascript let arr = [1, 3, 5]; console.log(arr.some(x => x % 2 === 0)); ``` | `false` |
205 | | `fill()` | অ্যারের সব এলিমেন্ট নির্দিষ্ট মান দিয়ে পূরণ করে | ```javascript let arr = [1, 2, 3]; arr.fill(0); console.log(arr); ``` | `[0, 0, 0]` |
206 | 
207 | 
208 | ---
209 | ## **🔹 শেষ কথা**  
210 | জাভাস্ক্রিপ্টের **অ্যারে** খুবই শক্তিশালী এবং ব্যবহারবান্ধব। এটি ডাটা সংরক্ষণ, সাজানো এবং প্রসেসিংয়ের জন্য অপরিহার্য। তুমি যদি এগুলো ভালোভাবে শিখে নাও, তাহলে জাভাস্ক্রিপ্টে আরও দক্ষ হয়ে যাবে। 😊  
211 | 
212 | তোমার যদি কোনো নির্দিষ্ট জায়গায় সমস্যা হয়, বলো, আমি ব্যাখ্যা করে দেব! 🚀


--------------------------------------------------------------------------------
/E. Object/Object-Bangla.md:
--------------------------------------------------------------------------------
  1 | # **🔥 JavaScript Object - সম্পূর্ণ গাইড (বাংলা ও বাস্তব উদাহরণ) 🚀**  
  2 | 
  3 | ## **📌 Object কী?**  
  4 | 🔹 **Object** হল JavaScript-এর একটি ডাটা টাইপ, যা **key-value pair** আকারে ডাটা সংরক্ষণ করে।  
  5 | 🔹 এটি **properties** (গুণাবলী) এবং **methods** (ফাংশন) ধারণ করতে পারে।  
  6 | 🔹 Array-এর মতো Object-ও **multiple data store** করতে পারে, কিন্তু এটি **index-এর পরিবর্তে key ব্যবহার করে**।  
  7 | 
  8 | ---
  9 | 
 10 | ## **📌 Object তৈরির নিয়ম (Syntax)**  
 11 | ```javascript
 12 | let objectName = {
 13 |   key1: value1,
 14 |   key2: value2,
 15 |   key3: value3
 16 | };
 17 | ```
 18 | 
 19 | ✅ **Example: সাধারণ Object**  
 20 | ```javascript
 21 | let person = {
 22 |   name: "Shihab",
 23 |   age: 25,
 24 |   profession: "Web Developer"
 25 | };
 26 | console.log(person);
 27 | ```
 28 | **Output:**  
 29 | ```
 30 | { name: 'Shihab', age: 25, profession: 'Web Developer' }
 31 | ```
 32 | 
 33 | ---
 34 | 
 35 | ## **📌 Object এর প্রপার্টি (Property) অ্যাক্সেস করার উপায়**
 36 | 🔹 **২ভাবে Object-এর মান (value) পাওয়া যায়:**  
 37 | ✅ **Dot Notation:** `object.property`  
 38 | ✅ **Bracket Notation:** `object["property"]`  
 39 | 
 40 | ```javascript
 41 | console.log(person.name);      // "Shihab"  (Dot Notation)
 42 | console.log(person["age"]);    // 25        (Bracket Notation)
 43 | ```
 44 | 
 45 | ---
 46 | 
 47 | ## **📌 Object এর মধ্যে Function (Method) রাখা**
 48 | Object-এর মধ্যে **Function রাখা গেলে সেটাকে Method বলা হয়।**  
 49 | 
 50 | ```javascript
 51 | let person = {
 52 |   name: "Shihab",
 53 |   age: 25,
 54 |   profession: "Web Developer",
 55 |   greet: function () {
 56 |     return `Hello, my name is ${this.name}!`;
 57 |   }
 58 | };
 59 | 
 60 | console.log(person.greet());
 61 | ```
 62 | ✅ **Output:**  
 63 | ```
 64 | Hello, my name is Shihab!
 65 | ```
 66 | 
 67 | 🔹 **এই ক্ষেত্রে `this.name` মানে হলো person Object-এর `name` property।**  
 68 | 
 69 | ---
 70 | 
 71 | ## **📌 Object-এ নতুন Property যোগ করা ও পরিবর্তন করা**
 72 | ✅ **নতুন Property যোগ করা:**  
 73 | ```javascript
 74 | person.country = "Bangladesh";
 75 | console.log(person);
 76 | ```
 77 | 
 78 | ✅ **Property-এর মান পরিবর্তন করা:**  
 79 | ```javascript
 80 | person.age = 30;
 81 | console.log(person.age);  // 30
 82 | ```
 83 | 
 84 | ✅ **Property মুছে ফেলা:**  
 85 | ```javascript
 86 | delete person.profession;
 87 | console.log(person);
 88 | ```
 89 | 
 90 | ---
 91 | 
 92 | ## **📌 Object Constructor দিয়ে Object তৈরি**
 93 | আমরা `new Object()` কন্সট্রাক্টর ব্যবহার করেও Object তৈরি করতে পারি।  
 94 | 
 95 | ```javascript
 96 | let car = new Object();
 97 | car.brand = "Toyota";
 98 | car.model = "Corolla";
 99 | car.year = 2022;
100 | 
101 | console.log(car);
102 | ```
103 | ✅ **Output:**  
104 | ```
105 | { brand: 'Toyota', model: 'Corolla', year: 2022 }
106 | ```
107 | 
108 | ---
109 | 
110 | ## **📌 Object Constructor Function দিয়ে একাধিক Object তৈরি**
111 | ```javascript
112 | function Person(name, age, profession) {
113 |   this.name = name;
114 |   this.age = age;
115 |   this.profession = profession;
116 | }
117 | 
118 | let person1 = new Person("Shihab", 25, "Web Developer");
119 | let person2 = new Person("Rahim", 30, "Software Engineer");
120 | 
121 | console.log(person1);
122 | console.log(person2);
123 | ```
124 | ✅ **Output:**  
125 | ```
126 | Person { name: 'Shihab', age: 25, profession: 'Web Developer' }
127 | Person { name: 'Rahim', age: 30, profession: 'Software Engineer' }
128 | ```
129 | 
130 | ---
131 | 
132 | ## **📌 Object এর মধ্যে অন্য Object রাখা (Nested Object)**
133 | ```javascript
134 | let student = {
135 |   name: "Shihab",
136 |   details: {
137 |     age: 25,
138 |     class: "Final Year",
139 |     subjects: ["Math", "Physics", "Computer Science"]
140 |   }
141 | };
142 | 
143 | console.log(student.details.class);  // "Final Year"
144 | console.log(student.details.subjects[1]);  // "Physics"
145 | ```
146 | 
147 | ---
148 | 
149 | ## **📌 Object-এর মধ্যে Loop চালানো (for...in Loop)**
150 | `for...in` লুপ ব্যবহার করে আমরা Object-এর **সকল প্রপার্টি অ্যাক্সেস করতে পারি**।  
151 | 
152 | ```javascript
153 | let person = {
154 |   name: "Shihab",
155 |   age: 25,
156 |   profession: "Web Developer"
157 | };
158 | 
159 | for (let key in person) {
160 |   console.log(`${key}: ${person[key]}`);
161 | }
162 | ```
163 | ✅ **Output:**  
164 | ```
165 | name: Shihab
166 | age: 25
167 | profession: Web Developer
168 | ```
169 | 
170 | ---
171 | 
172 | ## **📌 Object থেকে কেবল Keys বা Values বের করা**
173 | ✅ **শুধু Keys বের করা:**  
174 | ```javascript
175 | console.log(Object.keys(person)); 
176 | // ["name", "age", "profession"]
177 | ```
178 | 
179 | ✅ **শুধু Values বের করা:**  
180 | ```javascript
181 | console.log(Object.values(person)); 
182 | // ["Shihab", 25, "Web Developer"]
183 | ```
184 | 
185 | ✅ **Keys ও Values একসাথে বের করা:**  
186 | ```javascript
187 | console.log(Object.entries(person)); 
188 | // [["name", "Shihab"], ["age", 25], ["profession", "Web Developer"]]
189 | ```
190 | 
191 | ---
192 | 
193 | ## **📌 Object Spread Operator (`...`)**
194 | ✅ **Object Copy করা:**  
195 | ```javascript
196 | let newPerson = { ...person };
197 | console.log(newPerson);
198 | ```
199 | 
200 | ✅ **দুটি Object একসাথে মিশানো:**  
201 | ```javascript
202 | let additionalInfo = { country: "Bangladesh", hobby: "Coding" };
203 | let fullPerson = { ...person, ...additionalInfo };
204 | 
205 | console.log(fullPerson);
206 | ```
207 | ✅ **Output:**  
208 | ```
209 | {
210 |   name: 'Shihab',
211 |   age: 25,
212 |   profession: 'Web Developer',
213 |   country: 'Bangladesh',
214 |   hobby: 'Coding'
215 | }
216 | ```
217 | 
218 | ---
219 | 
220 | ## **📌 Object Destructuring (Object থেকে নির্দিষ্ট মান বের করা)**
221 | ```javascript
222 | let person = {
223 |   name: "Shihab",
224 |   age: 25,
225 |   profession: "Web Developer"
226 | };
227 | 
228 | let { name, profession } = person;
229 | console.log(name);       // "Shihab"
230 | console.log(profession); // "Web Developer"
231 | ```
232 | 
233 | ---
234 | 
235 | ## **📌 JSON (JavaScript Object Notation) - Object থেকে JSON এবং JSON থেকে Object**
236 | ✅ **Object থেকে JSON বানানো:**  
237 | ```javascript
238 | let jsonData = JSON.stringify(person);
239 | console.log(jsonData);
240 | ```
241 | ✅ **JSON থেকে Object বানানো:**  
242 | ```javascript
243 | let newPerson = JSON.parse(jsonData);
244 | console.log(newPerson);
245 | ```
246 | 
247 | ---
248 | 
249 | নিচে JavaScript-এ Object Methods-এর তালিকা (table format) দেওয়া হলো:
250 | 
251 | | **Method Name**           | **Description**                                                                 | **Example**                                                                                   |
252 | |---------------------------|---------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------|
253 | | `Object.keys()`            | একটি অবজেক্টের সব কী (properties) কে অ্যারেতে রিটার্ন করে।                      | `Object.keys({name: 'John', age: 30})` → `['name', 'age']`                                  |
254 | | `Object.values()`          | একটি অবজেক্টের সব ভ্যালু (properties values) কে অ্যারেতে রিটার্ন করে।           | `Object.values({name: 'John', age: 30})` → `['John', 30]`                                  |
255 | | `Object.entries()`         | একটি অবজেক্টের [key, value] পেয়ারকে অ্যারেতে রিটার্ন করে।                       | `Object.entries({name: 'John', age: 30})` → `[['name', 'John'], ['age', 30]]`               |
256 | | `Object.assign()`          | একটি বা একাধিক অবজেক্টের মান কপি করে, অন্য একটি অবজেক্টে যুক্ত করে।             | `Object.assign({}, {name: 'John'}, {age: 30})` → `{name: 'John', age: 30}`                   |
257 | | `Object.hasOwnProperty()`  | একটি অবজেক্টের নির্দিষ্ট কী (property) আছে কিনা তা চেক করে।                     | `const obj = {name: 'John'}; obj.hasOwnProperty('name')` → `true`                            |
258 | | `Object.is()`              | দুটি অবজেক্ট বা ভ্যালুর সমতা চেক করে (strict equality)।                          | `Object.is(1, 1)` → `true` <br> `Object.is(1, '1')` → `false`                               |
259 | | `Object.freeze()`          | একটি অবজেক্টকে সম্পূর্ণভাবে পরিবর্তন থেকে রক্ষা করে (immutable বানায়)।          | `const obj = {name: 'John'}; Object.freeze(obj); obj.name = 'Doe';` → `{name: 'John'}`       |
260 | | `Object.seal()`            | একটি অবজেক্টে নতুন প্রপার্টি যোগ করা থেকে বিরত রাখে, তবে বিদ্যমান প্রপার্টি আপডেট করা যায়। | `const obj = {name: 'John'}; Object.seal(obj); obj.age = 30;` → `{name: 'John'}`             |
261 | | `Object.create()`          | একটি নতুন অবজেক্ট তৈরি করে, তার prototype একটি নির্দিষ্ট অবজেক্ট হতে পারে।    | `const obj = Object.create({greet: 'hello'}); console.log(obj.greet);` → `hello`              |
262 | | `Object.prototype.toString()` | অবজেক্টের স্ট্রিং রেপ্রেজেন্টেশন রিটার্ন করে।                                    | `const obj = {}; console.log(obj.toString())` → `"[object Object]"`                         |
263 | | `Object.prototype.valueOf()` | অবজেক্টের মৌলিক মান রিটার্ন করে (default: নিজে থেকে `this`)।                   | `const obj = {x: 10}; console.log(obj.valueOf())` → `{x: 10}`                                 |
264 | 
265 | 
266 | ---
267 | 
268 | ## **📌 উপসংহার (Summary)**
269 | ✅ **JavaScript Object হলো key-value pair ডাটা স্টোর করার একটি শক্তিশালী উপায়।**  
270 | ✅ **Dot Notation (`obj.property`) এবং Bracket Notation (`obj["property"]`) দিয়ে প্রপার্টি অ্যাক্সেস করা যায়।**  
271 | ✅ **Function রাখলে সেটাকে Method বলা হয়।**  
272 | ✅ **Loop দিয়ে Object-এর সব Property বের করা যায়।**  
273 | ✅ **Object Destructuring ও Spread Operator কোডকে আরো সহজ করে।**  
274 | 
275 | 🔥 **JavaScript Object-এর ভালো দক্ষতা থাকলে API, Data Processing, এবং Web Development-এ অনেক সুবিধা পাওয়া যায়! 🚀**


--------------------------------------------------------------------------------
/D. Loop/Loop-Bangla.md:
--------------------------------------------------------------------------------
  1 | # **🔥 জাভাস্ক্রিপ্ট লুপ (Loop) সম্পূর্ণ গাইড - বাংলা ও বাস্তব উদাহরণ সহ 🚀**  
  2 | 
  3 | লুপ (Loop) হলো এমন একটি প্রোগ্রামিং কৌশল যা **একই কোড বারবার চালাতে** ব্যবহার করা হয়। এটি বিশেষভাবে দরকার হয় **বড় ডাটা সেটের ওপর কাজ করতে** এবং **কোডকে সহজ ও সংক্ষিপ্ত করতে**।  
  4 | 
  5 | ---
  6 |   
  7 | ## **🔹 জাভাস্ক্রিপ্টে লুপের ধরন (Types of Loops in JavaScript)**
  8 | 1️⃣ **for loop**  
  9 | 2️⃣ **while loop**  
 10 | 3️⃣ **do-while loop**  
 11 | 4️⃣ **for...of loop** (Array বা String-এর জন্য)  
 12 | 5️⃣ **for...in loop** (Object-এর জন্য)  
 13 | 
 14 | এছাড়া, **break** এবং **continue** স্টেটমেন্ট ব্যবহার করে লুপের কার্যক্রম নিয়ন্ত্রণ করা যায়।  
 15 | 
 16 | ---
 17 | 
 18 | ### **📌 for loop (নির্দিষ্ট বার লুপ চালানোর জন্য)**
 19 | যখন আমরা জানি যে লুপ **কতবার চলবে**, তখন `for` লুপ ব্যবহার করা হয়।  
 20 | 
 21 | #### **💡 Structure (গঠন)**  
 22 | ```javascript
 23 | for (শুরু; শর্ত; পরিবর্তন) {
 24 |    // কোড যা বারবার চলবে
 25 | }
 26 | ```
 27 | 📌 **for লুপের ৩টি অংশ:**  
 28 | 1️⃣ **শুরু:** লুপের **প্রথম মান সেট করা হয়**।  
 29 | 2️⃣ **শর্ত:** প্রতিবার লুপ চালানোর আগে শর্ত **পরীক্ষা করা হয়**।  
 30 | 3️⃣ **পরিবর্তন:** প্রতি চক্রে **মান পরিবর্তন** করা হয়।  
 31 | 
 32 | #### **✅ বাস্তব উদাহরণ: ১ থেকে ৫ পর্যন্ত সংখ্যা প্রিন্ট করা**  
 33 | ```javascript
 34 | for (let i = 1; i <= 5; i++) {
 35 |   console.log(i);
 36 | }
 37 | ```
 38 | **Output:**  
 39 | ```
 40 | 1  
 41 | 2  
 42 | 3  
 43 | 4  
 44 | 5  
 45 | ```
 46 | 🔹 এখানে `i` প্রথমে ১, প্রতিবার ১ করে বাড়ে, যতক্ষণ না `i <= 5` হয়।  
 47 | 
 48 | ---
 49 | 
 50 | ### **📌 while loop (শর্ত মিটলে চালাবে)**
 51 | যখন আমরা **আগে থেকে জানি না লুপ কতবার চলবে**, তখন `while` লুপ ব্যবহার করা হয়।  
 52 | 
 53 | #### **💡 Structure (গঠন)**  
 54 | ```javascript
 55 | while (শর্ত) {
 56 |    // কোড যা চলতে থাকবে
 57 | }
 58 | ```
 59 | 📌 **যতক্ষণ শর্ত `true`, ততক্ষণ লুপ চলবে**।  
 60 | 
 61 | #### **✅ বাস্তব উদাহরণ: ১ থেকে ৫ পর্যন্ত সংখ্যা প্রিন্ট করা**  
 62 | ```javascript
 63 | let i = 1;
 64 | while (i <= 5) {
 65 |   console.log(i);
 66 |   i++;
 67 | }
 68 | ```
 69 | **Output:**  
 70 | ```
 71 | 1  
 72 | 2  
 73 | 3  
 74 | 4  
 75 | 5  
 76 | ```
 77 | 🔹 এখানে `i` প্রথমে ১, তারপর প্রতি চক্রে ১ করে বাড়ে যতক্ষণ `i <= 5`।  
 78 | 
 79 | ---
 80 | 
 81 | ### **📌 do-while loop (প্রথমবার নিশ্চিতভাবে চলবে)**
 82 | ✅ **do-while লুপ সবসময় অন্তত একবার চলবে, তারপর শর্ত চেক করবে**।  
 83 | 
 84 | #### **💡 Structure (গঠন)**  
 85 | ```javascript
 86 | do {
 87 |    // কোড যা অন্তত একবার চলবে
 88 | } while (শর্ত);
 89 | ```
 90 | 📌 **শর্ত `false` হলেও লুপ কমপক্ষে ১ বার চলবে।**  
 91 | 
 92 | #### **✅ বাস্তব উদাহরণ: ১ থেকে ৫ পর্যন্ত সংখ্যা প্রিন্ট করা**  
 93 | ```javascript
 94 | let i = 1;
 95 | do {
 96 |   console.log(i);
 97 |   i++;
 98 | } while (i <= 5);
 99 | ```
100 | **Output:**  
101 | ```
102 | 1  
103 | 2  
104 | 3  
105 | 4  
106 | 5  
107 | ```
108 | 🔹 **বিশেষত্ব:** প্রথমেই কোড **একবার রান হবে**, তারপর শর্ত চেক হবে।  
109 | 
110 | ---
111 | 
112 | ### **📌 for...of loop (Array বা String-এর জন্য)**
113 | ✅ **`for...of` লুপ ব্যবহার করা হয় যখন আমরা Array বা String-এর প্রতিটি উপাদান একবার করে নিতে চাই।**  
114 | 
115 | #### **💡 Structure (গঠন)**  
116 | ```javascript
117 | for (let ভেরিয়েবল of অ্যারে_বা_স্ট্রিং) {
118 |   // কোড যা চলবে
119 | }
120 | ```
121 | 📌 **এটি প্রতিটি উপাদানের জন্য একবার চলবে।**  
122 | 
123 | #### **✅ বাস্তব উদাহরণ: নামের প্রতিটি অক্ষর দেখানো**  
124 | ```javascript
125 | let name = "Shihab";
126 | for (let letter of name) {
127 |   console.log(letter);
128 | }
129 | ```
130 | **Output:**  
131 | ```
132 | S  
133 | h  
134 | i  
135 | h  
136 | a  
137 | b  
138 | ```
139 | 🔹 **String-এর প্রতিটি অক্ষর একবার করে লুপের মাধ্যমে দেখানো হয়েছে।**  
140 | 
141 | #### **✅ বাস্তব উদাহরণ: Array থেকে নাম বের করা**  
142 | ```javascript
143 | let names = ["Shihab", "Rahim", "Karim"];
144 | for (let name of names) {
145 |   console.log(name);
146 | }
147 | ```
148 | **Output:**  
149 | ```
150 | Shihab  
151 | Rahim  
152 | Karim  
153 | ```
154 | 🔹 **প্রতিটি নাম `name` ভেরিয়েবলে চলে আসে, এবং কনসোলে প্রিন্ট হয়।**  
155 | 
156 | ---
157 | 
158 | ### **📌 for...in loop (Object-এর জন্য)**
159 | ✅ **`for...in` লুপ দিয়ে Object-এর প্রতিটি Key নিয়ে কাজ করা যায়।**  
160 | 
161 | #### **💡 Structure (গঠন)**  
162 | ```javascript
163 | for (let key in object) {
164 |   // কোড যা চলবে
165 | }
166 | ```
167 | 
168 | #### **✅ বাস্তব উদাহরণ: Object থেকে Key-Value বের করা**  
169 | ```javascript
170 | let person = {name: "Shihab", age: 25, city: "Dhaka"};
171 | 
172 | for (let key in person) {
173 |   console.log(`${key}: ${person[key]}`);
174 | }
175 | ```
176 | **Output:**  
177 | ```
178 | name: Shihab  
179 | age: 25  
180 | city: Dhaka  
181 | ```
182 | 🔹 **Object-এর প্রতিটি Key-Value বের করা হয়েছে।**  
183 | 
184 | ---
185 | 
186 | ### **📌 break ও continue স্টেটমেন্ট**
187 | ✅ **break লুপ বন্ধ করে, আর continue নির্দিষ্ট চক্র স্কিপ করে।**  
188 | 
189 | #### **✅ break (পুরো লুপ বন্ধ করবে)**  
190 | ```javascript
191 | for (let i = 1; i <= 5; i++) {
192 |   if (i === 3) {
193 |     break;  // ৩ এ আসলে লুপ বন্ধ হবে
194 |   }
195 |   console.log(i);
196 | }
197 | ```
198 | **Output:**  
199 | ```
200 | 1  
201 | 2  
202 | ```
203 | 🔹 **`i === 3` হলে লুপ বন্ধ হয়ে গেছে।**  
204 | 
205 | #### **✅ continue (একটি চক্র বাদ দেবে)**  
206 | ```javascript
207 | for (let i = 1; i <= 5; i++) {
208 |   if (i === 3) {
209 |     continue;  // ৩ বাদ দিয়ে লুপ চলবে
210 |   }
211 |   console.log(i);
212 | }
213 | ```
214 | **Output:**  
215 | ```
216 | 1  
217 | 2  
218 | 4  
219 | 5  
220 | ```
221 | 🔹 **৩ বাদ গেছে, কিন্তু লুপ চলতে থেকেছে।**  
222 | 
223 | 
224 | ### **🚀 break vs continue (তফাৎ টেবিল) 🚀**  
225 | 
226 | | বৈশিষ্ট্য  | **break** | **continue** |
227 | |------------|----------|-------------|
228 | | **কাজ** | লুপ **সম্পূর্ণ বন্ধ করে** | লুপ **চালু থাকে, শুধু নির্দিষ্ট চক্র স্কিপ করে** |
229 | | **ব্যবহার** | যখন আমরা লুপ **পুরোপুরি থামাতে চাই** | যখন আমরা **একটি নির্দিষ্ট পুনরাবৃত্তি বাদ দিতে চাই** |
230 | | **প্রভাব** | লুপ **অবিলম্বে বন্ধ হয়ে যায়** | পরবর্তী **পুনরাবৃত্তি চালু থাকে** |
231 | | **উদাহরণ** | `if (i === 3) { break; }` | `if (i === 3) { continue; }` |
232 | | **ব্যবহারের ক্ষেত্র** | নির্দিষ্ট শর্তে লুপ থামানোর জন্য | নির্দিষ্ট শর্তে লুপের কিছু অংশ বাদ দেওয়ার জন্য |
233 | 
234 | 🔥 **সংক্ষেপে:**  
235 | - `break` লুপ **বন্ধ করে**।  
236 | - `continue` লুপ **চালু রাখে, শুধু নির্দিষ্ট চক্র বাদ দেয়**। 🚀
237 | 
238 | ---
239 | ### **JavaScript `split()`, `reverse()`, এবং `join()`**  
240 | 
241 | এই তিনটি মেথড একসাথে ব্যবহার করে আমরা স্ট্রিং-এর অক্ষর বা শব্দ উল্টাতে পারি।  
242 | 
243 | ---
244 | 
245 | ### **📌 `split()` - স্ট্রিংকে অ্যারে বানানো**  
246 | ```javascript
247 | let text = "Hello World";
248 | let arr = text.split("");  // প্রতিটি অক্ষর আলাদা হবে
249 | console.log(arr);
250 | ```
251 | ✅ **Output:**  
252 | ```
253 | ["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"]
254 | ```
255 | 
256 | ---
257 | 
258 | ### **📌 `reverse()` - অ্যারে উল্টানো**  
259 | ```javascript
260 | let reversedArr = arr.reverse();
261 | console.log(reversedArr);
262 | ```
263 | ✅ **Output:**  
264 | ```
265 | ["d", "l", "r", "o", "W", " ", "o", "l", "l", "e", "H"]
266 | ```
267 | 
268 | ---
269 | 
270 | ### **📌 `join()` - অ্যারে থেকে স্ট্রিং বানানো**  
271 | ```javascript
272 | let reversedText = reversedArr.join("");
273 | console.log(reversedText);
274 | ```
275 | ✅ **Output:**  
276 | ```
277 | "dlorW olleH"
278 | ```
279 | 
280 | ---
281 | 
282 | ### **📌 সবকিছু এক লাইনে করা**  
283 | ```javascript
284 | let text = "Hello World";
285 | let result = text.split("").reverse().join("");
286 | console.log(result);
287 | ```
288 | ✅ **Output:**  
289 | ```
290 | "dlorW olleH"
291 | ```
292 | 
293 | ---
294 | 
295 | ### **📌 শব্দ উল্টানো (Space অনুযায়ী Split করা)**  
296 | ```javascript
297 | let sentence = "JavaScript is awesome";
298 | let reversedWords = sentence.split(" ").reverse().join(" ");
299 | console.log(reversedWords);
300 | ```
301 | ✅ **Output:**  
302 | ```
303 | "awesome is JavaScript"
304 | ```
305 | 
306 | 🔥 **এই তিনটি মেথড একসাথে ব্যবহার করে স্ট্রিং ম্যানিপুলেশন করা খুব সহজ! 🚀**
307 | 
308 | ---
309 | 
310 | ## **📌 JavaScript Loop Methods (লুপ মেথড) - Table Format**  
311 | 
312 | | লুপ | বর্ণনা | সিনট্যাক্স | উদাহরণ | আউটপুট |
313 | |------|----------------------|--------------------------|--------------------------|----------------|
314 | | `for` | নির্দিষ্ট সংখ্যক বার লুপ চালানোর জন্য | `for(initialization; condition; increment) { code }` | ```javascript for (let i = 1; i <= 5; i++) { console.log(i); } ``` | `1 2 3 4 5` |
315 | | `while` | শর্ত সত্য হলে লুপ চলতে থাকবে | `while (condition) { code }` | ```javascript let i = 1; while (i <= 5) { console.log(i); i++; } ``` | `1 2 3 4 5` |
316 | | `do...while` | লুপ অন্তত একবার চলবেই, তারপর শর্ত চেক করবে | `do { code } while (condition);` | ```javascript let i = 1; do { console.log(i); i++; } while (i <= 5); ``` | `1 2 3 4 5` |
317 | | `for...in` | অবজেক্ট বা অ্যারের ইনডেক্সের উপর লুপ চালানোর জন্য | `for (key in object) { code }` | ```javascript let obj = { a: 10, b: 20 }; for (let key in obj) { console.log(key, obj[key]); } ``` | `a 10` <br> `b 20` |
318 | | `for...of` | সরাসরি অ্যারের ভ্যালুর উপর লুপ চালানোর জন্য | `for (item of iterable) { code }` | ```javascript let arr = [10, 20, 30]; for (let num of arr) { console.log(num); } ``` | `10 20 30` |
319 | | `break` | লুপের চলা বন্ধ করার জন্য ব্যবহার হয় | `if(condition) { break; }` | ```javascript for (let i = 1; i <= 5; i++) { if (i === 3) break; console.log(i); } ``` | `1 2` |
320 | | `continue` | নির্দিষ্ট শর্তে লুপের বর্তমান ধাপ বাদ দিয়ে পরবর্তী ধাপে চলে যাওয়ার জন্য | `if(condition) { continue; }` | ```javascript for (let i = 1; i <= 5; i++) { if (i === 3) continue; console.log(i); } ``` | `1 2 4 5` |
321 | | `map()` | প্রতিটি এলিমেন্টের উপর অপারেশন চালিয়ে নতুন অ্যারে তৈরি করে | `array.map(callback)` | ```javascript let arr = [1, 2, 3]; let squared = arr.map(x => x * x); console.log(squared); ``` | `[1, 4, 9]` |
322 | | `forEach()` | প্রতিটি এলিমেন্টের উপর অপারেশন চালায়, কিন্তু নতুন অ্যারে তৈরি করে না | `array.forEach(callback)` | ```javascript let arr = [1, 2, 3]; arr.forEach(x => console.log(x * 2)); ``` | `2 4 6` |
323 | | `filter()` | নির্দিষ্ট শর্ত অনুযায়ী নতুন অ্যারে তৈরি করে | `array.filter(callback)` | ```javascript let arr = [1, 2, 3, 4]; let even = arr.filter(x => x % 2 === 0); console.log(even); ``` | `[2, 4]` |
324 | 
325 | ---
326 | 
327 | 
328 | ### **📌 উপসংহার (Summary)**
329 | ✅ **Loop ব্যবহার করে বারবার কোড চালানো যায়।**  
330 | ✅ **for, while, do-while, for...of, for...in বিভিন্ন প্রয়োজনে ব্যবহার হয়।**  
331 | ✅ **break লুপ থামায়, continue নির্দিষ্ট চক্র বাদ দেয়।**  
332 | ✅ **Loop ওয়েবসাইট, অ্যাপ, ডাটা প্রসেসিং, গেম, API থেকে ডাটা আনতে গুরুত্বপূর্ণ।**  
333 | 
334 | 💡 **তুমি যদি প্রোগ্রামিং দক্ষতা বাড়াতে চাও, তাহলে Loop-এর ওপর ভালো দক্ষতা থাকা জরুরি! 🚀🔥**


--------------------------------------------------------------------------------
/G. DOM/Dom-Event-Bangla.md:
--------------------------------------------------------------------------------
  1 | # 🚀 **JavaScript DOM Events: সম্পূর্ণ গাইড**  
  2 | 
  3 | JavaScript-এর **DOM Events** ব্যবহার করে ওয়েবপেজের বিভিন্ন এলিমেন্টের সাথে **ইন্টারঅ্যাকশন** করা যায়, যেমন ক্লিক, হোভার, কী-প্রেস ইত্যাদি।  
  4 | 
  5 | ---
  6 | 
  7 | ## **📌 DOM Event কী?**  
  8 | 🔹 **Event** হল ব্রাউজারে ঘটে যাওয়া কোনো **ঘটনা** যেমন **button click, form submit, key press, mouse hover, page load ইত্যাদি**।  
  9 | 🔹 **JavaScript ব্যবহার করে এই ইভেন্টগুলোর উপর নিয়ন্ত্রণ নেওয়া যায়**।  
 10 | 🔹 ইভেন্ট **শুধু ব্রাউজারে ঘটে এমন নয়, সার্ভার বা ইউজারের ইন্টারঅ্যাকশনেও ইভেন্ট হয়**।  
 11 | 
 12 | ---
 13 | 
 14 | ## **📌 DOM ইভেন্ট যোগ করার ৩টি পদ্ধতি**  
 15 | #### ✅ **পদ্ধতি ১: HTML Attribute ব্যবহার করে (Inline Event)**
 16 | ```html
 17 | <button onclick="showMessage()">Click Me</button>
 18 | 
 19 | <script>
 20 |     function showMessage() {
 21 |         alert("Button Clicked!");
 22 |     }
 23 | </script>
 24 | ```
 25 | ❌ **তবে এই পদ্ধতি ভালো নয় কারণ HTML ও JavaScript আলাদা রাখা উচিত।**  
 26 | 
 27 | ---
 28 | 
 29 | #### ✅ **পদ্ধতি ২: JavaScript এর মাধ্যমে Event যোগ করা (Best Practice)**
 30 | ```html
 31 | <button id="myButton">Click Me</button>
 32 | 
 33 | <script>
 34 |     document.getElementById("myButton").addEventListener("click", function() {
 35 |         alert("Button Clicked!");
 36 |     });
 37 | </script>
 38 | ```
 39 | ✔ **Explanation:** `addEventListener()` ব্যবহার করে ইভেন্ট অ্যাড করা হয়েছে।
 40 | 
 41 | ---
 42 | 
 43 | #### ✅ **পদ্ধতি ৩: HTML এলিমেন্টের Event Property ব্যবহার করা**
 44 | ```html
 45 | <button id="myButton">Click Me</button>
 46 | 
 47 | <script>
 48 |     const btn = document.getElementById("myButton");
 49 |     btn.onclick = function() {
 50 |         alert("Button Clicked!");
 51 |     };
 52 | </script>
 53 | ```
 54 | ✔ **Explanation:** `.onclick` ইভেন্ট প্রোপার্টি ব্যবহার করে ইভেন্ট হ্যান্ডলার সেট করা হয়েছে।  
 55 | ❌ **তবে এটি ভালো পদ্ধতি নয় কারণ একাধিক ইভেন্ট হ্যান্ডলার অ্যাড করা যায় না।**  
 56 | 
 57 | ---
 58 | 
 59 | ## **📌 JavaScript-এর কিছু গুরুত্বপূর্ণ DOM Events**  
 60 | 
 61 | | **Event** | **Trigger হয় যখন...** |
 62 | |-----------|----------------|
 63 | | `click` | ইউজার যখন এলিমেন্টে ক্লিক করে |
 64 | | `dblclick` | ইউজার যখন ডাবল ক্লিক করে |
 65 | | `mouseover` | মাউস যখন এলিমেন্টের উপর যায় |
 66 | | `mouseout` | মাউস যখন এলিমেন্ট থেকে চলে যায় |
 67 | | `keydown` | কোনো কী প্রেস করলে |
 68 | | `keyup` | কী ছেড়ে দিলে |
 69 | | `change` | ইনপুট ফিল্ডের মান পরিবর্তন হলে |
 70 | | `submit` | ফর্ম সাবমিট হলে |
 71 | | `focus` | ইনপুট ফিল্ড ফোকাস করলে |
 72 | | `blur` | ইনপুট ফিল্ড ফোকাস হারালে |
 73 | | `load` | পেজ বা ইমেজ লোড হলে |
 74 | 
 75 | ---
 76 | 
 77 | ## **📌 ১. `click` ইভেন্ট (Button Click Example)**  
 78 | ```html
 79 | <button id="btn">Click Me</button>
 80 | <p id="message"></p>
 81 | 
 82 | <script>
 83 |     document.getElementById("btn").addEventListener("click", function() {
 84 |         document.getElementById("message").innerText = "Button Clicked!";
 85 |     });
 86 | </script>
 87 | ```
 88 | 
 89 | ---
 90 | 
 91 | ## **📌 ২. `mouseover` & `mouseout` ইভেন্ট (Hover Effect)**  
 92 | ```html
 93 | <div id="box" style="width: 100px; height: 100px; background: red;"></div>
 94 | 
 95 | <script>
 96 |     const box = document.getElementById("box");
 97 | 
 98 |     box.addEventListener("mouseover", function() {
 99 |         box.style.background = "green";
100 |     });
101 | 
102 |     box.addEventListener("mouseout", function() {
103 |         box.style.background = "red";
104 |     });
105 | </script>
106 | ```
107 | ✔ **Explanation:** যখন মাউস `div`-এর উপর যাবে, তখন সবুজ হবে, আর যখন চলে যাবে, তখন আবার লাল হবে।
108 | 
109 | ---
110 | 
111 | ## **📌 ৩. `keydown` & `keyup` ইভেন্ট (Keyboard Event Example)**  
112 | ```html
113 | <input type="text" id="inputField" placeholder="Type something...">
114 | <p id="output"></p>
115 | 
116 | <script>
117 |     const inputField = document.getElementById("inputField");
118 | 
119 |     inputField.addEventListener("keydown", function(event) {
120 |         document.getElementById("output").innerText = "Key Pressed: " + event.key;
121 |     });
122 | </script>
123 | ```
124 | ✔ **Explanation:** ইউজার কোনো কী প্রেস করলে তা `p` ট্যাগে দেখাবে।
125 | 
126 | ---
127 | 
128 | ## **📌 ৪. `change` ইভেন্ট (Dropdown Selection Example)**  
129 | ```html
130 | <select id="dropdown">
131 |     <option value="apple">Apple</option>
132 |     <option value="banana">Banana</option>
133 |     <option value="orange">Orange</option>
134 | </select>
135 | <p id="selected"></p>
136 | 
137 | <script>
138 |     document.getElementById("dropdown").addEventListener("change", function() {
139 |         document.getElementById("selected").innerText = "You selected: " + this.value;
140 |     });
141 | </script>
142 | ```
143 | ✔ **Explanation:** ইউজার ড্রপডাউন থেকে কিছু সিলেক্ট করলে তা নিচে দেখাবে।
144 | 
145 | ---
146 | 
147 | ## **📌 ৫. `submit` ইভেন্ট (Form Validation Example)**  
148 | ```html
149 | <form id="myForm">
150 |     <input type="text" id="name" placeholder="Enter your name">
151 |     <button type="submit">Submit</button>
152 | </form>
153 | 
154 | <script>
155 |     document.getElementById("myForm").addEventListener("submit", function(event) {
156 |         const nameValue = document.getElementById("name").value;
157 |         if (nameValue === "") {
158 |             alert("Name cannot be empty!");
159 |             event.preventDefault(); // ফর্ম সাবমিট বন্ধ করে
160 |         }
161 |     });
162 | </script>
163 | ```
164 | ✔ **Explanation:** যদি ইউজার ইনপুট ফিল্ড ফাঁকা রেখে সাবমিট করে, তাহলে ফর্ম সাবমিট হবে না।
165 | 
166 | ---
167 | 
168 | ## **📌 ৬. `focus` & `blur` ইভেন্ট (Input Field Highlight Example)**  
169 | ```html
170 | <input type="text" id="inputField" placeholder="Click here...">
171 | 
172 | <script>
173 |     const input = document.getElementById("inputField");
174 | 
175 |     input.addEventListener("focus", function() {
176 |         input.style.border = "2px solid blue";
177 |     });
178 | 
179 |     input.addEventListener("blur", function() {
180 |         input.style.border = "1px solid gray";
181 |     });
182 | </script>
183 | ```
184 | ✔ **Explanation:** ইনপুট ফিল্ড ফোকাস করলে বর্ডার নীল হবে, আর ফোকাস হারালে ধূসর হবে।
185 | 
186 | ---
187 | 
188 | ## **📌 ৭. `load` ইভেন্ট (Page Load Example)**  
189 | ```html
190 | <script>
191 |     window.addEventListener("load", function() {
192 |         alert("Page Fully Loaded!");
193 |     });
194 | </script>
195 | ```
196 | ✔ **Explanation:** পেজ লোড হলে অ্যালার্ট দেখাবে।
197 | 
198 | ---
199 | 
200 | ## **📌 `removeEventListener()` দিয়ে ইভেন্ট রিমুভ করা**  
201 | ```js
202 | function showMessage() {
203 |     alert("Hello!");
204 | }
205 | 
206 | // ইভেন্ট যোগ করা
207 | document.getElementById("btn").addEventListener("click", showMessage);
208 | 
209 | // ইভেন্ট রিমুভ করা
210 | document.getElementById("btn").removeEventListener("click", showMessage);
211 | ```
212 | ✔ **Explanation:** `removeEventListener()` ব্যবহার করলে ইভেন্ট কাজ করবে না।
213 | 
214 | ---
215 | 
216 | # 🚀 **JavaScript Event Handling: Bubbling vs Delegation**  
217 | 
218 | JavaScript-এ ইভেন্ট হ্যান্ডলিং করার সময় **Event Bubbling, Capturing এবং Delegation** গুরুত্বপূর্ণ বিষয়।  
219 | এগুলো ভালোভাবে বোঝা গেলে **ওয়েব অ্যাপ অপটিমাইজ করা ও কোড সহজে মেইনটেইন করা সম্ভব**।  
220 | 
221 | ---
222 | 
223 | ## **📌 ১. Event Bubbling (ইভেন্ট বাবলিং)**
224 | **Event Bubbling** হল **একটি চাইল্ড এলিমেন্টে ইভেন্ট ঘটলে, সেটি প্যারেন্ট এবং তারও উপরিভাগের এলিমেন্টে পৌঁছে যায়**।  
225 | 
226 | ### ✅ **Example: Event Bubbling**
227 | ```html
228 | <div id="parent" style="padding: 20px; background: lightblue;">
229 |     <button id="child">Click Me</button>
230 | </div>
231 | 
232 | <script>
233 |     document.getElementById("child").addEventListener("click", function() {
234 |         alert("Child Button Clicked!");
235 |     });
236 | 
237 |     document.getElementById("parent").addEventListener("click", function() {
238 |         alert("Parent Div Clicked!");
239 |     });
240 | </script>
241 | ```
242 | ### **✅ Output:**
243 | 1️⃣ `child` বাটনে ক্লিক করলে **আগে "Child Button Clicked!" দেখাবে**  
244 | 2️⃣ তারপর "Parent Div Clicked!" দেখাবে  
245 | 
246 | ✔ **Explanation:**  
247 | - প্রথমে **চাইল্ড (button) ইভেন্ট হ্যান্ডলার ট্রিগার হবে**  
248 | - তারপর **প্যারেন্ট (div) ইভেন্ট হ্যান্ডলার ট্রিগার হবে**  
249 | 
250 | ---
251 | 
252 | ## **📌 ২. Event Capturing (ইভেন্ট ক্যাপচারিং বা ট্রিকলিং)**
253 | 🔹 **Event Capturing** হল **প্যারেন্ট থেকে চাইল্ডের দিকে ইভেন্ট যাওয়া** (Event Bubbling-এর উল্টো)।  
254 | 🔹 `addEventListener()` এর **তৃতীয় আর্গুমেন্ট `true` দিলে এটি কাজ করে**।
255 | 
256 | ### ✅ **Example: Event Capturing**
257 | ```html
258 | <div id="parent" style="padding: 20px; background: lightcoral;">
259 |     <button id="child">Click Me</button>
260 | </div>
261 | 
262 | <script>
263 |     document.getElementById("parent").addEventListener("click", function() {
264 |         alert("Parent Div Clicked!");
265 |     }, true); // Capturing Mode
266 | 
267 |     document.getElementById("child").addEventListener("click", function() {
268 |         alert("Child Button Clicked!");
269 |     });
270 | </script>
271 | ```
272 | ### **✅ Output:**
273 | 1️⃣ প্রথমে "Parent Div Clicked!" দেখাবে  
274 | 2️⃣ তারপর "Child Button Clicked!" দেখাবে  
275 | 
276 | ✔ **Explanation:**  
277 | - `true` দেওয়ার কারণে **প্যারেন্ট ইভেন্টটি আগে ট্রিগার হচ্ছে**  
278 | - তারপর চাইল্ড ইভেন্টটি কাজ করছে  
279 | 
280 | ---
281 | 
282 | ## **📌 ৩. `stopPropagation()` দিয়ে Event Bubbling বন্ধ করা**
283 | 🔹 কখনো আমরা চাই **চাইল্ড ইভেন্ট প্যারেন্টে না যাক**। তখন `event.stopPropagation()` ব্যবহার করতে হবে।  
284 | 
285 | ### ✅ **Example: Stop Bubbling**
286 | ```html
287 | <div id="parent" style="padding: 20px; background: lightgreen;">
288 |     <button id="child">Click Me</button>
289 | </div>
290 | 
291 | <script>
292 |     document.getElementById("child").addEventListener("click", function(event) {
293 |         alert("Child Button Clicked!");
294 |         event.stopPropagation(); // Bubbling বন্ধ
295 |     });
296 | 
297 |     document.getElementById("parent").addEventListener("click", function() {
298 |         alert("Parent Div Clicked!");
299 |     });
300 | </script>
301 | ```
302 | ### **✅ Output:**
303 | ✔ শুধু "Child Button Clicked!" দেখাবে, **"Parent Div Clicked!" দেখাবে না**  
304 | 
305 | ✔ **Explanation:**  
306 | - `event.stopPropagation()` ব্যবহার করার কারণে ইভেন্ট **উপরে (parent) বাবল হবে না**।  
307 | 
308 | ---
309 | 
310 | ## **📌 ৪. Event Delegation (ইভেন্ট ডেলিগেশন)**
311 | 🔹 **Event Delegation** হল **একটি Parent-এ ইভেন্ট বসিয়ে তার মাধ্যমে Child-গুলোর ইভেন্ট হ্যান্ডল করা**।  
312 | 🔹 এটি বিশেষ করে **ডায়নামিক HTML এলিমেন্ট হ্যান্ডল করতে সাহায্য করে**।  
313 | 
314 | ### ✅ **Example: Event Delegation**
315 | ```html
316 | <ul id="list">
317 |     <li>Item 1</li>
318 |     <li>Item 2</li>
319 |     <li>Item 3</li>
320 | </ul>
321 | 
322 | <script>
323 |     document.getElementById("list").addEventListener("click", function(event) {
324 |         if (event.target.tagName === "LI") {
325 |             alert("You clicked: " + event.target.innerText);
326 |         }
327 |     });
328 | </script>
329 | ```
330 | ### **✅ Output:**
331 | ✔ **যে `li`-তে ক্লিক করা হবে, তার নাম দেখাবে।**  
332 | 
333 | ✔ **Explanation:**  
334 | - এখানে **`ul` (parent)-এর মধ্যে `click` ইভেন্ট বসানো হয়েছে**  
335 | - যখন কোনো `li` ক্লিক করা হয়, তখন **`event.target` দিয়ে সেই এলিমেন্ট ডিটেক্ট করা হয়**  
336 | - এতে **নতুন `li` অ্যাড করলেও ইভেন্ট ঠিকমতো কাজ করবে** ✅  
337 | 
338 | ---
339 | 
340 | ## **📌 কেন Event Delegation ব্যবহার করবো?**
341 | ✔ **Performance ভালো হয়**: প্রতিটি `li`-তে আলাদা ইভেন্ট বসানোর চেয়ে **একটি parent (`ul`) তে বসানো ভালো**  
342 | ✔ **ডায়নামিক এলিমেন্টের জন্য ভালো**: যদি নতুন `li` যোগ হয়, তাও ইভেন্ট কাজ করবে  
343 | ✔ **Less Memory Usage**: অনেক ইভেন্ট বসানোর দরকার হয় না  
344 | 
345 | ---
346 | 
347 | ## **🚀 উপসংহার**  
348 | ✅ **DOM ইভেন্ট দিয়ে ওয়েবপেজের এলিমেন্টের সাথে ইন্টারঅ্যাকশন করা যায়**।  
349 | ✅ **`addEventListener()` সবচেয়ে ভালো পদ্ধতি**।  
350 | ✅ **`click, mouseover, keydown, submit, change` ইত্যাদি ইভেন্ট গুরুত্বপূর্ণ**।  
351 | ✅ **`removeEventListener()` দিয়ে ইভেন্ট বন্ধ করা যায়**।  
352 | ✅ **Event Bubbling** → চাইল্ড থেকে প্যারেন্টে ইভেন্ট যায় 🔼  
353 | ✅ **Event Capturing** → প্যারেন্ট থেকে চাইল্ডে ইভেন্ট যায় 🔽  
354 | ✅ **`stopPropagation()`** → ইভেন্ট বাবল বন্ধ করে ✋  
355 | ✅ **Event Delegation** → Parent-এ ইভেন্ট বসিয়ে চাইল্ড ইভেন্ট হ্যান্ডল করা হয় 🎯 
356 | 


--------------------------------------------------------------------------------
/G. DOM/DOM-Bangla.md:
--------------------------------------------------------------------------------
  1 | ### **📌 JavaScript DOM (Document Object Model) – সম্পূর্ণ গাইড**  
  2 | JavaScript-এ **DOM (Document Object Model)** হল **ওয়েব পেজ ম্যানিপুলেট করার মূল মাধ্যম**। DOM-এর মাধ্যমে **HTML ও CSS পরিবর্তন, ইভেন্ট হ্যান্ডলিং, নতুন এলিমেন্ট যোগ করা, রিমুভ করা** ইত্যাদি করা যায়।  
  3 | 
  4 | ---
  5 | 
  6 | # **📌 Table of Contents**
  7 | 1️⃣ **What is DOM?**  
  8 | 2️⃣ **Selecting Elements (Element খুঁজে বের করা)**  
  9 | 3️⃣ **Changing Content & Attributes (কনটেন্ট পরিবর্তন করা)**  
 10 | 4️⃣ **CSS Styling with DOM (স্টাইল পরিবর্তন করা)**  
 11 | 5️⃣ **Adding & Removing Elements (নতুন এলিমেন্ট যোগ/ডিলিট করা)**  
 12 | 6️⃣ **Events & Event Listeners (ইভেন্ট হ্যান্ডলিং)**  
 13 | 7️⃣ **Event Bubbling & Delegation (ইভেন্ট প্রসেসিং)**  
 14 | 8️⃣ **DOM Traversing (প্যারেন্ট-চাইল্ড সম্পর্ক বোঝা)**  
 15 | 
 16 | ---
 17 | 
 18 | # **📌 1. What is DOM?**
 19 | **DOM (Document Object Model)** হলো **একটি ওয়েব পেজের স্ট্রাকচার** যা JavaScript দিয়ে পরিবর্তন করা যায়।  
 20 | 👉 HTML পেজকে **একটি গাছের মতো স্ট্রাকচারে** সাজানো হয়, যেখানে **প্রতি এলিমেন্ট একটি নোড**।  
 21 | 👉 JavaScript DOM ব্যবহার করে **এই নোড গুলো পরিবর্তন, অ্যাড, ডিলিট করতে পারে**।  
 22 | 
 23 | ✅ **Example DOM Tree:**  
 24 | ```html
 25 | <html>
 26 |   <head>
 27 |     <title>My Page</title>
 28 |   </head>
 29 |   <body>
 30 |     <h1>Hello World</h1>
 31 |     <p>This is a paragraph.</p>
 32 |   </body>
 33 | </html>
 34 | ```
 35 | 🔹 এখানে **`<html>` হল মূল রুট (Root Node)**  
 36 | 🔹 **`<body>` এর মধ্যে `<h1>` ও `<p>` এলিমেন্ট রয়েছে**  
 37 | 🔹 JavaScript দিয়ে আমরা **এই এলিমেন্ট পরিবর্তন করতে পারবো**  
 38 | 
 39 | ---
 40 | 
 41 | # **📌 2. Selecting Elements (Element খুঁজে বের করা)**  
 42 | 
 43 | ### **🔹 1. `getElementById()` - ID দিয়ে সিলেক্ট করা**  
 44 | ```js
 45 | let heading = document.getElementById('main-title');
 46 | console.log(heading.innerText); // h1 টেক্সট দেখাবে
 47 | ```
 48 | 
 49 | ### **🔹 2. `getElementsByClassName()` - Class দিয়ে সিলেক্ট করা**  
 50 | ```js
 51 | let items = document.getElementsByClassName('item');
 52 | console.log(items[0].innerText); // প্রথম item এর টেক্সট দেখাবে
 53 | ```
 54 | 
 55 | ### **🔹 3. `getElementsByTagName()` - Tag দিয়ে সিলেক্ট করা**  
 56 | ```js
 57 | let paragraphs = document.getElementsByTagName('p');
 58 | console.log(paragraphs.length); // প্যারাগ্রাফের সংখ্যা দেখাবে
 59 | ```
 60 | 
 61 | ### **🔹 4. `querySelector()` - CSS Selector দিয়ে সিলেক্ট করা (প্রথম এলিমেন্ট)**  
 62 | ```js
 63 | let firstItem = document.querySelector('.item');
 64 | console.log(firstItem.innerText);
 65 | ```
 66 | 
 67 | ### **🔹 5. `querySelectorAll()` - CSS Selector দিয়ে সিলেক্ট করা (সব এলিমেন্ট)**  
 68 | ```js
 69 | let allItems = document.querySelectorAll('.item');
 70 | allItems.forEach(item => console.log(item.innerText));
 71 | ```
 72 | 
 73 | ---
 74 | 
 75 | # **📌 3. Changing Content & Attributes (কনটেন্ট পরিবর্তন করা)**  
 76 | 
 77 | ### **🔹 1. `innerText` - শুধুমাত্র টেক্সট পরিবর্তন করা**  
 78 | ```js
 79 | let heading = document.getElementById('main-title');
 80 | heading.innerText = "New Title!";
 81 | ```
 82 | 
 83 | ### **🔹 2. `innerHTML` - HTML সহ পরিবর্তন করা**  
 84 | ```js
 85 | let div = document.getElementById('container');
 86 | div.innerHTML = "<h2>Updated Content</h2>";
 87 | ```
 88 | 
 89 | ### **🔹 3. `setAttribute()` - অ্যাট্রিবিউট পরিবর্তন করা**  
 90 | ```js
 91 | let img = document.getElementById('my-image');
 92 | img.setAttribute('src', 'new-image.jpg');
 93 | ```
 94 | 
 95 | ### **🔹 4. `getAttribute()` - অ্যাট্রিবিউটের মান পাওয়া**  
 96 | ```js
 97 | let link = document.getElementById('my-link');
 98 | console.log(link.getAttribute('href')); // লিংকের URL দেখাবে
 99 | ```
100 | 
101 | ---
102 | 
103 | # **📌 4. CSS Styling with DOM (স্টাইল পরিবর্তন করা)**  
104 | 
105 | ### **🔹 1. `style.property` - ইনলাইন স্টাইল পরিবর্তন করা**  
106 | ```js
107 | let heading = document.getElementById('main-title');
108 | heading.style.color = "red";
109 | heading.style.fontSize = "24px";
110 | ```
111 | 
112 | ### **🔹 2. `classList.add()` - নতুন ক্লাস যোগ করা**  
113 | ```js
114 | let box = document.getElementById('box');
115 | box.classList.add('new-style');
116 | ```
117 | 
118 | ### **🔹 3. `classList.remove()` - ক্লাস রিমুভ করা**  
119 | ```js
120 | box.classList.remove('new-style');
121 | ```
122 | 
123 | ---
124 | 
125 | # **📌 5. Adding & Removing Elements (নতুন এলিমেন্ট যোগ/ডিলিট করা)**  
126 | 
127 | ### **🔹 1. `createElement()` - নতুন এলিমেন্ট তৈরি করা**  
128 | ```js
129 | let newPara = document.createElement('p');
130 | newPara.innerText = "This is a new paragraph.";
131 | document.body.appendChild(newPara);
132 | ```
133 | 
134 | ### **🔹 2. `removeChild()` - এলিমেন্ট রিমুভ করা**  
135 | ```js
136 | let parent = document.getElementById('list');
137 | let item = document.getElementById('list-item');
138 | parent.removeChild(item);
139 | ```
140 | 
141 | ---
142 | 
143 | # **📌 6. Events & Event Listeners (ইভেন্ট হ্যান্ডলিং)**  
144 | 
145 | ### **🔹 1. `addEventListener()` - ইভেন্ট যোগ করা**  
146 | ```js
147 | document.getElementById('btn').addEventListener('click', function() {
148 |     alert("Button Clicked!");
149 | });
150 | ```
151 | 
152 | ### **🔹 2. `onmouseover` - মাউসের উপর গেলে ইভেন্ট ট্রিগার করা**  
153 | ```js
154 | document.getElementById('box').onmouseover = function() {
155 |     console.log("Mouse Over Event!");
156 | };
157 | ```
158 | 
159 | ---
160 | 
161 | # **📌 7. Event Bubbling & Delegation (ইভেন্ট প্রসেসিং)**  
162 | 
163 | ### **🔹 1. Event Bubbling (ভিতরের এলিমেন্টের ইভেন্ট বাইরে চলে যায়)**  
164 | ```js
165 | document.getElementById('parent').addEventListener('click', function() {
166 |     console.log("Parent Clicked!");
167 | });
168 | document.getElementById('child').addEventListener('click', function(event) {
169 |     console.log("Child Clicked!");
170 |     event.stopPropagation(); // Bubbling বন্ধ করে
171 | });
172 | ```
173 | 
174 | ### **🔹 2. Event Delegation (একটি মূল এলিমেন্টে ইভেন্ট বসিয়ে সব সাব এলিমেন্টে ইভেন্ট হ্যান্ডেল করা)**  
175 | ```js
176 | document.getElementById('list').addEventListener('click', function(event) {
177 |     if (event.target.tagName === 'LI') {
178 |         console.log("List Item Clicked: " + event.target.innerText);
179 |     }
180 | });
181 | ```
182 | 
183 | ---
184 | 
185 | # **📌 8. DOM Traversing (Parent-Child সম্পর্ক বোঝা)**  
186 | 
187 | ### **🔹 1. Parent Element খুঁজে বের করা**  
188 | ```js
189 | let child = document.getElementById('child');
190 | console.log(child.parentElement);
191 | ```
192 | 
193 | ### **🔹 2. Child Elements খুঁজে বের করা**  
194 | ```js
195 | let parent = document.getElementById('parent');
196 | console.log(parent.children);
197 | ```
198 | 
199 | ---
200 | 
201 | ## **🔥 শেষ কথা**
202 | ✅ **DOM ব্যবহার করে HTML-এর যে কোনো কিছু পরিবর্তন করা যায়।**  
203 | ✅ **ইভেন্ট হ্যান্ডলিং ও ডেলিগেশন ওয়েব ডেভেলপমেন্টে অনেক গুরুত্বপূর্ণ।**  
204 | ✅ **DOM ট্র্যাভার্সিং দ্বারা এলিমেন্টের Parent-Child সম্পর্ক ম্যানেজ করা যায়।**  
205 | 
206 | Another Type of Learning
207 | ---
208 | 
209 | ### **📌 JavaScript DOM (Document Object Model) – সম্পূর্ণ গাইড**  
210 | JavaScript-এ **DOM (Document Object Model)** হল **ওয়েব পেজ ম্যানিপুলেট করার মূল মাধ্যম**। DOM-এর মাধ্যমে **HTML ও CSS পরিবর্তন, ইভেন্ট হ্যান্ডলিং, নতুন এলিমেন্ট যোগ করা, রিমুভ করা** ইত্যাদি করা যায়।  
211 | 
212 | ---
213 | 
214 | # **📌 Table of Contents**
215 | 
216 | 
217 | # **🔍 JavaScript DOM (Document Object Model) বিস্তারিত**  
218 | 
219 | JavaScript-এ **DOM (Document Object Model)** হলো একটি **API** যা HTML ডকুমেন্টকে **গাছের (tree structure) মতো** উপস্থাপন করে। এর মাধ্যমে **HTML এলিমেন্ট পরিবর্তন, মডিফাই বা ম্যানিপুলেট** করা যায়।  
220 | 
221 | ---
222 | 
223 | ## **✅ ১. DOM কীভাবে কাজ করে?**  
224 | ### **📌 DOM Tree Structure (গাছের মতো গঠন)**  
225 | 
226 | একটি HTML পেজ লোড হলে, **ব্রাউজার সেটাকে একটি "Tree Structure" এ রূপান্তর করে**, যেখানে প্রতিটি এলিমেন্ট **Node** হিসেবে কাজ করে।  
227 | 
228 | 🔹 **HTML কোড:**  
229 | ```html
230 | <!DOCTYPE html>
231 | <html>
232 |   <head>
233 |     <title>DOM Example</title>
234 |   </head>
235 |   <body>
236 |     <h1 id="title">Hello, DOM!</h1>
237 |     <p class="description">This is a DOM tutorial.</p>
238 |     <button onclick="changeText()">Click Me</button>
239 |   </body>
240 | </html>
241 | ```
242 | 
243 | 🔹 **DOM Tree Representation:**  
244 | ```
245 | Document
246 | │
247 | ├── <html>
248 | │   ├── <head>
249 | │   │   ├── <title>DOM Example</title>
250 | │   ├── <body>
251 | │       ├── <h1 id="title">Hello, DOM!</h1>
252 | │       ├── <p class="description">This is a DOM tutorial.</p>
253 | │       ├── <button onclick="changeText()">Click Me</button>
254 | ```
255 | 🔹 **ব্যাখ্যা:**  
256 | 👉 `document` হলো **মূল অবজেক্ট (Root Object)**  
257 | 👉 `html`, `head`, `body` হলো **চাইল্ড নোড (Child Nodes)**  
258 | 👉 `h1`, `p`, `button` হলো **Elements (Elements Nodes)**  
259 | 
260 | ---
261 | 
262 | ## **✅ ২. DOM-এর গুরুত্বপূর্ণ মেথড ও প্রপার্টি**  
263 | 
264 | | **Function / Property** | **ব্যবহার** | **উদাহরণ** |
265 | |------------------|------------|----------------|
266 | | `document.getElementById(id)` | **ID দিয়ে এলিমেন্ট খুঁজে আনে** | `document.getElementById("title")` |
267 | | `document.getElementsByClassName(class)` | **একই ক্লাসের সব এলিমেন্ট খুঁজে আনে** | `document.getElementsByClassName("description")` |
268 | | `document.getElementsByTagName(tag)` | **একই ট্যাগের সব এলিমেন্ট খুঁজে আনে** | `document.getElementsByTagName("p")` |
269 | | `document.querySelector(selector)` | **প্রথম ম্যাচিং এলিমেন্ট খুঁজে আনে** | `document.querySelector(".description")` |
270 | | `document.querySelectorAll(selector)` | **সব ম্যাচিং এলিমেন্ট খুঁজে আনে** | `document.querySelectorAll("p")` |
271 | | `.innerHTML` | **HTML কন্টেন্ট পরিবর্তন করে** | `document.getElementById("title").innerHTML = "New Title"` |
272 | | `.innerText` | **শুধুমাত্র টেক্সট পরিবর্তন করে** | `document.getElementById("title").innerText = "Hello!"` |
273 | | `.style.property` | **স্টাইল পরিবর্তন করে** | `document.getElementById("title").style.color = "red"` |
274 | | `document.createElement(tag)` | **নতুন এলিমেন্ট তৈরি করে** | `document.createElement("div")` |
275 | | `element.appendChild(node)` | **একটি এলিমেন্টের মধ্যে নতুন এলিমেন্ট যোগ করে** | `document.body.appendChild(newDiv)` |
276 | | `element.removeChild(node)` | **একটি এলিমেন্ট রিমুভ করে** | `document.body.removeChild(oldElement)` |
277 | 
278 | ---
279 | 
280 | ## **✅ ৩. DOM Manipulation (পরিবর্তন) এর বাস্তব উদাহরণ**  
281 | 
282 | ### **📌 ১. ID দিয়ে একটি এলিমেন্ট খুঁজে এনে পরিবর্তন করা**  
283 | ```javascript
284 | document.getElementById("title").innerHTML = "Welcome to DOM!";
285 | document.getElementById("title").style.color = "blue";
286 | ```
287 | 
288 | ---
289 | 
290 | ### **📌 ২. ক্লাস দিয়ে এলিমেন্ট পরিবর্তন করা**  
291 | ```javascript
292 | let elements = document.getElementsByClassName("description");
293 | elements[0].innerText = "Updated Description!";
294 | ```
295 | 
296 | ---
297 | 
298 | ### **📌 ৩. `querySelector()` এবং `querySelectorAll()` দিয়ে এলিমেন্ট পরিবর্তন**  
299 | ```javascript
300 | document.querySelector(".description").style.color = "green";
301 | 
302 | let paragraphs = document.querySelectorAll("p");
303 | paragraphs.forEach(p => p.style.fontSize = "20px");
304 | ```
305 | 
306 | ---
307 | 
308 | ### **📌 ৪. নতুন HTML এলিমেন্ট তৈরি এবং যোগ করা**  
309 | ```javascript
310 | let newParagraph = document.createElement("p");
311 | newParagraph.innerText = "This is a new paragraph!";
312 | document.body.appendChild(newParagraph);
313 | ```
314 | 
315 | ---
316 | 
317 | ### **📌 ৫. `removeChild()` দিয়ে এলিমেন্ট মুছে ফেলা**  
318 | ```javascript
319 | let elementToRemove = document.getElementById("title");
320 | document.body.removeChild(elementToRemove);
321 | ```
322 | 
323 | ---
324 | 
325 | ## **✅ ৪. ইভেন্ট হ্যান্ডলিং (Event Handling)**
326 | JavaScript দিয়ে DOM এলিমেন্টে ইভেন্ট যুক্ত করা যায়।  
327 | 
328 | ### **📌 ১. `onclick` ইভেন্ট দিয়ে বাটন ক্লিক করলে টেক্সট পরিবর্তন করা**  
329 | ```javascript
330 | function changeText() {
331 |     document.getElementById("title").innerText = "Button Clicked!";
332 | }
333 | ```
334 | 
335 | 🔹 **HTML বাটন:**  
336 | ```html
337 | <button onclick="changeText()">Click Me</button>
338 | ```
339 | 
340 | ---
341 | 
342 | ### **📌 ২. `addEventListener()` দিয়ে ইভেন্ট হ্যান্ডলিং**  
343 | ```javascript
344 | document.getElementById("title").addEventListener("mouseover", function() {
345 |     this.style.color = "red";
346 | });
347 | ```
348 | 👉 এখানে **মাউস রাখলে** `title` এর রঙ লাল হবে।  
349 | 
350 | ---
351 | 
352 | ## **✅ ৫. বাস্তব জীবনের ব্যবহার**  
353 | | **ব্যবহার** | **DOM মেথড** |
354 | |------------|-------------|
355 | | ওয়েবপেজের ডাটা আপডেট | `innerHTML`, `innerText` |
356 | | ফর্ম যাচাই (Form Validation) | `getElementById()`, `addEventListener()` |
357 | | ডায়নামিক কন্টেন্ট যোগ করা | `createElement()`, `appendChild()` |
358 | | ইউজার ইন্টার‌্যাকশন হ্যান্ডল করা | `addEventListener()` |
359 | | AJAX দিয়ে ডাটা লোড করা | `document.querySelector()` |
360 | 
361 | ---
362 | ✅ **DOM ব্যবহার করে HTML-এর যে কোনো কিছু পরিবর্তন করা যায়।**  
363 | ✅ **ইভেন্ট হ্যান্ডলিং ও ডেলিগেশন ওয়েব ডেভেলপমেন্টে অনেক গুরুত্বপূর্ণ।**  
364 | ✅ **DOM ট্র্যাভার্সিং দ্বারা এলিমেন্টের Parent-Child সম্পর্ক ম্যানেজ করা যায়।**  
365 | ---
366 | 
367 | ## **✅ ৬. সংক্ষেপে উপসংহার**  
368 | 🔹 **DOM হলো HTML-এর Object Model, যা JavaScript দিয়ে নিয়ন্ত্রণ করা যায়।**  
369 | 🔹 **এটি একটি "Tree Structure" তৈরি করে যেখানে প্রতিটি ট্যাগ একটি Node।**  
370 | 🔹 **JavaScript দিয়ে DOM Manipulation করে HTML পরিবর্তন, স্টাইল আপডেট, এবং ইভেন্ট হ্যান্ডল করা সম্ভব।**  
371 | 🔹 **`getElementById()`, `querySelector()`, `innerHTML`, `addEventListener()` প্রভৃতি গুরুত্বপূর্ণ মেথড।**  
372 | 


--------------------------------------------------------------------------------
/0. Introduction/JS-Intro-Bangla.md:
--------------------------------------------------------------------------------
  1 | **এসো বাংলায় জাভাস্ক্রিপ্ট দেখি**
  2 | ---
  3 | 
  4 | ### **📌 জাভাস্ক্রিপ্ট (JavaScript) সম্পর্কে সম্পূর্ণ গাইড**  
  5 | 
  6 | **জাভাস্ক্রিপ্ট** (JavaScript) হল একটি **স্ক্রিপ্টিং ভাষা** যা ওয়েব পেজের ইন্টারঅ্যাকটিভিটি এবং ডাইনামিক ফিচার তৈরি করতে ব্যবহৃত হয়। এটি **ব্রাউজারের মধ্যে রান** করে এবং ওয়েব পেজের কনটেন্ট, স্টাইল এবং আচরণকে পরিবর্তন করতে সক্ষম।
  7 | 
  8 | ---
  9 | 
 10 | ## **🔹 জাভাস্ক্রিপ্টের মৌলিক বিষয়**  
 11 | 
 12 | ### **১. ভেরিয়েবল (Variables)**  
 13 | ভেরিয়েবলগুলি এমন **সংরক্ষণস্থান** যেখানে ডাটা রাখা হয়। জাভাস্ক্রিপ্টে ভেরিয়েবল তিনটি ধরনের হতে পারে:  
 14 | - **var**  
 15 | - **let**  
 16 | - **const**
 17 | 
 18 | ```javascript
 19 | let x = 10;   // মিউটেবল (পরিবর্তনযোগ্য)
 20 | const y = 5;  // ইমিউটেবল (অপরিবর্তনীয়)
 21 | ```
 22 | 
 23 | ### **২. ডাটা টাইপ (Data Types)**  
 24 | জাভাস্ক্রিপ্টে বিভিন্ন ডাটা টাইপ রয়েছে, যেমন:  
 25 | - **Primitive Types**: String, Number, Boolean, Undefined, Null, Symbol, BigInt
 26 | - **Reference Types**: Object, Array, Function
 27 | 
 28 | ```javascript
 29 | let name = "John";  // String
 30 | let age = 25;       // Number
 31 | let isActive = true; // Boolean
 32 | let user = null;    // Null
 33 | ```
 34 | 
 35 | ### **৩. অপারেটর (Operators)**  
 36 | অপারেটর দিয়ে **গাণিতিক, তুলনা, লজিক্যাল** ইত্যাদি অপারেশন করা যায়।  
 37 | 
 38 | **গাণিতিক অপারেটর**:
 39 | ```javascript
 40 | let sum = 10 + 5; // 15
 41 | ```
 42 | 
 43 | **তুলনা অপারেটর**:
 44 | ```javascript
 45 | let isEqual = 10 == 10; // true
 46 | ```
 47 | 
 48 | **লজিক্যাল অপারেটর**:
 49 | ```javascript
 50 | let isTrue = true && false; // false
 51 | ```
 52 | 
 53 | ---
 54 | 
 55 | ## **🔹 কন্ডিশনাল স্টেটমেন্ট (Conditional Statements)**  
 56 | কন্ডিশনাল স্টেটমেন্ট দিয়ে শর্তানুযায়ী কোডের কার্যাবলী নিয়ন্ত্রণ করা হয়।
 57 | 
 58 | **if-else**:
 59 | ```javascript
 60 | let age = 20;
 61 | if (age >= 18) {
 62 |   console.log("You are an adult.");
 63 | } else {
 64 |   console.log("You are a minor.");
 65 | }
 66 | ```
 67 | 
 68 | **switch**:
 69 | ```javascript
 70 | let day = 3;
 71 | switch (day) {
 72 |   case 1:
 73 |     console.log("Sunday");
 74 |     break;
 75 |   case 2:
 76 |     console.log("Monday");
 77 |     break;
 78 |   default:
 79 |     console.log("Invalid day");
 80 | }
 81 | ```
 82 | 
 83 | ---
 84 | 
 85 | ## **🔹 লুপ (Loops)**  
 86 | লুপের মাধ্যমে আমরা কোডকে বারবার রান করাতে পারি।  
 87 | 
 88 | ### **for loop**  
 89 | ```javascript
 90 | for (let i = 0; i < 5; i++) {
 91 |   console.log(i);  // 0, 1, 2, 3, 4
 92 | }
 93 | ```
 94 | 
 95 | ### **while loop**  
 96 | ```javascript
 97 | let i = 0;
 98 | while (i < 5) {
 99 |   console.log(i);  // 0, 1, 2, 3, 4
100 |   i++;
101 | }
102 | ```
103 | 
104 | ### **do-while loop**  
105 | ```javascript
106 | let i = 0;
107 | do {
108 |   console.log(i);  // 0, 1, 2, 3, 4
109 |   i++;
110 | } while (i < 5);
111 | ```
112 | 
113 | ---
114 | 
115 | ## **🔹 ফাংশন (Functions)**  
116 | ফাংশন হল কোডের একটি ব্লক যা একাধিক বার ব্যবহার করা যায়।  
117 | 
118 | ### **ফাংশন ডিফিনেশন**:
119 | ```javascript
120 | function greet() {
121 |   console.log("Hello, World!");
122 | }
123 | greet();  // "Hello, World!"
124 | ```
125 | 
126 | ### **ফাংশনে আর্গুমেন্ট এবং রিটার্ন**:
127 | ```javascript
128 | function add(a, b) {
129 |   return a + b;
130 | }
131 | let result = add(3, 4);  // 7
132 | ```
133 | 
134 | ---
135 | 
136 | ## **🔹 অবজেক্ট (Objects)**  
137 | অবজেক্ট হল ডাটা ধারণ করার জন্য একটি কমপ্লেক্স ডাটা স্ট্রাকচার, যা প্রোপার্টি এবং মেথড ধারণ করতে পারে।  
138 | 
139 | ```javascript
140 | let person = {
141 |   name: "John",
142 |   age: 30,
143 |   greet: function() {
144 |     console.log("Hello, " + this.name);
145 |   }
146 | };
147 | person.greet();  // "Hello, John"
148 | ```
149 | 
150 | ---
151 | 
152 | ## **🔹 অ্যারে (Arrays)**  
153 | অ্যারে একটি লিনিয়ার ডাটা স্ট্রাকচার, যেখানে একাধিক ভ্যালু রাখা যায়।  
154 | 
155 | ```javascript
156 | let fruits = ["Apple", "Banana", "Cherry"];
157 | console.log(fruits[0]);  // "Apple"
158 | ```
159 | 
160 | ---
161 | 
162 | ## **🔹 ইভেন্ট (Events)**  
163 | জাভাস্ক্রিপ্ট ব্যবহার করে ওয়েব পেজের ইভেন্টগুলির প্রতি রেসপন্স দেয়া যায়। উদাহরণস্বরূপ, ক্লিক, হোভার, কিবোর্ড ইনপুট ইত্যাদি।
164 | 
165 | ```javascript
166 | document.getElementById("myButton").onclick = function() {
167 |   alert("Button clicked!");
168 | };
169 | ```
170 | 
171 | ---
172 | 
173 | ## **🔹 এসিনক্রোনাস জাভাস্ক্রিপ্ট (Asynchronous JavaScript)**  
174 | এটি এমন কোড যে কোন কাজের জন্য অপেক্ষা না করে কোড চলতে থাকে। এর জন্য **callback functions**, **Promises** এবং **async/await** ব্যবহৃত হয়।  
175 | 
176 | ### **Callback Function**:
177 | ```javascript
178 | function greet(callback) {
179 |   console.log("Hello!");
180 |   callback();
181 | }
182 | 
183 | greet(function() {
184 |   console.log("Callback executed!");
185 | });
186 | ```
187 | 
188 | ### **Promise**:
189 | ```javascript
190 | let promise = new Promise(function(resolve, reject) {
191 |   let success = true;
192 |   if (success) {
193 |     resolve("Task completed successfully!");
194 |   } else {
195 |     reject("Task failed.");
196 |   }
197 | });
198 | 
199 | promise.then(function(value) {
200 |   console.log(value);  // "Task completed successfully!"
201 | }).catch(function(error) {
202 |   console.log(error);
203 | });
204 | ```
205 | 
206 | ### **Async/Await**:
207 | ```javascript
208 | async function fetchData() {
209 |   let result = await fetch('https://api.example.com/data');
210 |   let data = await result.json();
211 |   console.log(data);
212 | }
213 | ```
214 | 
215 | ---
216 | 
217 | ## **🔹 ক্লাস (Classes)**  
218 | জাভাস্ক্রিপ্টে ক্লাস ব্যবহার করে অবজেক্ট ও তাদের মেথড গঠন করা হয়।  
219 | 
220 | ```javascript
221 | class Person {
222 |   constructor(name, age) {
223 |     this.name = name;
224 |     this.age = age;
225 |   }
226 | 
227 |   greet() {
228 |     console.log("Hello, " + this.name);
229 |   }
230 | }
231 | 
232 | let person1 = new Person("John", 30);
233 | person1.greet();  // "Hello, John"
234 | ```
235 | 
236 | ---
237 | 
238 | ## **🔹 ব্রাউজার API এবং DOM**  
239 | জাভাস্ক্রিপ্টের সাহায্যে ওয়েব পেজের **DOM** (Document Object Model) এর সাথে ইন্টারঅ্যাক্ট করা যায়। এর মাধ্যমে HTML এবং CSS-এর মান পরিবর্তন করা সম্ভব।  
240 | 
241 | **DOM Manipulation উদাহরণ**:
242 | ```javascript
243 | document.getElementById("myElement").style.color = "red";
244 | ```
245 | 
246 | ---
247 | 
248 | ## **🔹 উপসংহার**  
249 | জাভাস্ক্রিপ্ট হলো ওয়েব ডেভেলপমেন্টের একটি অত্যন্ত শক্তিশালী ভাষা, যা ফ্রন্ট-এন্ড এবং ব্যাক-এন্ড ডেভেলপমেন্টের জন্য ব্যবহৃত হয়। এটি খুবই গুরুত্বপূর্ণ ওয়েব অ্যাপ্লিকেশন এবং ওয়েব সাইটের ইন্টারঅ্যাকটিভিটি বৃদ্ধি করতে।
250 | 
251 | এটি শেখার পর তুমি ওয়েব পেজে ইন্টারঅ্যাকশন, ডায়নামিক কন্টেন্ট, এবং আরও অনেক কিছু তৈরি করতে পারবে। জাভাস্ক্রিপ্টের অন্যান্য বিষয়গুলির উপর গভীরভাবে কাজ করতে চাইলে আমাকে জানাও! 😊
252 | 
253 | ---
254 | ---
255 | **Learning JavaScript with Bangla**
256 | ---
257 | 
258 | ### **JavaScript - Everything You Need to Know**
259 | 
260 | JavaScript is a **high-level, interpreted programming language** primarily used for building dynamic, interactive websites. It is one of the core technologies of web development, along with HTML and CSS. Here’s everything you should know about JavaScript:
261 | 
262 | ---
263 | 
264 | ## **1. What is JavaScript?**
265 | JavaScript is a **scripting language** that allows you to create dynamically updating content, control multimedia, animate images, and much more. It is **client-side**, meaning it runs in the browser and interacts directly with HTML and CSS.
266 | 
267 | ---
268 | 
269 | ## **2. Basics of JavaScript**
270 | 
271 | ### **a. Writing JavaScript**
272 | JavaScript code can be written directly within the `<script>` tag in an HTML file or in external `.js` files.
273 | 
274 | ### **Example of Inline Script in HTML:**
275 | ```html
276 | <!DOCTYPE html>
277 | <html lang="en">
278 | <head>
279 |     <meta charset="UTF-8">
280 |     <title>JavaScript Example</title>
281 | </head>
282 | <body>
283 | 
284 |     <h1>Hello, JavaScript!</h1>
285 | 
286 |     <script>
287 |         alert("Welcome to JavaScript!");
288 |     </script>
289 | 
290 | </body>
291 | </html>
292 | ```
293 | 
294 | ### **Example of External JavaScript File:**
295 | ```html
296 | <!DOCTYPE html>
297 | <html lang="en">
298 | <head>
299 |     <meta charset="UTF-8">
300 |     <title>External JavaScript</title>
301 |     <script src="script.js"></script>
302 | </head>
303 | <body>
304 |     <h1>Welcome to JavaScript</h1>
305 | </body>
306 | </html>
307 | ```
308 | In the `script.js` file:
309 | ```javascript
310 | alert("This is an external JavaScript file!");
311 | ```
312 | 
313 | ---
314 | 
315 | ## **3. Variables and Data Types**
316 | JavaScript is **loosely typed**, meaning you don’t need to declare the data type of a variable.
317 | 
318 | ### **Declaring Variables**
319 | You can declare variables using:
320 | - `let` (block-scoped)
321 | - `const` (block-scoped, read-only)
322 | - `var` (function-scoped, old way)
323 | 
324 | ### **Example:**
325 | ```javascript
326 | let name = "Shihab";
327 | const age = 25;
328 | var city = "Dhaka";
329 | ```
330 | 
331 | ### **Data Types**
332 | JavaScript has 7 primitive data types:
333 | 1. **String** – Represents text (e.g., `"Hello"`)
334 | 2. **Number** – Represents numbers (e.g., `25`)
335 | 3. **BigInt** – Represents large integers (e.g., `100n`)
336 | 4. **Boolean** – Represents `true` or `false`
337 | 5. **undefined** – Represents a variable that has been declared but not assigned a value
338 | 6. **null** – Represents an intentional absence of value
339 | 7. **Symbol** – Represents a unique, immutable value
340 | 
341 | ---
342 | 
343 | ## **4. Operators**
344 | JavaScript has various operators to perform operations on variables and values:
345 | 
346 | ### **a. Arithmetic Operators**:
347 | ```javascript
348 | let x = 5, y = 3;
349 | console.log(x + y);  // Output: 8
350 | ```
351 | 
352 | ### **b. Assignment Operators**:
353 | ```javascript
354 | let x = 10;
355 | x += 5;  // x = x + 5
356 | console.log(x);  // Output: 15
357 | ```
358 | 
359 | ### **c. Comparison Operators**:
360 | ```javascript
361 | console.log(5 > 3);  // Output: true
362 | ```
363 | 
364 | ### **d. Logical Operators**:
365 | ```javascript
366 | let x = true, y = false;
367 | console.log(x && y);  // Output: false
368 | ```
369 | 
370 | ---
371 | 
372 | ## **5. Control Flow - Conditional Statements**
373 | 
374 | ### **a. if...else Statement**
375 | ```javascript
376 | let age = 20;
377 | if (age >= 18) {
378 |     console.log("You are an adult.");
379 | } else {
380 |     console.log("You are a minor.");
381 | }
382 | ```
383 | 
384 | ### **b. switch Statement**
385 | ```javascript
386 | let day = 2;
387 | switch (day) {
388 |     case 1: console.log("Monday"); break;
389 |     case 2: console.log("Tuesday"); break;
390 |     default: console.log("Unknown day");
391 | }
392 | ```
393 | 
394 | ---
395 | 
396 | ## **6. Functions**
397 | Functions allow you to group code into reusable blocks.
398 | 
399 | ### **Function Declaration:**
400 | ```javascript
401 | function greet(name) {
402 |     console.log("Hello, " + name);
403 | }
404 | greet("Shihab");  // Output: "Hello, Shihab"
405 | ```
406 | 
407 | ### **Function Expression:**
408 | ```javascript
409 | const greet = function(name) {
410 |     console.log("Hello, " + name);
411 | };
412 | greet("Shihab");  // Output: "Hello, Shihab"
413 | ```
414 | 
415 | ### **Arrow Functions** (ES6+):
416 | ```javascript
417 | const greet = (name) => console.log("Hello, " + name);
418 | greet("Shihab");  // Output: "Hello, Shihab"
419 | ```
420 | 
421 | ---
422 | 
423 | ## **7. Loops**
424 | 
425 | ### **a. for Loop**
426 | ```javascript
427 | for (let i = 0; i < 5; i++) {
428 |     console.log(i);  // Output: 0 1 2 3 4
429 | }
430 | ```
431 | 
432 | ### **b. while Loop**
433 | ```javascript
434 | let i = 0;
435 | while (i < 5) {
436 |     console.log(i);  // Output: 0 1 2 3 4
437 |     i++;
438 | }
439 | ```
440 | 
441 | ### **c. forEach Loop (Array method)**
442 | ```javascript
443 | let colors = ["Red", "Green", "Blue"];
444 | colors.forEach((color) => {
445 |     console.log(color);  // Output: Red Green Blue
446 | });
447 | ```
448 | 
449 | ---
450 | 
451 | ## **8. Arrays and Objects**
452 | 
453 | ### **a. Arrays**
454 | Arrays are ordered collections of items, and each item has an index.
455 | 
456 | ```javascript
457 | let fruits = ["Apple", "Banana", "Mango"];
458 | console.log(fruits[0]);  // Output: Apple
459 | ```
460 | 
461 | ### **b. Objects**
462 | Objects store collections of key-value pairs.
463 | 
464 | ```javascript
465 | let person = {
466 |     name: "Shihab",
467 |     age: 25,
468 |     city: "Dhaka"
469 | };
470 | console.log(person.name);  // Output: Shihab
471 | ```
472 | 
473 | ---
474 | 
475 | ## **9. DOM Manipulation**
476 | JavaScript interacts with HTML through the **Document Object Model (DOM)**. The DOM represents the structure of a webpage.
477 | 
478 | ### **Accessing Elements**:
479 | ```javascript
480 | let heading = document.getElementById("myHeading");
481 | console.log(heading.innerHTML);
482 | ```
483 | 
484 | ### **Changing Element Content**:
485 | ```javascript
486 | heading.innerHTML = "Hello, JavaScript!";
487 | ```
488 | 
489 | ### **Event Handling**:
490 | ```javascript
491 | document.getElementById("myButton").addEventListener("click", function() {
492 |     alert("Button clicked!");
493 | });
494 | ```
495 | 
496 | ---
497 | 
498 | ## **10. ES6+ Features (Modern JavaScript)**
499 | 
500 | ### **a. let, const (Block-scoping)**
501 | ```javascript
502 | let x = 10;
503 | const y = 20;
504 | ```
505 | 
506 | ### **b. Template Literals** (String Interpolation)
507 | ```javascript
508 | let name = "Shihab";
509 | console.log(`Hello, ${name}!`);  // Output: "Hello, Shihab!"
510 | ```
511 | 
512 | ### **c. Destructuring Assignment**
513 | ```javascript
514 | let person = { name: "Shihab", age: 25 };
515 | let { name, age } = person;
516 | console.log(name);  // Output: "Shihab"
517 | ```
518 | 
519 | ### **d. Spread and Rest Operators**
520 | ```javascript
521 | let arr1 = [1, 2, 3];
522 | let arr2 = [...arr1, 4, 5];  // Spread operator
523 | console.log(arr2);  // Output: [1, 2, 3, 4, 5]
524 | 
525 | const sum = (...numbers) => numbers.reduce((total, num) => total + num, 0);
526 | console.log(sum(1, 2, 3));  // Output: 6
527 | ```
528 | 
529 | ### **e. Promises (Asynchronous Programming)**
530 | ```javascript
531 | let myPromise = new Promise((resolve, reject) => {
532 |     let success = true;
533 |     if (success) {
534 |         resolve("Operation successful!");
535 |     } else {
536 |         reject("Operation failed.");
537 |     }
538 | });
539 | 
540 | myPromise.then((message) => {
541 |     console.log(message);
542 | }).catch((message) => {
543 |     console.log(message);
544 | });
545 | ```
546 | 
547 | ---
548 | 
549 | ## **11. Error Handling - try...catch**
550 | JavaScript provides the `try...catch` statement for catching errors.
551 | 
552 | ### **Example:**
553 | ```javascript
554 | try {
555 |     let x = y;  // ReferenceError (y is not defined)
556 | } catch (error) {
557 |     console.log("An error occurred: " + error.message);
558 | }
559 | ```
560 | 
561 | ---
562 | 
563 | ## **Conclusion**
564 | JavaScript is a versatile language that powers the web. It allows you to build interactive, dynamic websites and perform many types of tasks, from simple operations to complex data processing and animations.
565 | 
566 | Would you like to dive deeper into any specific JavaScript topic or practice with examples?
567 | 


--------------------------------------------------------------------------------