From 45865b4959afc9553e7cc89fb03e300d8c94d4df Mon Sep 17 00:00:00 2001 From: hardik-pratap-singh <21bcs090@iiitdmj.ac.in> Date: Mon, 8 Jul 2024 00:43:28 +0530 Subject: [PATCH] week 3 --- .../DOM_diffing_techniques/DFS.js | 2 + .../DOM_diffing_techniques/index.html | 23 ++++ .../c4gt_testing_code/inject_svg/ver3.js | 4 +- .../c4gt_testing_code/week3/index.html | 78 +++++++++++ .../c4gt_testing_code/week3/index.js | 98 ++++++++++++++ .../c4gt_testing_code/week3/info.svg | 1 + .../c4gt_testing_code/week3/wow.html | 125 ++++++++++++++++++ 7 files changed, 329 insertions(+), 2 deletions(-) create mode 100644 browser-extension/c4gt_testing_code/DOM_diffing_techniques/DFS.js create mode 100644 browser-extension/c4gt_testing_code/DOM_diffing_techniques/index.html create mode 100644 browser-extension/c4gt_testing_code/week3/index.html create mode 100644 browser-extension/c4gt_testing_code/week3/index.js create mode 100644 browser-extension/c4gt_testing_code/week3/info.svg create mode 100644 browser-extension/c4gt_testing_code/week3/wow.html diff --git a/browser-extension/c4gt_testing_code/DOM_diffing_techniques/DFS.js b/browser-extension/c4gt_testing_code/DOM_diffing_techniques/DFS.js new file mode 100644 index 00000000..98d40c5a --- /dev/null +++ b/browser-extension/c4gt_testing_code/DOM_diffing_techniques/DFS.js @@ -0,0 +1,2 @@ +let doc = document.querySelector("html") ; +console.log(doc.childNodes) \ No newline at end of file diff --git a/browser-extension/c4gt_testing_code/DOM_diffing_techniques/index.html b/browser-extension/c4gt_testing_code/DOM_diffing_techniques/index.html new file mode 100644 index 00000000..72b53ae8 --- /dev/null +++ b/browser-extension/c4gt_testing_code/DOM_diffing_techniques/index.html @@ -0,0 +1,23 @@ + + + + + + + DOM_DIFFING + + + +

Lorem, ipsum. crazy

+
+

+ Lorem crazy ipsum dolor sit amet mad consectetur adipisicing mad elit. Amet, quia. +

+
+

+ Lorem, crazt ipsum dolor. crazy +

+ + + + \ No newline at end of file diff --git a/browser-extension/c4gt_testing_code/inject_svg/ver3.js b/browser-extension/c4gt_testing_code/inject_svg/ver3.js index 12691c76..3295c246 100644 --- 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 new file mode 100644 index 00000000..5505b67a --- /dev/null +++ b/browser-extension/c4gt_testing_code/week3/index.html @@ -0,0 +1,78 @@ + + + + + + + Document + + + + + + + +
+ +
+ + +
+

+
+

+ 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. +

+ + + + + + + + \ No newline at end of file diff --git a/browser-extension/c4gt_testing_code/week3/index.js b/browser-extension/c4gt_testing_code/week3/index.js new file mode 100644 index 00000000..f112b527 --- /dev/null +++ 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}`); + + // 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 new file mode 100644 index 00000000..1196cac6 --- /dev/null +++ b/browser-extension/c4gt_testing_code/week3/info.svg @@ -0,0 +1 @@ + \ 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 new file mode 100644 index 00000000..b7209ed0 --- /dev/null +++ b/browser-extension/c4gt_testing_code/week3/wow.html @@ -0,0 +1,125 @@ + + + + + + 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. +

+ + + + +