tapascript · Pishon-P · Feb 18, 2025 · Feb 20, 2025 · Feb 23, 2025 · Feb 23, 2025
diff --git a/README.md b/README.md
@@ -50,3 +50,4 @@ I am an independent educator and open-source enthusiast who creates meaningful p
 - **`Day 17: Introduction to JavaScript DOM`** - [Watch Video](https://youtu.be/F4mVSaj6uls) || [Source Code](https://github.com/tapascript/40-days-of-javascript/blob/main/day-17/README.md)
 - **`Day 18: DOM Manipulations and Project`** - [Watch Video](https://www.youtube.com/watch?v=BoYgn_Mf0hA) || [Source Code](https://github.com/tapascript/40-days-of-javascript/blob/main/day-18/README.md)
 - **`Day 19: Master JavaScript Events Like a PRO`** - [Watch Video](https://youtu.be/ybgI5vVE668) || [Source Code](https://github.com/tapascript/40-days-of-javascript/blob/main/day-19/README.md)
+- **`Day 20: Advanced DOM Tips and Tricks`** - [Watch Video](https://youtu.be/aNhPav1DgTY) || [Source Code](https://github.com/tapascript/40-days-of-javascript/blob/main/day-20/README.md)
diff --git a/day-20/README.md b/day-20/README.md
@@ -0,0 +1,36 @@
+# Day 20 - 40 Days of JavaScript - Advanced DOM Tips and Tricks
+
+## **🎯 Goal of This Lesson**
+
+- ✅ Intro
+- ✅ Efficient DOM Travarsal
+- ✅ Template and Cloning
+- ✅ Document Fragment
+- ✅ Range
+- ✅ Shadow DOM
+- ✅ Advanced Class Manipulations
+- ✅ Handling Large-Scale Updates
+- ✅ Mutation Observer
+
+## 🫶 Support
+
+Your support means a lot.
+
+- Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You!
+- Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository.
+
+    > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐)
+
+### 🤝 Sponsor My Work
+
+I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**.
+
+## Video
+
+Here is the video for you to go through and learn:
+
+[![day-20](./banner.png)](https://youtu.be/aNhPav1DgTY "Video")
+
+## **👩‍💻 🧑‍💻 Assignment Tasks**
+
+Please find the task assignments in the [Task File](./task.md).
diff --git a/day-20/banner.png b/day-20/banner.png
diff --git a/day-20/index.html b/day-20/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DOM - Advanced</title>
+    <script defer src="./index.js"></script>
+</head>
+
+<body>
+    <h1>Day 20 - DOM Advanced Tips</h1>
+
+    <div class="card">
+        <div></div>
+        <div></div>
+    </div>
+
+    <template id="card-template">
+        <div class="card">
+            <h2 class="title"></h2>
+            <p class="desc"></p>
+        </div>
+    </template>
+
+    <ul id="list"></ul>
+
+    <p id="para">Hello <strong>world</strong> and universe!</p>
+
+    <div class="card">
+        <h2>Title</h2>
+        <p>Description here</p>
+    </div>
+
+    <div id="box"></div>
+
+    <button class="btn">Some Button</button>
+
+    <div id="watchMe">Hello</div>
+    <button onclick="changeDOM()">Change DOM</button>
+
+</body>
+
+</html>
diff --git a/day-20/index.js b/day-20/index.js
@@ -0,0 +1,121 @@
+console.log("Day 20 - DOM: Advanced Tips");
+
+// Efficient DOM traversal
+const parent = document.querySelector('.card');
+const firstChild = parent.firstElementChild;
+const next = firstChild.nextElementSibling;
+const lastChild = parent.lastElementChild;
+const parentOfElement = firstChild.parentElement;
+
+// Templates and Cloning
+const template = document.getElementById('card-template');
+const clone = template.content.cloneNode(true);
+clone.querySelector('.title').textContent = "DOM Advance Topic";
+clone.querySelector('.desc').textContent = "Hope you are learning something New";
+
+document.body.appendChild(clone);
+
+// Document Fragment and Range
+
+// Document Fragment
+// - Not part of the main DOM tree until you insert it
+// - Acts like a temp container
+// - Great for building chunks of DOM before adding them.
+
+const fragment = document.createDocumentFragment();
+
+for (let i = 0; i<=3; i++) {
+    const li = document.createElement('li');
+    li.textContent = `Item ${i}`;
+    fragment.appendChild(li);
+}
+
+document.getElementById("list").appendChild(fragment);
+
+// Range
+const p = document.getElementById('para');
+
+const range = document.createRange();
+
+range.setStart(p.firstChild, 6); // After "Hello "
+range.setEnd(p.childNodes[2], 4)
+
+const content = range.cloneContents();
+
+console.log(content);
+
+// Shadow DOM
+document.querySelector('.card').innerHTML
+
+// shadow host
+
+const shadowHost = document.querySelector('#box');
+const shadow = shadowHost.attachShadow({mode: 'open'});
+shadow.innerHTML = `<style>p { color: red; }</style><p>Hello Shadow!</p>`;
+
+// Advanced Class Manipulation
+
+const btn = document.querySelector('.btn');
+btn.classList.add('active');
+btn.classList.remove('disabled');
+btn.classList.toggle('visible');
+btn.classList.replace('error', 'success');
+
+// Handling Large-Scale DOM Updates
+
+function addItems(count) {
+    const frag = document.createDocumentFragment();
+    for (let i = 0; i < count; i++) {
+      const div = document.createElement('div');
+      div.textContent = `Item ${i}`;
+      frag.appendChild(div);
+    }
+    document.body.appendChild(frag);
+  }
+
+  addItems(10);
+
+  // Mutation Observer
+
+  // const observer = new MutationObserver(callback);
+  // observer.observe(targetNode, config);
+
+  const target = document.getElementById('watchMe');
+
+  const observer = new MutationObserver((mutationsList, observer) => {
+    for (const mutation of mutationsList) {
+        console.log(`Type of mutation: ${mutation.type}`);
+
+        if (mutation.type === 'childList') {
+            console.log('A child node was added or removed.');
+        }
+
+        if (mutation.type === 'attributes') {
+            console.log(`Attribute ${mutation.attributeName} was changed.`);
+        }
+
+        if (mutation.type === 'characterData') {
+            console.log(`Text content changed to: ${mutation.target.data}`);
+        }
+    }
+  });
+
+  const config = {
+    subtree: true,
+    characterData: true,
+    childList: true,
+    attributes: true,
+  }
+
+  observer.observe(target, config);
+
+  function changeDOM() {
+    target.textContent = "Goodbye!";
+    target.setAttribute("data-status", "Changed");
+  }
+
+
+
+
+
+
diff --git a/day-20/task.md b/day-20/task.md
@@ -0,0 +1,36 @@
+# Tasks
+
+Please complete the following tasks and post them on the tapaScript Discord under "40 Days of JavaScript".
+
+> **DO NOT USE AI to FIND ANSWERS**. If you are stuck, let's discuss it on DISCORD and learn. Also, please note that none of the answers need you to create any UI. Just focus on the logic building and print the output on the browser console.
+
+## 1. Traverse and Toggle Classes
+
+Build a navigation menu. On click of a list item:
+
+- Traverse up to parent `<ul>`
+- Remove .active class from all `<li>`
+- Add .active only to the clicked `<li>`
+
+## 2. Highlight Text Using Range
+
+Use the Range API to highlight a portion of a paragraph by wrapping it with a `<mark>` tag.
+
+## 3. Use DocumentFragment for Performance
+
+Insert 100 list items into the DOM using:
+
+- Plain DOM methods (one by one)
+- DocumentFragment (all at once)
+
+## 4. Build a “Smart Cloner”
+
+Create a UI with an element and a “Clone” button. Use cloneNode(true) and cloneNode(false) and show the difference visually.
+
+## 5. MutationObserver Watcher
+
+Create a div and use MutationObserver to log whenever:
+
+- A new child is added
+- The class attribute changes
+- Text is modified