Fixed All issues

Author: ajay-dhangar

absolute-beginners/full-stack/css/box-model.mdx

@@ -64,7 +64,7 @@ Use these for more control:
 
 ## 4. The "Box-Sizing" Problem
 
-By default, if you give a box a width of `200px` and then add `20px` of padding, the box actually becomes **240px** wide (200 + 20 \text{ left} + 20 \text{ right}). This often breaks layouts!
+By default, if you give a box a width of `200px` and then add `20px` of padding, the box actually becomes **240px** wide (200 + 20 left + 20 right). This often breaks layouts!
 
 ### The Fix: `border-box`
 

absolute-beginners/full-stack/javascript/arrays-objects.mdx

@@ -1 +1,100 @@
-<ComingSoon />
+---
+title: "Arrays and Objects"
+sidebar_label: "4. Arrays & Objects"
+sidebar_position: 4
+description: "Learn how to store collections of data using Arrays and Objects in JavaScript."
+---
+
+So far, we've stored one piece of data in one variable (like `let fruit = "apple"`). But what if you have a list of 100 fruits? Or what if you want to store a "User Profile" with a name, age, and email?
+
+This is where **Arrays** and **Objects** come in.
+
+## 1. Arrays (The Ordered List)
+
+An **Array** is a single variable that holds a list of items in a specific order. You define an array using square brackets `[]`.
+
+```javascript
+let fruits = ["Apple", "Banana", "Cherry"];
+```
+
+### Accessing Items (Indexing)
+In programming, we start counting at **0**.
+* `fruits[0]` is "Apple"
+* `fruits[1]` is "Banana"
+
+### Common Array Actions:
+
+```javascript
+fruits.push("Orange"); // Adds to the end
+fruits.pop();         // Removes the last item
+console.log(fruits.length); // Tells you how many items are inside (3)
+```
+
+## 2. Objects (The Labeled Cabinet)
+
+While Arrays are lists, **Objects** store data in "Key-Value" pairs. Use curly braces `{}` for objects. They are perfect for describing a single thing in detail.
+
+```javascript
+const user = {
+    firstName: "Ajay",
+    lastName: "Dhangar",
+    age: 25,
+    isDeveloper: true
+};
+```
+
+### Accessing Data:
+
+You use **Dot Notation** to get information out of an object:
+
+```javascript
+console.log(user.firstName); // Output: Ajay
+console.log(user.age);       // Output: 25
+```
+
+## 3. Which one should I use?
+
+It can be confusing at first. Use this simple rule:
+
+| Use an **Array** when... | Use an **Object** when... |
+| :--- | :--- |
+| You have a **list** of similar things. | You want to **describe** one thing. |
+| Order matters (1st, 2nd, 3rd). | Order doesn't matter. |
+| Example: A list of students. | Example: A single student's profile. |
+
+## 4. Combining Both (The Real World)
+
+In a real application like **CodeHarborHub**, we often have an **Array of Objects**. This is how a list of tutorials or users is actually stored!
+
+```javascript
+const courses = [
+    { title: "HTML Basics", status: "Completed" },
+    { title: "CSS Mastery", status: "In Progress" },
+    { title: "JS Logic", status: "Not Started" }
+];
+
+// To get the title of the first course:
+console.log(courses[0].title); // Output: HTML Basics
+```
+
+## Practice: The "My Team" List
+
+Try building this in your `script.js`:
+
+1. Create an **Object** for yourself called `me` with your name and favorite hobby.
+2. Create an **Array** called `myTeam` and put your object inside it.
+3. Add another object to the array for a friend.
+4. Use `console.log` to print the hobby of the second person in your array.
+
+```javascript
+const me = { name: "Ajay", hobby: "Cricket" };
+const friend = { name: "Rahul", hobby: "Coding" };
+
+const myTeam = [me, friend];
+
+console.log(myTeam[1].hobby); // Output: Coding
+```
+
+:::info Const with Arrays/Objects
+You'll notice we usually use `const` for Arrays and Objects. This is because even though the *content* inside might change (we add a fruit or update an age), the "cabinet" itself stays the same.
+:::

absolute-beginners/full-stack/javascript/dom-manipulation.mdx

@@ -1 +1,107 @@
-<ComingSoon />
+---
+title: "DOM Manipulation"
+sidebar_label: "5. DOM Manipulation"
+sidebar_position: 5
+description: "Learn how to use JavaScript to change your HTML and CSS on the fly."
+---
+
+The **DOM (Document Object Model)** is the map that the browser creates of your HTML. JavaScript uses this map to find, change, add, or delete things on your web page without refreshing it.
+
+Think of the DOM as a **Tree**. Every HTML tag is a branch or a leaf that JavaScript can grab onto.
+
+## 1. Selecting Elements
+
+Before you can change something, you have to "find" it. JavaScript provides several ways to grab elements from your HTML.
+
+| Method | Use case | Example |
+| :--- | :--- | :--- |
+| `getElementById()` | To find a single, unique element. | `document.getElementById('header')` |
+| `querySelector()` | To find the first element that matches a CSS selector. | `document.querySelector('.btn')` |
+| `querySelectorAll()` | To find EVERY element that matches. | `document.querySelectorAll('p')` |
+
+## 2. Changing the Content
+
+Once you have grabbed an element, you can change what is inside it.
+
+```javascript
+// 1. Find it
+const myTitle = document.getElementById('main-title');
+
+// 2. Change it
+myTitle.innerText = "Welcome to CodeHarborHub!";
+myTitle.style.color = "blue"; // You can even change CSS!
+```
+
+## 3. Listening for Events
+
+This is how we make buttons actually *do* things. We use an **Event Listener** to "listen" for user actions like clicks, typing, or scrolling.
+
+```javascript
+const btn = document.querySelector('.my-button');
+
+// "When the button is clicked, run this function"
+btn.addEventListener('click', () => {
+    alert("Button was clicked!");
+});
+```
+
+## 4. Creating New Elements
+
+You aren't stuck with the HTML you started with. You can create brand new elements out of thin air.
+
+```javascript
+// 1. Create it
+const newPara = document.createElement('p');
+
+// 2. Add content
+newPara.innerText = "I was created by JavaScript!";
+
+// 3. Put it on the page
+document.body.appendChild(newPara);
+```
+
+## Let's Practice: The Dark Mode Toggle
+
+Let's build a simple feature that changes the background color when a button is clicked.
+
+**HTML:**
+
+```html
+<button id="theme-btn">Switch Theme</button>
+```
+
+**JavaScript (`script.js`):**
+
+```javascript
+const themeBtn = document.getElementById('theme-btn');
+
+themeBtn.addEventListener('click', () => {
+    // Check the current color
+    if (document.body.style.backgroundColor === "black") {
+        document.body.style.backgroundColor = "white";
+        document.body.style.color = "black";
+    } else {
+        document.body.style.backgroundColor = "black";
+        document.body.style.color = "white";
+    }
+});
+```
+
+## 5. Common DOM Properties
+
+<Tabs>
+  <TabItem value="text" label="Text & HTML" default>
+    * `.innerText`: Changes just the text.
+    * `.innerHTML`: Changes the text AND allows you to add HTML tags.
+  </TabItem>
+  <TabItem value="classes" label="Classes">
+    It is better to change classes than individual styles:
+    * `element.classList.add('active')`
+    * `element.classList.remove('hidden')`
+    * `element.classList.toggle('dark-mode')`
+  </TabItem>
+</Tabs>
+
+:::info Don't Over-CSS in JS
+Avoid writing too much `element.style.color = "red"` in your JavaScript. Instead, define a class like `.error { color: red; }` in your CSS file and use JavaScript to `.add('error')`. This keeps your logic and design separate!
+:::