yashksaini-coder · yashksaini-coder · Aug 16, 2024 · Jul 21, 2024 · Jul 21, 2024 · Jul 22, 2024
diff --git a/Day1/Task.md → Day01/Task.md b/Day1/Task.md → Day01/Task.md
diff --git a/Day1/index.js → Day01/index.js b/Day1/index.js → Day01/index.js
diff --git a/Day2/Task.md → Day02/Task.md b/Day2/Task.md → Day02/Task.md
diff --git a/Day2/index.js → Day02/index.js b/Day2/index.js → Day02/index.js
diff --git a/Day3/Task.md → Day03/Task.md b/Day3/Task.md → Day03/Task.md
diff --git a/Day3/index.js → Day03/index.js b/Day3/index.js → Day03/index.js
diff --git a/Day4/Task.md → Day04/Task.md b/Day4/Task.md → Day04/Task.md
diff --git a/Day4/index.js → Day04/index.js b/Day4/index.js → Day04/index.js
diff --git a/Day5/Task.md → Day05/Task.md b/Day5/Task.md → Day05/Task.md
diff --git a/Day5/index.js → Day05/index.js b/Day5/index.js → Day05/index.js
diff --git a/Day6/Task.md → Day06/Task.md b/Day6/Task.md → Day06/Task.md
diff --git a/Day6/index.js → Day06/index.js b/Day6/index.js → Day06/index.js
diff --git a/Day7/Task.md → Day07/Task.md b/Day7/Task.md → Day07/Task.md
diff --git a/Day7/index.js → Day07/index.js b/Day7/index.js → Day07/index.js
diff --git a/Day8/Task.md → Day08/Task.md b/Day8/Task.md → Day08/Task.md
diff --git a/Day8/index.js → Day08/index.js b/Day8/index.js → Day08/index.js
diff --git a/Day9/Activity-1.html → Day09/Activity-1.html b/Day9/Activity-1.html → Day09/Activity-1.html
diff --git a/Day9/Activity-2.html → Day09/Activity-2.html b/Day9/Activity-2.html → Day09/Activity-2.html
diff --git a/Day9/Activity-3.html → Day09/Activity-3.html b/Day9/Activity-3.html → Day09/Activity-3.html
diff --git a/Day9/Activity-4.html → Day09/Activity-4.html b/Day9/Activity-4.html → Day09/Activity-4.html
diff --git a/Day9/Activity-5.html → Day09/Activity-5.html b/Day9/Activity-5.html → Day09/Activity-5.html
diff --git a/Day9/Task.md → Day09/Task.md b/Day9/Task.md → Day09/Task.md
diff --git a/Day9/rose.jpeg → Day09/rose.jpeg b/Day9/rose.jpeg → Day09/rose.jpeg
diff --git a/Day10/Activity-1.html b/Day10/Activity-1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Activity-1</title>
+</head>
+<body>
+    <!-- Add a click event listener to a button that changes the text content of a paragraph. -->
+    <p>The Button is not clicked</p>
+    <button onclick="clicked()">Click Me!</button>
+    <br>
+    <br>
+    <!-- Add a double-click event listener to an image that toggles its visibility. -->
+    <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Logo" ondblclick="this.style.display = 'none'">
+    <script>
+        function clicked() {
+            document.querySelector('p').innerHTML = "The Button is clicked";
+        }
+    </script>
+</body>
+</html>
diff --git a/Day10/Activity-2.html b/Day10/Activity-2.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Activity-2</title>
+</head>
+<body>
+    <style>
+        .container{
+            padding: 15px;
+            border: 10px solid black;
+            color: red;
+            display: inline-flex;
+            gap: 20px;
+            justify-items: center;
+            align-items: center;
+        }
+        .box {
+            width: 200px;
+            height: 200px;
+            border: 5px solid black;
+            background-color: lightblue;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .box2{
+            width: 200px;
+            height: 200px;
+            border: 5px solid black;
+            background-color: rgb(138, 181, 28);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    </style>
+    <div class="container">
+        <!-- Add a mouseover event listener to an element that changes its background color. -->
+        <div class="box">
+            <p>Hover over me!</p>
+        </div>
+
+        <br>
+
+        <!-- Add a mouseout event listener to an element that resets its background color. -->
+        <div class="box2">
+            <p>Hover over me!</p>
+        </div>
+    </div>
+    <script>
+        document.querySelector('.box').addEventListener('mouseover', function() {
+            this.style.backgroundColor = 'lightgreen';
+        });
+
+        document.querySelector('.box2').addEventListener('mouseout', function() {
+            this.style.backgroundColor = 'white';
+        });
+    </script>
+</body>
+</html>
diff --git a/Day10/Activity-3.html b/Day10/Activity-3.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Activity-3</title>
+</head>
+<body>
+    <style>
+        .box {
+            width: 80px;
+            height: 50px;
+            left: 15%;
+            right: 15%;
+            text-size-adjust: 20px;
+            position: relative;
+            border: 5px solid black;
+            background-color: lightblue;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .box2 {
+            width: 80px;
+            height: 50px;
+            left: 15%;
+            right: 15%;
+            text-size-adjust: 20px;
+            position: relative;
+            border: 5px solid black;
+            background-color: rgb(17, 20, 227);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    </style>
+    <!-- Add a keydown event listener to an input field that logs the key pressed to the console. -->
+    <h1>Here is the input field</h1><br>
+    <input type="text" onkeydown="console.log(event.key)"><br>
+    <h1>You pressed this key</h1><br>
+    <p class='box'></p><br>
+
+    <!-- Add a keyup event listener to an input field that displays the current value in a paragraph. -->
+    <h1>Here is the input field</h1><br>
+    <input type="text" onkeyup="console.log(event.key)"><br>
+    <h1>You pressed this key</h1><br>
+    <p class="box2"></p>
+    <script>
+        document.querySelector('input').addEventListener('keydown', function() {
+            document.querySelector('p').textContent = event.key;
+        });
+
+        document.querySelector('input').addEventListener('keyup', function() {
+            document.querySelector('.box2').textContent = event.target.value;
+        });
+    </script>
+</body>
+</html>
diff --git a/Day10/Activity-4.html b/Day10/Activity-4.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Activity-4</title>
+</head>
+<body>
+    <style>
+
+    </style>
+
+    <!-- Add a submit event listener to a form that prevents the default submission and logs the form data to the console. -->
+    <form action="" onsubmit="event.preventDefault(); console.log(event.target)">
+        <input type="text" name="name" id="name" placeholder="Name"><br>
+        <input type="text" name="email" id="email" placeholder="Email"><br>
+        <input type="submit" value="Submit">
+    </form>
+    <br>
+    <br>
+    <!-- Add a change event listener to a select dropdown that displays the selected value in a paragraph. -->
+    <select name="cars" id="cars" onchange="document.querySelector('p').textContent = event.target.value">
+        <option value="volvo">Volvo</option>
+        <option value="saab">Saab</option>
+        <option value="mercedes">Mercedes</option>
+        <option value="audi">Audi</option>
+    </select>
+    <p>The value is: <span id="selectedValue"></span></p>
+
+    <script>
+        document.querySelector('form').addEventListener('submit', function() {
+            event.preventDefault();
+            console.log(event.target);
+        });
+
+        document.querySelector('select').addEventListener('change', function() {
+            document.querySelector('p').textContent = event.target.value;
+        });
+
+    </script>
+</body>
+</html>
diff --git a/Day10/Activity-5.html b/Day10/Activity-5.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Activity-5</title>
+</head>
+<body>
+    <!-- Add a click event listener to a list that logs the text content of the clicked list item using event delegation. -->
+    <ul>
+        <li onclick="handleClick(event)">Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3</li>
+    </ul>
+
+    <!-- Add an event listener to a parent element that listens for events from dynamically added child elements. -->
+    <ol>
+        <li>Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3</li>
+    </ol>
+
+    <script>
+        document.querySelector('ul').addEventListener('click', function handleClick(event) {
+            console.log(event.target.textContent);
+        });
+
+        // Add an event listener to a parent element that listens for events from dynamically added child elements.
+        document.querySelector('ol').addEventListener('click', function handleClick(event) {
+            if (event.target.tagName === 'LI') {
+                console.log(event.target.textContent);
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/Day10/Task.md b/Day10/Task.md
@@ -0,0 +1,50 @@
+# Day 10: Event Handling 🎉
+
+Welcome to Day 10 of our JavaScript workshop! Today, we will dive into event handling, an essential skill for making web pages interactive and responsive to user actions. 🖱️💻
+
+## Learning Objectives 📚
+
+By the end of these activities, you will:
+- Add and handle basic events like click, double-click, mouseover, mouseout, keydown, and keyup.
+- Understand and handle form events.
+- Implement event delegation to manage events on dynamically added elements.
+- Make web pages interactive by responding to various user actions.
+
+## Activities 🛠️
+
+This workshop is divided into several activities:
+
+### Activity 1: Basic Event Handling 🖱️
+
+- [X] **Task 1:** Add a click event listener to a button that changes the text content of a paragraph.
+- [X] **Task 2:** Add a double-click event listener to an image that toggles its visibility.
+
+### Activity 2: Mouse Events 🐭
+
+- [X] **Task 3:** Add a mouseover event listener to an element that changes its background color.
+- [X] **Task 4:** Add a mouseout event listener to an element that resets its background color.
+
+### Activity 3: Keyboard Events 🎹
+
+- [X] **Task 5:** Add a keydown event listener to an input field that logs the key pressed to the console.
+- [X] **Task 6:** Add a keyup event listener to an input field that displays the current value in a paragraph.
+
+### Activity 4: Form Events 📝
+
+- [X] **Task 7:** Add a submit event listener to a form that prevents the default submission and logs the form data to the console.
+- [X] **Task 8:** Add a change event listener to a select dropdown that displays the selected value in a paragraph.
+
+### Activity 5: Event Delegation 📋
+
+- [X] **Task 9:** Add a click event listener to a list that logs the text content of the clicked list item using event delegation.
+- [X] **Task 10:** Add an event listener to a parent element that listens for events from dynamically added child elements.
+
+## Feature Requests (Optional) 🌟
+
+1. **Click Event Script:** Write a script that adds a click event listener to a button to change the text content of a paragraph.
+2. **Mouse Events Script:** Create a script that handles mouseover and mouseout events to change the background color of an element.
+3. **Keyboard Events Script:** Write a script that logs key presses and displays input field values using keydown and keyup event listeners.
+4. **Form Events Script:** Create a script that handles form submission and change events on a select dropdown.
+5. **Event Delegation Script:** Write a script that demonstrates event delegation by handling events on dynamically added child elements.
+
+Happy coding! 💻✨
diff --git a/Day11/Task.md b/Day11/Task.md
@@ -0,0 +1,51 @@
+# Day 11: Promises and Async/Await 🚀
+
+Welcome to Day 11 of our JavaScript workshop! Today, we will dive into handling asynchronous operations using Promises and Async/Await.
+
+## Tasks/Activities 📝
+
+### Activity 1: Understanding Promises
+
+- [X] **Task 1:** Create a promise that resolves with a message after a 2-second timeout and log the message to the console.
+- [X] **Task 2:** Create a promise that rejects with an error message after a 2-second timeout and handle the error using `.catch()`.
+
+### Activity 2: Chaining Promises
+
+- [X] **Task 3:** Create a sequence of promises that simulate fetching data from a server. Chain the promises to log messages in a specific order.
+
+### Activity 3: Using Async/Await
+
+- [X] **Task 4:** Write an async function that waits for a promise to resolve and then logs the resolved value.
+- [X] **Task 5:** Write an async function that handles a rejected promise using try-catch and logs the error message.
+
+### Activity 4: Fetching Data from an API
+
+- [X] **Task 6:** Use the `fetch` API to get data from a public API and log the response data to the console using promises.
+- [X] **Task 7:** Use the `fetch` API to get data from a public API and log the response data to the console using async/await.
+
+### Activity 5: Concurrent Promises
+
+- [X] **Task 8:** Use `Promise.all` to wait for multiple promises to resolve and then log all their values.
+- [X] **Task 9:** Use `Promise.race` to log the value of the first promise that resolves among multiple promises.
+
+## Feature Request 📋
+
+1. **Promise Creation Script:** Write a script that demonstrates creating and handling promises, including both resolved and rejected states.
+2. **Promise Chaining Script:** Create a script that chains multiple promises and logs messages in a specific sequence.
+3. **Async/Await Script:** Write a script that uses async/await to handle promises and includes error handling with try-catch.
+4. **API Fetch Script:** Create a script that fetches data from a public API using both promises and async/await, and logs the response data.
+5. **Concurrent Promises Script:** Write a script that uses `Promise.all` and `Promise.race` to handle multiple promises concurrently and logs the results.
+
+## Achievement 🎓
+
+By the end of these activities, students will:
+
+- ✅ Understand and create promises, including handling resolved and rejected states.
+- ✅ Chain multiple promises to perform sequential asynchronous operations.
+- ✅ Use async/await to handle asynchronous code more readably.
+- ✅ Fetch data from public APIs using both promises and async/await.
+- ✅ Manage multiple concurrent promises using `Promise.all` and `Promise.race`.
+
+---
+
+Happy Coding 🚀