hiding slurs through checkbox

tattle-made · Jul 8, 2024 · 65814e4 · 65814e4
1 parent 45865b4
commit 65814e4
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 147 deletions.
diff --git a/browser-extension/c4gt_testing_code/week3/checkbox.js b/browser-extension/c4gt_testing_code/week3/checkbox.js
@@ -0,0 +1,54 @@
+console.log("here")
+let crazyCheckbox = document.getElementById('flexCheckCrazy');
+let stupidCheckbox = document.getElementById('flexCheckStupid');
+
+crazyCheckbox.addEventListener('change', function () {
+    if (crazyCheckbox.checked) {
+        funRemoveCrazy();
+    } else {
+        funAddCrazy();
+    }
+});
+
+stupidCheckbox.addEventListener('change', function () {
+    if (stupidCheckbox.checked) {
+        funRemoveStupid();
+    } else {
+        funAddStupid();
+    }
+});
+
+function funRemoveCrazy() {
+    let className = "icon-container-crazy";
+    let allCrazy = Array.from(document.querySelectorAll(`.${className}`))
+    allCrazy.forEach(element => {
+        element.style.display = 'none';
+    });
+}
+
+function funAddCrazy(){
+    let className = "icon-container-crazy";
+    let allCrazy = Array.from(document.querySelectorAll(`.${className}`))
+    console.log(allCrazy) ;
+    allCrazy.forEach(element => {
+        element.style.display = 'inline';
+    });
+
+}
+
+function funRemoveStupid() {
+    let className = "icon-container-stupid";
+    let allStupid = Array.from(document.querySelectorAll(`.${className}`))
+    allStupid.forEach(element => {
+        element.style.display = 'none';
+    });
+}
+
+function funAddStupid(){
+    let className = "icon-container-stupid";
+    let allStupid = Array.from(document.querySelectorAll(`.${className}`))
+    allStupid.forEach(element => {
+        element.style.display = 'inline';
+    });
+
+}
diff --git a/browser-extension/c4gt_testing_code/week3/index.html b/browser-extension/c4gt_testing_code/week3/index.html
@@ -10,33 +10,24 @@
     <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">
+        <input class="form-check-input" type="checkbox" id="flexCheckCrazy">
         <label class="form-check-label" for="flexCheckDefault">
           Crazy
         </label>
       </div>
+
+      <div class="form-check">
+        <input class="form-check-input" type="checkbox" id="flexCheckStupid">
+        <label class="form-check-label" for="flexCheckDefault">
+          Stupid
+        </label>
+      </div>
     <br><br>
     <div>
         <p>
@@ -70,9 +61,9 @@ <h3>
     <button>
         crazy
     </button>
-    <!-- <script src="./ver1.js"></script> -->
-    <!-- <script src="./ver2.js"></script> -->
-    <script src="./index.js"></script>
-</body>
 
+    <script src="./ver2.js" defer></script>
+    <!-- Till this, DOM has been updated thoroughly -->
+    <script src="./checkbox.js" defer></script>
+</body>
 </html>
diff --git a/browser-extension/c4gt_testing_code/week3/ver2.js b/browser-extension/c4gt_testing_code/week3/ver2.js
@@ -0,0 +1,31 @@
+const iconSrc = './info.svg';
+const iconAlt = 'Icon description';
+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 (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);
+
+            });
+        }
+    });
+});
+
+
+// let checkbox = document.querySelector("")
diff --git a/browser-extension/c4gt_testing_code/week3/wow.html b/browser-extension/c4gt_testing_code/week3/wow.html