week 3

tattle-made · Jul 7, 2024 · 45865b4 · 45865b4
1 parent 01abf32
commit 45865b4
Show file tree

Hide file tree

Showing 7 changed files with 329 additions and 2 deletions.
diff --git a/browser-extension/c4gt_testing_code/DOM_diffing_techniques/DFS.js b/browser-extension/c4gt_testing_code/DOM_diffing_techniques/DFS.js
@@ -0,0 +1,2 @@
+let doc = document.querySelector("html") ; 
+console.log(doc.childNodes)
diff --git a/browser-extension/c4gt_testing_code/DOM_diffing_techniques/index.html b/browser-extension/c4gt_testing_code/DOM_diffing_techniques/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DOM_DIFFING</title>
+</head>
+
+<body>
+    <h2>Lorem, ipsum. crazy</h2>
+    <div>
+        <p>
+            Lorem crazy ipsum dolor sit amet mad consectetur adipisicing mad elit. Amet, quia.
+        </p>
+    </div>
+    <p>
+        Lorem, crazt ipsum dolor. crazy
+    </p>
+    <script src="./DFS.js"></script>
+</body>
+
+</html>
diff --git a/browser-extension/c4gt_testing_code/inject_svg/ver3.js b/browser-extension/c4gt_testing_code/inject_svg/ver3.js
@@ -1,6 +1,6 @@
 const iconSrc = './info.svg';
 const iconAlt = 'Icon description'; 
-const targetWords = ['crazy', 'stupid', 'mad']; // Replace with your list of target words
+const targetWords = ['crazy', 'stupid']; // Replace with your list of target words
 
 document.querySelectorAll('*').forEach(element => {
     targetWords.forEach(targetWord => {
@@ -36,7 +36,7 @@ document.querySelectorAll('*').forEach(element => {
                     document.body.appendChild(popup);
                     // container.appendChild(popup);
 
-                    
+
                     // Remove popup when mouseout
                     icon.addEventListener('mouseout', () => {
                         popup.remove();

diff --git a/browser-extension/c4gt_testing_code/week3/index.html b/browser-extension/c4gt_testing_code/week3/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+        crossorigin="anonymous"></script>
+    <!-- <style>
+        /* Add some basic styling */
+        .form-check-label {
+            visibility: visible;
+            /* Make sure the label is visible by default */
+        }
+
+        .hidden {
+            visibility: hidden;
+            /* Class to hide the label */
+        }
+    </style> -->
+</head>
+
+<!-- <body onload = "fun()" > -->
+    <body >
+    <br>
+    <!-- <div class="form-check form-switch">
+        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
+        <label class="form-check-label" for="flexSwitchCheckDefault">Crazy</label>
+    </div> -->
+    <div class="form-check">
+        <input class="form-check-input" type="checkbox" value="off" id="flexCheckDefault">
+        <label class="form-check-label" for="flexCheckDefault">
+          Crazy
+        </label>
+      </div>
+    <br><br>
+    <div>
+        <p>
+            Lorem ipsum dolor sit amet consectetur crazy adipisicing elit. Quaerat alias iste quo exercitationem stupid
+            nesciunt ea?
+        </p>
+
+        <p>
+            Lorem ipsum, dolor sit amet stupid mad adipisicing elit. Magni minima adipisci architecto.
+        </p>
+    </div>
+
+    <div class="class">
+        <img src="" alt="">
+        <div>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa possimus quisquam temporibus
+                reprehenderit nesciunt dignissimos sunt ipsum, nostrum modi? Iusto libero sed alias!
+            </p>
+            <span>crazy</span>
+        </div>
+    </div>
+    <h3>
+        crazy
+    </h3>
+    <p>
+        Lorem ipsum dolor crazy stupid sit stupid amet consectetur adipisicing elit. Aut architecto illum dolorum
+        mad.
+    </p>
+
+    <button>
+        crazy
+    </button>
+    <!-- <script src="./ver1.js"></script> -->
+    <!-- <script src="./ver2.js"></script> -->
+    <script src="./index.js"></script>
+</body>
+
+</html>
diff --git a/browser-extension/c4gt_testing_code/week3/index.js b/browser-extension/c4gt_testing_code/week3/index.js
@@ -0,0 +1,98 @@
+const switchInput = document.getElementById('flexCheckDefault');
+const toRemove = ['crazy'] ; 
+
+switchInput.addEventListener('click' , (event)=>{
+    if(switchInput.value === "off"){
+        // console.log("hello world")
+        // fun() ; 
+        alert("hello")
+        switchInput.value = "on"
+
+    }
+    else{
+        // funRemove(); 
+        alert("hello world")
+        switchInput.value = "off" 
+
+    }
+})
+
+
+console.log(switchInput.value)
+
+if(switchInput.value == "off"){
+    fun() ; 
+}
+else{
+    alert("hello")
+    // funRemove(); 
+}
+// Add an event listener to detect changes
+// switchInput.addEventListener('change', (event) => {
+//     if (event.target.checked) {
+//         // fun() ; 
+//         // alert("hello world")
+//         console.log('Switch is ON');
+//         // funRemove(toRemove) ; 
+
+//     } else {
+
+//         console.log('Switch is OFF');
+//         // fun([]) ; 
+//     }
+// });
+
+// function funct(){
+//     alert("hello world")
+// }
+
+// window.addEventListener("load", (event) => {
+//     fun() ; 
+//   });
+function fun() {
+
+    const iconSrc = './info.svg';
+    const iconAlt = 'Icon description';
+    // const toRemove = ['crazy']
+    const targetWords = ['crazy', 'stupid', 'mad']; // Replace with your list of target words
+
+    // Find all elements that contain any of the target words
+    document.querySelectorAll('*').forEach(element => {
+        targetWords.forEach(targetWord => {
+
+            // if(toRemove.includes(targetWord)){
+            //     // continue ; 
+            // }
+            if (element.innerHTML.includes(targetWord)) {
+                const className = `icon-container-${targetWord}`;
+                // Split the innerHTML into parts to handle replacements
+                const parts = element.innerHTML.split(targetWord);
+                const replacedHTML = parts.join(`${targetWord}<span class="${className}"></span>`);
+
+                // Update the element with the replaced content
+                element.innerHTML = replacedHTML;
+
+                // Add icon after each occurrence of the target word
+                const iconContainers = element.querySelectorAll(`.${className}`);
+                iconContainers.forEach(container => {
+                    const icon = document.createElement('img');
+                    icon.src = iconSrc;
+                    icon.alt = iconAlt;
+                    container.appendChild(icon);
+
+                });
+            }
+        });
+    });
+}
+
+function funRemove(){
+    let word = "crazy" ; 
+    // toRemove.forEach(targetWord => {
+        let allIcons = document.querySelector(`.icon-container-${targetWord}`) ; 
+        allIcons.forEach(icon => {
+            console.log(icon) ; 
+        })
+    // })
+
+}
diff --git a/browser-extension/c4gt_testing_code/week3/info.svg b/browser-extension/c4gt_testing_code/week3/info.svg
diff --git a/browser-extension/c4gt_testing_code/week3/wow.html b/browser-extension/c4gt_testing_code/week3/wow.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Switch Example</title>
+    <style>
+        .form-check-label {
+            visibility: visible;
+        }
+
+        .hidden {
+            visibility: hidden;
+        }
+    </style>
+</head>
+<body>
+
+    <div>
+        <label for="toggleCrazy">Toggle Crazy</label>
+        <input type="checkbox" id="toggleCrazy">
+    </div>
+    <div class="form-check form-switch">
+        <input class="form-check-input" type="checkbox" role="switch" id="flexCheckDefault">
+        <label class="form-check-label" for="flexCheckDefault">Toggle Slurs</label>
+    </div>
+
+    <div>
+        <p>
+            Lorem ipsum dolor sit amet consectetur crazy adipisicing elit. Quaerat alias iste quo exercitationem stupid
+            nesciunt ea?
+        </p>
+
+        <p>
+            Lorem ipsum, dolor sit amet stupid mad adipisicing elit. Magni minima adipisci architecto.
+        </p>
+    </div>
+
+    <div class="class">
+        <img src="" alt="">
+        <div>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa possimus quisquam temporibus
+                reprehenderit nesciunt dignissimos sunt ipsum, nostrum modi? Iusto libero sed alias!
+            </p>
+            <span>crazy</span>
+        </div>
+    </div>
+    <h3>
+        crazy
+    </h3>
+    <p>
+        Lorem ipsum dolor crazy stupid sit stupid amet consectetur adipisicing elit. Aut architecto illum dolorum
+        mad.
+    </p>
+
+    <button>
+        crazy
+    </button>
+    <script>
+        const iconSrc = './info.svg';
+        const iconAlt = 'Icon description';
+        const targetWords = ['crazy', 'stupid', 'mad'];
+        let excludeCrazy = false;
+
+        // Toggle button for "crazy"
+        const toggleCrazyInput = document.getElementById('toggleCrazy');
+        toggleCrazyInput.addEventListener('change', (event) => {
+            excludeCrazy = event.target.checked;
+            updateIcons();
+        });
+
+        // Checkbox for toggling icons
+        const switchInput = document.getElementById('flexCheckDefault');
+        switchInput.addEventListener('change', (event) => {
+            if (event.target.checked) {
+                updateIcons();
+            } else {
+                removeIcons();
+            }
+        });
+
+        function updateIcons() {
+            const currentTargetWords = excludeCrazy ? targetWords.filter(word => word !== 'crazy') : targetWords;
+
+            document.querySelectorAll('*').forEach(element => {
+                currentTargetWords.forEach(targetWord => {
+                    if (element.innerHTML.includes(targetWord)) {
+                        const className = `icon-container-${targetWord}`;
+                        // Remove existing icons
+                        removeExistingIcons(element, className);
+                        // Split the innerHTML into parts to handle replacements
+                        const parts = element.innerHTML.split(targetWord);
+                        const replacedHTML = parts.join(`${targetWord}<span class="${className}"></span>`);
+                        // Update the element with the replaced content
+                        element.innerHTML = replacedHTML;
+                        // Add icon after each occurrence of the target word
+                        const iconContainers = element.querySelectorAll(`.${className}`);
+                        iconContainers.forEach(container => {
+                            const icon = document.createElement('img');
+                            icon.src = iconSrc;
+                            icon.alt = iconAlt;
+                            container.appendChild(icon);
+                        });
+                    }
+                });
+            });
+        }
+
+        function removeIcons() {
+            targetWords.forEach(targetWord => {
+                document.querySelectorAll(`.icon-container-${targetWord}`).forEach(container => {
+                    container.remove();
+                });
+            });
+        }
+
+        function removeExistingIcons(element, className) {
+            element.querySelectorAll(`.${className}`).forEach(container => {
+                container.remove();
+            });
+        }
+    </script>
+</body>
+</html>