complited Js tutorials

Author: ajay-dhangar

absolute-beginners/frontend-beginner/javascript/dom-manipulation.mdx

@@ -0,0 +1,98 @@
+---
+sidebar_position: 5
+title: DOM Manipulation
+sidebar_label: DOM Manipulation
+description: "Learn how to use JavaScript to select, change, and animate HTML elements in real-time."
+---
+
+Up until now, your JavaScript has been living inside the "Console." It’s been doing math and storing variables, but the user can't see that. 
+
+**DOM Manipulation** is how JavaScript talks to your HTML.
+
+## What is the DOM?
+
+**DOM** stands for **Document Object Model**. 
+
+When a browser loads your HTML file, it converts it into a "Tree" structure. Every tag (`<h1>`, `<div>`, `<p>`) is a "Branch" or a "Leaf" on that tree. JavaScript can climb this tree, find a specific leaf, and change its color, text, or even delete it!
+
+## Step 1: Selecting Elements (Finding the Target)
+
+Before you can change something, you have to "find" it. Imagine you are a sniper; you need a target. 
+
+In modern JS, we use two main "Scanners":
+
+### 1. `document.getElementById('id-name')`
+
+The fastest way to find a **single, unique** element.
+
+```javascript
+const myTitle = document.getElementById('main-title');
+```
+
+### 2. `document.querySelector('.class-name')`
+
+The "Swiss Army Knife." It can find anything using CSS selectors (tags, classes, or IDs).
+
+```javascript
+const myButton = document.querySelector('.submit-btn');
+const firstParagraph = document.querySelector('p');
+```
+
+## Step 2: Changing Elements (The Transformation)
+
+Once you have grabbed the element and stored it in a variable, you can change it!
+
+### Changing Text
+
+```javascript
+const heading = document.querySelector('h1');
+heading.innerText = "Hello CodeHarborHub!"; // Changes the text
+```
+
+### Changing Style
+
+```javascript
+const box = document.querySelector('.box');
+box.style.backgroundColor = "blue"; // Changes the CSS
+box.style.borderRadius = "50%";
+```
+
+### Adding/Removing Classes
+
+Instead of changing styles one by one, professionals usually just swap classes.
+
+```javascript
+const card = document.querySelector('.card');
+card.classList.add('active');    // Adds the .active CSS class
+card.classList.remove('hidden'); // Removes the .hidden CSS class
+```
+
+## Interactive Lab: The "Shape Shifter"
+
+In this CodePen, notice how JavaScript "grabs" the box and changes its properties when you edit the code.
+
+<CodePenEmbed
+title="JS DOM Manipulation Practice"
+penId="JoRYRKq"
+/>
+
+### Challenge Tasks:
+
+1. Find the line `box.style.backgroundColor = "red";` and change it to `green`.
+2. Use `box.innerText = "I have been hacked!";` to change the text inside.
+3. Try changing the `width` of the box to `300px` using `.style.width`.
+
+## The "Workflow" Secret
+
+Every time you want to make a change on a website, you follow these **3 Steps**:
+
+1. **SELECT:** `const element = document.querySelector(...)`
+2. **LISTEN:** (We will learn this in the next lesson!)
+3. **CHANGE:** `element.style.color = "blue"`
+
+## Summary Checklist
+
+* [x] I know that **DOM** stands for Document Object Model.
+* [x] I can find an element using `getElementById` or `querySelector`.
+* [x] I can change the text of an element using `.innerText`.
+* [x] I understand that I can edit CSS directly using `.style`.

absolute-beginners/frontend-beginner/javascript/events.mdx

@@ -0,0 +1,97 @@
+---
+sidebar_position: 6
+title: "Events: Making Your Site React"
+sidebar_label: Events
+description: "Learn how to listen for user actions like clicks, keypresses, and scrolls."
+---
+
+If **DOM Manipulation** is the ability to change the page, then **Events** are the "Triggers" that tell JavaScript *when* to make those changes. 
+
+An Event is simply a signal that something has happened. Your job as a developer is to "Listen" for those signals.
+
+## The Event Listener (The Watchman)
+
+To react to an event, we use a special method called `addEventListener`. Think of it as hiring a 24/7 watchman for a specific button. You tell the watchman: *"Watch this button. **If** it gets clicked, **run** this function."*
+
+### The Syntax:
+
+```javascript
+const btn = document.querySelector('#myButton');
+
+// element.addEventListener('event_type', function_to_run);
+btn.addEventListener('click', function() {
+  alert("Button was clicked! 🎉");
+});
+```
+
+## Common Types of Events
+
+There are hundreds of events, but you will use these "Big Four" almost every day:
+
+### 1. Click (`click`)
+
+Triggered when the user clicks (or taps) an element.
+
+* **Use for:** Submitting forms, opening menus, or liking a post.
+
+### 2. Input (`input`)
+
+Triggered every time a user types a single character into an input box.
+
+* **Use for:** Real-time search or checking password strength.
+
+### 3. Mouse Over (`mouseover`)
+
+Triggered when the mouse pointer enters the area of an element.
+
+* **Use for:** Showing tooltips or changing image highlights.
+
+### 4. Submit (`submit`)
+
+Triggered when a user sends a form.
+
+* **Important:** We usually use `event.preventDefault()` here so the page doesn't refresh!
+
+## Interactive Lab: The Event Dashboard
+
+Open this CodePen and move your mouse around. Notice how the "Event Log" updates instantly based on what you are doing!
+
+<CodePenEmbed
+title="JS Event Listeners Practice"
+penId="gbwawWg"
+/>
+
+### Challenge Tasks:
+
+1. Find the `mouseover` event in the JS tab and change the color to `orange`.
+2. Add a new listener for `dblclick` (double click) that changes the text to "Double Magic!".
+3. Create an input box and use the `keyup` event to display whatever the user types onto the screen.
+
+## The Event Object (`e`)
+
+When an event happens, JavaScript automatically sends a "Package" of information to your function. We usually call this package `e` or `event`.
+
+It contains useful data, like which key was pressed or exactly where the mouse was clicked.
+
+```javascript
+const myInput = document.querySelector('input');
+
+myInput.addEventListener('keydown', function(e) {
+  console.log(`You just pressed the ${e.key} key!`);
+});
+```
+
+## The "Interactive" Formula
+
+To build any interactive feature on **CodeHarborHub**, just follow this formula:
+
+1. **Target:** Find the element (`querySelector`).
+2. **Listen:** Add the listener (`addEventListener`).
+3. **React:** Write the code to change the DOM inside the function.
+
+## Summary Checklist
+
+* [x] I know that an **Event** is a signal that something happened.
+* [x] I can use `addEventListener` to trigger code.
+* [x] I understand common events like `click`, `input`, and `mouseover`.
+* [x] I know how to use the event object (`e`) to get extra details.

absolute-beginners/frontend-beginner/javascript/functions.mdx

@@ -0,0 +1,93 @@
+---
+sidebar_position: 4
+title: "Functions: The Action Creators"
+sidebar_label: Functions
+description: "Learn how to write reusable blocks of code that perform specific tasks."
+---
+
+A **Function** is a reusable block of code designed to perform a specific task. Instead of writing the same 10 lines of code over and over again, you wrap them in a function and "call" it whenever you need it.
+
+## The "Cooking" Analogy
+
+Think of a function like a **Microwave**. 
+1. **The Input:** You put in a cold slice of pizza (Data).
+2. **The Process:** You press the "Start" button (The Function runs its code).
+3. **The Output:** You get back a hot slice of pizza (The Result).
+
+You don't need to know how the microwave works inside every time; you just need to know how to press the button!
+
+## How to Build a Function
+
+To create a function, you follow these steps:
+
+1. **Declare** it (Give it a name).
+2. **Define** the task (Write the code inside `{ }`).
+3. **Call** it (Tell it to run!).
+
+```javascript
+// 1. Defining the function
+function sayHello() {
+  console.log("Hello CodeHarborHub!");
+}
+
+// 2. Calling (running) the function
+sayHello();
+```
+
+## Inputs: Parameters & Arguments
+
+Sometimes, a function needs extra information to do its job. We call these **Parameters**.
+
+Imagine a greeting function. It’s boring if it only says "Hello." We want it to say hello to a *specific* person.
+
+```javascript
+// 'name' is a parameter (a placeholder)
+function greetUser(name) {
+  console.log(`Hello, ${name}! Welcome back.`);
+}
+
+// 'Ajay' is the argument (the actual data)
+greetUser("Ajay"); 
+greetUser("Vikas");
+```
+
+## Outputs: The `return` Keyword
+
+Most functions don't just "do" something; they "give back" a result. We use the `return` keyword for this. Once a function hits `return`, it stops and hands the value back to you.
+
+```javascript
+function addNumbers(a, b) {
+  return a + b;
+}
+
+let sum = addNumbers(5, 10); // sum now holds the value 15
+console.log(sum);
+```
+
+## Interactive Lab: The "Magic Math Machine"
+
+In this CodePen, try changing the numbers being passed into the function. Watch how the function processes the math and updates the screen!
+
+<CodePenEmbed
+title="JS Functions Practice"
+penId="Kwgdgao"
+/>
+
+### Challenge Tasks:
+
+1. Look for the `multiply` function in the JS tab.
+2. Create a new function called `subtract` that takes two numbers and returns the difference.
+3. Call your new function and log the result to the console.
+
+## Why Use Functions?
+
+* **Don't Repeat Yourself (DRY):** Write once, use a thousand times.
+* **Organization:** Break a big, scary project into small, manageable "tasks."
+* **Easy Testing:** If something breaks, you know exactly which "recipe" is wrong.
+
+## Summary Checklist
+
+* [x] I know that a function is a **reusable** block of code.
+* [x] I understand that **Parameters** are inputs and **Return** is the output.
+* [x] I can define a function using the `function` keyword.
+* [x] I can "call" a function to make it run.