diff --git a/browser-extension/c4gt_testing_code/week3/checkbox.js b/browser-extension/c4gt_testing_code/week3/checkbox.js new file mode 100644 index 00000000..9912d987 --- /dev/null +++ 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'; + }); + +} \ No newline at end of file diff --git a/browser-extension/c4gt_testing_code/week3/index.html b/browser-extension/c4gt_testing_code/week3/index.html index 5505b67a..10f263cb 100644 --- a/browser-extension/c4gt_testing_code/week3/index.html +++ b/browser-extension/c4gt_testing_code/week3/index.html @@ -10,33 +10,24 @@ - + -
-
- +
+ +
+ + +


@@ -70,9 +61,9 @@

- - - - + + + + \ No newline at end of file diff --git a/browser-extension/c4gt_testing_code/week3/ver2.js b/browser-extension/c4gt_testing_code/week3/ver2.js new file mode 100644 index 00000000..e48b6f47 --- /dev/null +++ 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}`); + + // 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("") \ No newline at end of file diff --git a/browser-extension/c4gt_testing_code/week3/wow.html b/browser-extension/c4gt_testing_code/week3/wow.html deleted file mode 100644 index b7209ed0..00000000 --- a/browser-extension/c4gt_testing_code/week3/wow.html +++ /dev/null @@ -1,125 +0,0 @@ - - - - - - Switch Example - - - - -
- - -
-
- - -
- -
-

- Lorem ipsum dolor sit amet consectetur crazy adipisicing elit. Quaerat alias iste quo exercitationem stupid - nesciunt ea? -

- -

- Lorem ipsum, dolor sit amet stupid mad adipisicing elit. Magni minima adipisci architecto. -

-
- -
- -
-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa possimus quisquam temporibus - reprehenderit nesciunt dignissimos sunt ipsum, nostrum modi? Iusto libero sed alias! -

- crazy -
-
-

- crazy -

-

- Lorem ipsum dolor crazy stupid sit stupid amet consectetur adipisicing elit. Aut architecto illum dolorum - mad. -

- - - - -