diff --git a/absolute-beginners/frontend-beginner/javascript/dom-manipulation.mdx b/absolute-beginners/frontend-beginner/javascript/dom-manipulation.mdx index e69de29..270626c 100644 --- a/absolute-beginners/frontend-beginner/javascript/dom-manipulation.mdx +++ b/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 (`

`, `
`, `

`) 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. + + + +### 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`. \ No newline at end of file diff --git a/absolute-beginners/frontend-beginner/javascript/events.mdx b/absolute-beginners/frontend-beginner/javascript/events.mdx index e69de29..9da948f 100644 --- a/absolute-beginners/frontend-beginner/javascript/events.mdx +++ b/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! + + + +### 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. \ No newline at end of file diff --git a/absolute-beginners/frontend-beginner/javascript/functions.mdx b/absolute-beginners/frontend-beginner/javascript/functions.mdx index e69de29..c96386f 100644 --- a/absolute-beginners/frontend-beginner/javascript/functions.mdx +++ b/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! + + + +### 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. \ No newline at end of file diff --git a/absolute-beginners/frontend-beginner/javascript/js-challenge.mdx b/absolute-beginners/frontend-beginner/javascript/js-challenge.mdx index e69de29..f261164 100644 --- a/absolute-beginners/frontend-beginner/javascript/js-challenge.mdx +++ b/absolute-beginners/frontend-beginner/javascript/js-challenge.mdx @@ -0,0 +1,113 @@ +--- +sidebar_position: 7 +title: "Final Challenge: The Smart Task Master" +sidebar_label: JS Challenge +description: "Put it all together! Build a functional To-Do list app using JavaScript." +--- + +You’ve learned about **Variables** (to store data), **Functions** (to perform actions), the **DOM** (to change the page), and **Events** (to react to the user). + +Now, we combine them into one real-world project. + +## The Project Blueprint + +We are building a Task Manager. Here is how our "Brain" (JS) will handle the logic: + +1. **Variable:** Store the input text from the user. +2. **Event:** Listen for a "Click" on the Add button. +3. **Function:** Create a new `

  • ` element. +4. **DOM:** Inject that new element into the `
      ` list. + +## Step-by-Step Implementation + +### Step 1: The Structure (HTML) + +First, we need a place for users to type and a list to show the tasks. + +```html title="index.html" +
      +

      Task Master 📝

      +
      + + +
      +
        +
      +
      + +``` + +### Step 2: The "Brain" Setup (Variables) + +In your `script.js`, grab the elements you need to talk to. + +```javascript title="script.js" +const input = document.getElementById('taskInput'); +const btn = document.getElementById('addBtn'); +const list = document.getElementById('taskList'); +``` + +### Step 3: The Action (Function & Event) + +We need a function that runs whenever the button is clicked. + +```javascript title="script.js" +btn.addEventListener('click', function() { + // 1. Get the value from the input + const taskText = input.value; + + // 2. Check if the input is empty (Don't add empty tasks!) + if (taskText === "") { + alert("Please enter a task!"); + return; + } + + // 3. Create a new List Item (li) + const newTask = document.createElement('li'); + newTask.innerText = taskText; + + // 4. Add a "Delete" feature to the task + newTask.addEventListener('click', function() { + newTask.style.textDecoration = "line-through"; + newTask.style.opacity = "0.5"; + }); + + // 5. Append (Add) the task to our UL list + list.appendChild(newTask); + + // 6. Clear the input box for the next task + input.value = ""; +}); +``` + +## Interactive Demo + +Check out the completed version below. Try adding a few tasks and clicking them to "cross them off"! + + + +## Level Up: The "Pro" Challenges + +If you finished the basic version, try adding these features to earn your **CodeHarborHub Master Badge**: + +1. **Delete Button:** Add a "❌" button next to each task that removes the element entirely using `element.remove()`. +2. **Enter Key Support:** Make it so the user can press the "Enter" key on their keyboard to add a task, not just click the button. +3. **Task Counter:** Create a variable that counts how many tasks are on the list and displays "You have X tasks left." + +## Graduation Checklist + +* [x] I used `document.getElementById` to find my elements. +* [x] I used a `click` event listener. +* [x] I used `document.createElement` to generate new HTML. +* [x] I managed my app data using **Variables**. + +--- + +:::success 🎉 CONGRATULATIONS! +You have officially completed the **Frontend Beginner** path. You can now build, style, and power a website from scratch. + +**What's next?** The world of **React.js** or **Backend Development** awaits. Keep building, keep breaking things, and keep sailing with **CodeHarborHub**! +::: \ No newline at end of file