From 40841b46fdb7337ab9ed6e30d615eaefbf773256 Mon Sep 17 00:00:00 2001 From: Yash Kumar Saini <115717039+yashksaini-coder@users.noreply.github.com> Date: Mon, 22 Jul 2024 00:09:09 +0530 Subject: [PATCH 01/88] Add Empty Task list for Day-10 Actvities list will be released at 7:00 AM (GMT+5.30Hrs) --- Day10/Task.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 Day10/Task.md diff --git a/Day10/Task.md b/Day10/Task.md new file mode 100644 index 0000000..e69de29 From 066966f81ab3204dbb26954784c2f3ef2639bb22 Mon Sep 17 00:00:00 2001 From: Yash Kumar Saini <115717039+yashksaini-coder@users.noreply.github.com> Date: Mon, 22 Jul 2024 23:17:48 +0530 Subject: [PATCH 02/88] Add Updated Activities Task list for Day-10 --- Day10/Task.md | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/Day10/Task.md b/Day10/Task.md index e69de29..f6db2fc 100644 --- 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 🖱️ + +- [ ] **Task 1:** Add a click event listener to a button that changes the text content of a paragraph. +- [ ] **Task 2:** Add a double-click event listener to an image that toggles its visibility. + +### Activity 2: Mouse Events 🐭 + +- [ ] **Task 3:** Add a mouseover event listener to an element that changes its background color. +- [ ] **Task 4:** Add a mouseout event listener to an element that resets its background color. + +### Activity 3: Keyboard Events 🎹 + +- [ ] **Task 5:** Add a keydown event listener to an input field that logs the key pressed to the console. +- [ ] **Task 6:** Add a keyup event listener to an input field that displays the current value in a paragraph. + +### Activity 4: Form Events 📝 + +- [ ] **Task 7:** Add a submit event listener to a form that prevents the default submission and logs the form data to the console. +- [ ] **Task 8:** Add a change event listener to a select dropdown that displays the selected value in a paragraph. + +### Activity 5: Event Delegation 📋 + +- [ ] **Task 9:** Add a click event listener to a list that logs the text content of the clicked list item using event delegation. +- [ ] **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! 💻✨ \ No newline at end of file From 9737561892164e8af478f8162d5dae4cd4ae6de6 Mon Sep 17 00:00:00 2001 From: Yash Kumar Saini <115717039+yashksaini-coder@users.noreply.github.com> Date: Mon, 22 Jul 2024 23:20:09 +0530 Subject: [PATCH 03/88] Activity-1 completed for Day-10 --- Day10/Activity-1.html | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 Day10/Activity-1.html diff --git a/Day10/Activity-1.html b/Day10/Activity-1.html new file mode 100644 index 0000000..0c84a65 --- /dev/null +++ b/Day10/Activity-1.html @@ -0,0 +1,17 @@ + + + + + + Activity-1 + + +

The Button is not clicked

+ + + + \ No newline at end of file From 9b793bd6f2813c049640477371029feb83bcb245 Mon Sep 17 00:00:00 2001 From: Yash Kumar Saini <115717039+yashksaini-coder@users.noreply.github.com> Date: Mon, 22 Jul 2024 23:23:46 +0530 Subject: [PATCH 04/88] Activity-1 completed for Day-10 --- Day10/Activity-1.html | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 Day10/Activity-1.html diff --git a/Day10/Activity-1.html b/Day10/Activity-1.html new file mode 100644 index 0000000..dfa9fa6 --- /dev/null +++ b/Day10/Activity-1.html @@ -0,0 +1,22 @@ + + + + + + Activity-1 + + + +

The Button is not clicked

+ +
+
+ + Google Logo + + + \ No newline at end of file From aa2bf668437ca334f3efa0ee37faa62890013082 Mon Sep 17 00:00:00 2001 From: Yash Kumar Saini <115717039+yashksaini-coder@users.noreply.github.com> Date: Mon, 22 Jul 2024 23:31:11 +0530 Subject: [PATCH 05/88] Activity-2 completed for Day-10 --- Day10/Activity-2.html | 61 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 Day10/Activity-2.html diff --git a/Day10/Activity-2.html b/Day10/Activity-2.html new file mode 100644 index 0000000..83c8d77 --- /dev/null +++ b/Day10/Activity-2.html @@ -0,0 +1,61 @@ + + + + + + Activity-2 + + + +
+ +
+

Hover over me!

+
+ +
+ + +
+

Hover over me!

+
+
+ + + \ No newline at end of file From 9518da81e4c09e1ce05d391abd4dbe46ec343218 Mon Sep 17 00:00:00 2001 From: Yash Kumar Saini <115717039+yashksaini-coder@users.noreply.github.com> Date: Mon, 22 Jul 2024 23:40:06 +0530 Subject: [PATCH 06/88] Activity-3 completed for Day-10 --- Day10/Activity-3.html | 59 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 Day10/Activity-3.html diff --git a/Day10/Activity-3.html b/Day10/Activity-3.html new file mode 100644 index 0000000..47dc6ba --- /dev/null +++ b/Day10/Activity-3.html @@ -0,0 +1,59 @@ + + + + + + Activity-3 + + + + +

Here is the input field


+
+

You pressed this key


+


+ + +

Here is the input field


+
+

You pressed this key


+

+ + + \ No newline at end of file From 52205a963701758fd9451eb2a1d61e2e6be8e190 Mon Sep 17 00:00:00 2001 From: Yash Kumar Saini <115717039+yashksaini-coder@users.noreply.github.com> Date: Mon, 22 Jul 2024 23:44:53 +0530 Subject: [PATCH 07/88] Activity-4 completed for Day-10 --- Day10/Activity-4.html | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 Day10/Activity-4.html diff --git a/Day10/Activity-4.html b/Day10/Activity-4.html new file mode 100644 index 0000000..298011e --- /dev/null +++ b/Day10/Activity-4.html @@ -0,0 +1,42 @@ + + + + + + Document + + + + + +
+
+
+ +
+
+
+ + +

The value is:

+ + + + \ No newline at end of file From fe08828d365cf7eac6e73a9583a7f1081dd4d68c Mon Sep 17 00:00:00 2001 From: Yash Kumar Saini <115717039+yashksaini-coder@users.noreply.github.com> Date: Mon, 22 Jul 2024 23:57:03 +0530 Subject: [PATCH 08/88] Activity-5 completed for Day-10 --- Day10/Activity-5.html | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 Day10/Activity-5.html diff --git a/Day10/Activity-5.html b/Day10/Activity-5.html new file mode 100644 index 0000000..7a01191 --- /dev/null +++ b/Day10/Activity-5.html @@ -0,0 +1,36 @@ + + + + + + Activity-5 + + + + + + +
    +
  1. Item 1
    2. +
  2. Item 2
    3. +
  3. Item 3
    4. +
+ + + + \ No newline at end of file From ae5ed696866262cf3cadc0d0afc21d9abdd3fa21 Mon Sep 17 00:00:00 2001 From: Yash Kumar Saini <115717039+yashksaini-coder@users.noreply.github.com> Date: Mon, 22 Jul 2024 23:57:35 +0530 Subject: [PATCH 09/88] All Activities completed for Day-10 --- Day10/Activity-4.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Day10/Activity-4.html b/Day10/Activity-4.html index 298011e..23ab218 100644 --- a/Day10/Activity-4.html +++ b/Day10/Activity-4.html @@ -3,7 +3,7 @@ - Document + Activity-4 + + +

User Information Form

+
+ + + + + +
+ +

Saved User Data

+
+ + + + diff --git a/Day20/Activity-2/script.js b/Day20/Activity-2/script.js new file mode 100644 index 0000000..610a456 --- /dev/null +++ b/Day20/Activity-2/script.js @@ -0,0 +1,44 @@ +// Task 3: Create a simple form that saves user input (e.g., name and email) to localStorage when submitted. Retrieve and display the saved data on page load. + +document.addEventListener('DOMContentLoaded', () => { + function displaySavedData() { + const savedData = JSON.parse(localStorage.getItem('userData')); + const savedDataDiv = document.getElementById('savedData'); + if (savedData) { + savedDataDiv.innerHTML = `

Name: ${savedData.name}

Email: ${savedData.email}

`; + } else { + savedDataDiv.innerHTML = '

No data saved.

'; + } + } + + displaySavedData(); + + document.getElementById('userForm').addEventListener('submit', (event) => { + event.preventDefault(); + + const name = document.getElementById('name').value; + const email = document.getElementById('email').value; + + const userData = { name, email }; + localStorage.setItem('userData', JSON.stringify(userData)); + + displaySavedData(); + }); +// Task 4: Write a script to remove an item from localStorage. Log the localStorage content before and after removal. + + function removeItemFromLocalStorage(key) { + console.log('Before removal:'); + console.log(localStorage.getItem(key)); + + localStorage.removeItem(key); + + console.log('After removal:'); + console.log(localStorage.getItem(key)); + } + + document.getElementById('removeButton').addEventListener('click', () => { + removeItemFromLocalStorage('userData'); + displaySavedData(); // Update the displayed data after removal + }); +}); + From 8d350215ed08b4eb74982a45386b68ae4df15691 Mon Sep 17 00:00:00 2001 From: Yash Kumar Saini <115717039+yashksaini-coder@users.noreply.github.com> Date: Fri, 16 Aug 2024 15:03:54 +0530 Subject: [PATCH 87/88] Chore: Created Activity-2 files seperately in Day-20/ folder --- Day20/Activity-2/index.html | 12 ++++++++++++ Day20/Activity-2/script.js | 21 +++++++++++---------- 2 files changed, 23 insertions(+), 10 deletions(-) diff --git a/Day20/Activity-2/index.html b/Day20/Activity-2/index.html index ad7ce81..ca8018a 100644 --- a/Day20/Activity-2/index.html +++ b/Day20/Activity-2/index.html @@ -68,6 +68,16 @@ width: 300px; text-align: center; } + #removeData { + background-color: #ff0000; + color: #fff; + border: none; + padding: 10px 15px 20px 15px; + border-radius: 4px; + cursor: pointer; + width: 300px; + font-size: 16px; + } @@ -82,6 +92,8 @@

User Information Form

Saved User Data

+
+ diff --git a/Day20/Activity-2/script.js b/Day20/Activity-2/script.js index 610a456..43043ab 100644 --- a/Day20/Activity-2/script.js +++ b/Day20/Activity-2/script.js @@ -11,19 +11,20 @@ document.addEventListener('DOMContentLoaded', () => { } } - displaySavedData(); +displaySavedData(); - document.getElementById('userForm').addEventListener('submit', (event) => { - event.preventDefault(); +document.getElementById('userForm').addEventListener('submit', (event) => { + event.preventDefault(); - const name = document.getElementById('name').value; - const email = document.getElementById('email').value; + const name = document.getElementById('name').value; + const email = document.getElementById('email').value; - const userData = { name, email }; - localStorage.setItem('userData', JSON.stringify(userData)); + const userData = { name, email }; + localStorage.setItem('userData', JSON.stringify(userData)); + + displaySavedData(); +}); - displaySavedData(); - }); // Task 4: Write a script to remove an item from localStorage. Log the localStorage content before and after removal. function removeItemFromLocalStorage(key) { @@ -36,7 +37,7 @@ document.addEventListener('DOMContentLoaded', () => { console.log(localStorage.getItem(key)); } - document.getElementById('removeButton').addEventListener('click', () => { + document.getElementById('removeData').addEventListener('click', () => { removeItemFromLocalStorage('userData'); displaySavedData(); // Update the displayed data after removal }); From 3fbc0796198889fdb62dc468f59727f8b878009c Mon Sep 17 00:00:00 2001 From: Yash Kumar Saini <115717039+yashksaini-coder@users.noreply.github.com> Date: Fri, 16 Aug 2024 15:04:40 +0530 Subject: [PATCH 88/88] Chore: Activity-2 completed for Day-20 --- Day20/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/Day20/index.js b/Day20/index.js index 1911e3b..5321b03 100644 --- a/Day20/index.js +++ b/Day20/index.js @@ -21,13 +21,15 @@ const myObject = { }; localStorage.setItem('myObjectKey', JSON.stringify(myObject)); const retrievedObject = JSON.parse(localStorage.getItem('myObjectKey')); -console.log(retrievedObject); // Output: { name: 'Yash', age: 24, profession: 'Software Engineer' } +console.log(retrievedObject); console.log("-------------------------------------------------"); console.log("Activity 2: "); - +// Task 3: Create a simple form that saves user input (e.g., name and email) to localStorage when submitted. Retrieve and display the saved data on page load. +// Task 4: Write a script to remove an item from localStorage. Log the localStorage content before and after removal. +console.log("\nTask Completed!"); console.log("-------------------------------------------------"); console.log("Activity 3: ");