diff --git a/css/advanced/Assignment-1/index.html b/css/advanced/Assignment-1/index.html new file mode 100644 index 00000000..e69de29b diff --git a/css/advanced/Assignment-1/style.css b/css/advanced/Assignment-1/style.css new file mode 100644 index 00000000..3e7719f6 --- /dev/null +++ b/css/advanced/Assignment-1/style.css @@ -0,0 +1,69 @@ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + line-height: 1.6; +} + +header { + background: #0d0a99; + color: #fff; + padding: 20px; + text-align: center; +} + +nav ul { + list-style: none; + display: flex; + justify-content: center; + gap: 20px; + margin-top: 10px; +} + +nav a { + color: #fff; + text-decoration: none; +} + +main { + display: flex; + padding: 20px; + gap: 20px; +} + +article { + flex: 3; + background: #2c13a8; + color: #fff; + padding: 20px; + border-radius: 8px; +} + +aside { + flex: 1; + background: #4d119b; + color: #fff; + padding: 20px; + border-radius: 8px; +} + +footer { + background: #3f12ba; + color: #fff; + text-align: center; + padding: 15px; + margin-top: 20px; + bottom: auto; +} + +@media (max-width: 768px) { + main { + flex-direction: column; + flex:1; + } +} diff --git a/css/advanced/Assignment-2/animations.html b/css/advanced/Assignment-2/animations.html new file mode 100644 index 00000000..45bcfc50 --- /dev/null +++ b/css/advanced/Assignment-2/animations.html @@ -0,0 +1,60 @@ + + + + + + CSS Animation & Media Queries + + + +
Hello Guys..!
+ + diff --git a/javascript/7-dom-manipulation/Assignment-1/accessing_manipulating.html b/javascript/7-dom-manipulation/Assignment-1/accessing_manipulating.html new file mode 100644 index 00000000..b2b16f7a --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-1/accessing_manipulating.html @@ -0,0 +1,56 @@ + + + + + + DOM Manipulation - Assignment 1 + + + +

Assignment 1: Accessing and Manipulating Elements

+ + + + + + + + + + + + + + + + + +
idclassNametagnameattribute
+

Paragraph 1

+

Paragraph 2

+ + 		+

Class Element 1

+

Class Element 2

+

Class Element 3

+ + 		+ Tag Span 1
+ Tag Span 2
+ Tag Span 3
+ + 		+
+
+
+ + 		+

Custom Attribute 1

+

Custom Attribute 2

+ +
+
+ + + + diff --git a/javascript/7-dom-manipulation/Assignment-1/script.js b/javascript/7-dom-manipulation/Assignment-1/script.js new file mode 100644 index 00000000..05945220 --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-1/script.js @@ -0,0 +1,41 @@ + +function changeColorById() { + const ids = ["para1", "para2"]; + let output = ""; + ids.forEach(id => { + const el = document.getElementById(id); + const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16); + el.style.color = randomColor; + output += `Changed color of ${id} to ${randomColor}
`; + }); + printResult(output); +} +function toggleClassColor() { + const elements = document.getElementsByClassName("group"); + for (let el of elements) { + el.classList.toggle("highlight"); + } + printResult("Toggled background color of all elements with class 'group'"); +} +function changeSpanText() { + const spans = document.getElementsByTagName("span"); + for (let i = 0; i < spans.length; i++) { + spans[i].innerHTML = "Updated Span " + (i + 1); + } + printResult("Updated text content of all elements."); +} +function toggleDisable() { + const inputs = document.querySelectorAll("input[name]"); + inputs.forEach(input => { + input.disabled = !input.disabled; + }); + printResult("Toggled 'disabled' attribute for all input elements with name attribute."); +} +function addCustomAttribute() { + const element = document.querySelector("[data-info='custom1']"); + element.setAttribute("data-added", "newValue"); + printResult("Added new attribute: data-added='newValue' to element with data-info='custom1'"); +} +function printResult(message) { + document.getElementById("output").innerHTML = message; +} diff --git a/javascript/7-dom-manipulation/Assignment-1/style.css b/javascript/7-dom-manipulation/Assignment-1/style.css new file mode 100644 index 00000000..9ecf68fc --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-1/style.css @@ -0,0 +1,26 @@ +body { + font-family: Arial, sans-serif; + margin: 20px; +} + +table, th, td { + border: 1px solid black; + border-collapse: collapse; + padding: 10px; + text-align: center; +} + +h2 { + color: #2a5d84; +} + +.highlight { + background-color: lightblue; +} + +#output { + margin-top: 20px; + padding: 10px; + border: 1px dashed #555; + background-color: #f5f5f5; +} diff --git a/javascript/7-dom-manipulation/Assignment-10/moving_shadow_dom.html b/javascript/7-dom-manipulation/Assignment-10/moving_shadow_dom.html new file mode 100644 index 00000000..08d635db --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-10/moving_shadow_dom.html @@ -0,0 +1,22 @@ + + + + + Moving Shadow DOM Elements + + + +

Moving Table Rows inside Shadow DOM

+ +
+ +
+ + + + +
+ + + + diff --git a/javascript/7-dom-manipulation/Assignment-10/script.js b/javascript/7-dom-manipulation/Assignment-10/script.js new file mode 100644 index 00000000..c5568006 --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-10/script.js @@ -0,0 +1,90 @@ + +const shadowHost = document.getElementById("shadowHost"); +const shadowRoot = shadowHost.attachShadow({ mode: "open" }); +const shadowHTML = ` + + + + + + + + ${Array.from({ length: 10 }, (_, i) => ` + + + + + + `).join("")} + +
#ItemActions
${i + 1}Item ${i + 1} + + + + +
+`; + +shadowRoot.innerHTML = shadowHTML; + +const tbody = shadowRoot.querySelector("tbody"); +let selectedRow = null; +tbody.addEventListener("click", (e) => { + if (e.target.closest("tr")) { + if (selectedRow) selectedRow.classList.remove("selected"); + selectedRow = e.target.closest("tr"); + selectedRow.classList.add("selected"); + } +}); + +function moveUp(row) { + const prev = row.previousElementSibling; + if (prev) tbody.insertBefore(row, prev); +} + +function moveDown(row) { + const next = row.nextElementSibling; + if (next) tbody.insertBefore(next, row); +} + +function moveTop(row) { + tbody.insertBefore(row, tbody.firstElementChild); +} + +function moveBottom(row) { + tbody.appendChild(row); +} + +document.getElementById("upBtn").addEventListener("click", () => { + if (selectedRow) moveUp(selectedRow); +}); + +document.getElementById("downBtn").addEventListener("click", () => { + if (selectedRow) moveDown(selectedRow); +}); + +document.getElementById("topBtn").addEventListener("click", () => { + if (selectedRow) moveTop(selectedRow); +}); + +document.getElementById("bottomBtn").addEventListener("click", () => { + if (selectedRow) moveBottom(selectedRow); +}); diff --git a/javascript/7-dom-manipulation/Assignment-10/style.css b/javascript/7-dom-manipulation/Assignment-10/style.css new file mode 100644 index 00000000..8362d6f5 --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-10/style.css @@ -0,0 +1,29 @@ +body { + font-family: Arial, sans-serif; + text-align: center; + padding: 20px; +} + +.controls button { + margin: 5px; + padding: 8px 12px; + font-size: 14px; + cursor: pointer; +} + +table { + border-collapse: collapse; + width: 80%; + margin: 20px auto; + text-align: center; +} + +td, th { + border: 1px solid black; + padding: 8px; +} + +button { + margin: 2px; + padding: 4px 6px; +} diff --git a/javascript/7-dom-manipulation/Assignment-2/iframedom.html b/javascript/7-dom-manipulation/Assignment-2/iframedom.html new file mode 100644 index 00000000..e0928c80 --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-2/iframedom.html @@ -0,0 +1,24 @@ + + + + + + Assignment 2 – iFrame DOM Manipulation + + + +

Accessing and Manipulating iFrame Elements

+
+ + + + + +
+ + +
+ + + + diff --git a/javascript/7-dom-manipulation/Assignment-2/script.js b/javascript/7-dom-manipulation/Assignment-2/script.js new file mode 100644 index 00000000..9522b69e --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-2/script.js @@ -0,0 +1,94 @@ + +const innerHTMLContent = ` + + + + + + + + + + + + + + + + + +
IDClassNameTagNameAttribute
+

Paragraph 1

+

Paragraph 2

+ 		+

Group 1

+

Group 2

+ 		+ Tag Span 1 + Tag Span 2 + + + + +

Custom 1

+

Custom 2

+
+`; +window.onload = () => { + const iframe = document.getElementById("myFrame"); + const iframeDoc = iframe.contentDocument || iframe.contentWindow.document; + iframeDoc.open(); + iframeDoc.write(innerHTMLContent); + iframeDoc.close(); + document.getElementById("btnId").addEventListener("click", () => changeColorById(iframeDoc)); + document.getElementById("btnClass").addEventListener("click", () => toggleClassColor(iframeDoc)); + document.getElementById("btnTag").addEventListener("click", () => changeSpanText(iframeDoc)); + document.getElementById("btnName").addEventListener("click", () => toggleDisable(iframeDoc)); + document.getElementById("btnAttr").addEventListener("click", () => addCustomAttribute(iframeDoc)); +}; + +function changeColorById(doc) { + const ids = ["para1", "para2"]; + ids.forEach(id => { + const el = doc.getElementById(id); + const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16); + el.style.color = randomColor; + }); + printResult("Changed color of paragraphs inside iFrame."); +} +function toggleClassColor(doc) { + const elements = doc.getElementsByClassName("group"); + for (let el of elements) { + el.classList.toggle("highlight"); + } + printResult("Toggled background color of group paragraphs inside iFrame."); +} + +function changeSpanText(doc) { + const spans = doc.getElementsByTagName("span"); + for (let i = 0; i < spans.length; i++) { + spans[i].innerHTML = "Updated Span " + (i + 1); + } + printResult("Updated span text inside iFrame."); +} + +function toggleDisable(doc) { + const inputs = doc.querySelectorAll("input[name]"); + inputs.forEach(input => { + input.disabled = !input.disabled; + }); + printResult("Toggled input disable inside iFrame."); +} + +function addCustomAttribute(doc) { + const element = doc.querySelector("[data-info='custom1']"); + element.setAttribute("data-added", "newValue"); + printResult("Added new attribute inside iFrame."); +} + +function printResult(message) { + document.getElementById("output").innerHTML = message; +} diff --git a/javascript/7-dom-manipulation/Assignment-2/style.css b/javascript/7-dom-manipulation/Assignment-2/style.css new file mode 100644 index 00000000..7944f6d8 --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-2/style.css @@ -0,0 +1,20 @@ +body { + font-family: Arial, sans-serif; + margin: 20px; +} + +table, td { + border: 1px solid black; + border-collapse: collapse; + padding: 10px; +} + +.highlight { + background-color: lightblue; +} + +.output { + margin-top: 20px; + font-weight: bold; + color: darkgreen; +} diff --git a/javascript/7-dom-manipulation/Assignment-3/script.js b/javascript/7-dom-manipulation/Assignment-3/script.js new file mode 100644 index 00000000..ade77e1d --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-3/script.js @@ -0,0 +1,60 @@ + +const host = document.getElementById("shadow-host"); + +const shadow = host.attachShadow({ mode: "open" }); +const shadowContent = ` + + + + + + + + + + + + + + + + +
idclassNametagnameattribute

ID Para 1

ID Para 2

Class Para 1

Class Para 2

Tag Span 1Tag Span 2

Attr Para 1

Attr Para 2

+`; +shadow.innerHTML = shadowContent; +document.getElementById("byIdBtn").addEventListener("click", () => { + const p = shadow.getElementById("p1"); + p.style.color = p.style.color === "red" ? "blue" : "red"; +}); + +document.getElementById("byClassBtn").addEventListener("click", () => { + const elems = shadow.getElementsByClassName("same"); + for (let el of elems) { + el.classList.toggle("bgToggle"); + } +}); + +document.getElementById("byTagBtn").addEventListener("click", () => { + const spans = shadow.getElementsByTagName("span"); + for (let span of spans) { + span.innerHTML = "Updated Span Text"; + } +}); + +document.getElementById("byNameBtn").addEventListener("click", () => { + const inputs = shadow.querySelectorAll('[name="input1"], [name="input2"]'); + for (let input of inputs) { + input.disabled = !input.disabled; + } +}); + +document.getElementById("byAttrBtn").addEventListener("click", () => { + const para = shadow.querySelector('[data-custom="val1"]'); + para.setAttribute("data-new", "newValue"); + alert("New attribute added: data-new='newValue'"); +}); diff --git a/javascript/7-dom-manipulation/Assignment-3/shadowdom.html b/javascript/7-dom-manipulation/Assignment-3/shadowdom.html new file mode 100644 index 00000000..36a93a0f --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-3/shadowdom.html @@ -0,0 +1,32 @@ + + + + + Accessing & Manipulating Shadow DOM Elements + + + +

3. Accessing and Manipulating Shadow DOM Elements

+ + + + + +
+ + + + diff --git a/javascript/7-dom-manipulation/Assignment-4/displaycount.html b/javascript/7-dom-manipulation/Assignment-4/displaycount.html new file mode 100644 index 00000000..00234555 --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-4/displaycount.html @@ -0,0 +1,30 @@ + + + + + Display Element Count + + + +

4. Display Element Count

+ +
Div Element 1
+
Div Element 2
+ +

Paragraph 1

+

Paragraph 2

+

Paragraph 3

+ + Span 1 + Span 2 + + + + + +

Element Count:

+
+ + + + diff --git a/javascript/7-dom-manipulation/Assignment-4/script.js b/javascript/7-dom-manipulation/Assignment-4/script.js new file mode 100644 index 00000000..28d5473d --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-4/script.js @@ -0,0 +1,15 @@ +document.getElementById("countBtn").addEventListener("click", () => { + const allElements = document.getElementsByTagName("*"); + const elementCount = {}; + for (let el of allElements) { + const tag = el.tagName.toLowerCase(); + elementCount[tag] = (elementCount[tag] || 0) + 1; + } + let output = ""; + + document.getElementById("result").innerHTML = output; +}); diff --git a/javascript/7-dom-manipulation/Assignment-4/style.css b/javascript/7-dom-manipulation/Assignment-4/style.css new file mode 100644 index 00000000..cdbfca03 --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-4/style.css @@ -0,0 +1,31 @@ +body { + font-family: Arial, sans-serif; + padding: 20px; + background-color: #f5f5f5; +} + +h2 { + color: #333; +} + +button { + background-color: #007bff; + color: white; + border: none; + padding: 10px 16px; + border-radius: 6px; + cursor: pointer; + margin-top: 15px; +} + +button:hover { + background-color: #0056b3; +} + +#result { + margin-top: 15px; + padding: 10px; + background: white; + border-radius: 6px; + box-shadow: 0 0 4px rgba(0,0,0,0.2); +} diff --git a/javascript/7-dom-manipulation/Assignment-5/displaynested.html b/javascript/7-dom-manipulation/Assignment-5/displaynested.html new file mode 100644 index 00000000..bd238496 --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-5/displaynested.html @@ -0,0 +1,38 @@ + + + + + 5. Display Nested Element Count + + + +

5. Display Nested Element Count

+ +
+

Paragraph inside div1

+ Span inside div1 +
+

Nested paragraph inside div1

+ Deeply nested span inside div1 +
+
+ +
+

Paragraph inside div2

+
+ +
+
+

Paragraph inside section1

+ Span inside section1 +
+
+ + + +

Nested Element Count:

+
+ + + + diff --git a/javascript/7-dom-manipulation/Assignment-5/script.js b/javascript/7-dom-manipulation/Assignment-5/script.js new file mode 100644 index 00000000..3b0696cd --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-5/script.js @@ -0,0 +1,16 @@ +document.getElementById("countBtn").addEventListener("click", () => { + const resultDiv = document.getElementById("result"); + resultDiv.innerHTML = ""; + const topLevelElements = document.body.children; + let output = ""; + resultDiv.innerHTML = output; +}); diff --git a/javascript/7-dom-manipulation/Assignment-5/style.css b/javascript/7-dom-manipulation/Assignment-5/style.css new file mode 100644 index 00000000..0a0d498c --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-5/style.css @@ -0,0 +1,38 @@ +body { + font-family: Arial, sans-serif; + padding: 20px; + background-color: #f2f2f2; +} + +h2 { + color: #333; +} + +div, section { + border: 1px solid #ccc; + padding: 10px; + margin-bottom: 15px; + background: white; + border-radius: 8px; +} + +button { + background-color: #007bff; + color: white; + border: none; + padding: 10px 16px; + border-radius: 6px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +#result { + margin-top: 15px; + padding: 10px; + background: white; + border-radius: 6px; + box-shadow: 0 0 4px rgba(0,0,0,0.2); +} diff --git a/javascript/7-dom-manipulation/Assignment-6/script.js b/javascript/7-dom-manipulation/Assignment-6/script.js new file mode 100644 index 00000000..afde22e1 --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-6/script.js @@ -0,0 +1,8 @@ +document.getElementById("updateBtn").addEventListener("click", () => { + const listItems = document.querySelectorAll("#myList li"); + + if (listItems.length >= 4) { + listItems[1].textContent = "Updated Item"; + listItems[3].textContent = "Updated Item"; + } +}); diff --git a/javascript/7-dom-manipulation/Assignment-6/style.css b/javascript/7-dom-manipulation/Assignment-6/style.css new file mode 100644 index 00000000..43ee2c96 --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-6/style.css @@ -0,0 +1,34 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f6f8; + text-align: center; + padding: 30px; +} + +ul { + list-style-type: none; + padding: 0; +} + +li { + background-color: white; + margin: 8px auto; + padding: 10px; + border-radius: 8px; + width: 150px; + transition: background-color 0.3s; +} + +button { + padding: 10px 20px; + margin-top: 15px; + cursor: pointer; + border: none; + background-color: #007bff; + color: white; + border-radius: 6px; +} + +button:hover { + background-color: #0056b3; +} diff --git a/javascript/7-dom-manipulation/Assignment-6/update_listitems.html b/javascript/7-dom-manipulation/Assignment-6/update_listitems.html new file mode 100644 index 00000000..c2958ff8 --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-6/update_listitems.html @@ -0,0 +1,24 @@ + + + + + + Update List Items + + + +

Update List Items Example

+ + + + + + + + diff --git a/javascript/7-dom-manipulation/Assignment-7/script.js b/javascript/7-dom-manipulation/Assignment-7/script.js new file mode 100644 index 00000000..ce16e939 --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-7/script.js @@ -0,0 +1,16 @@ + +const divs = document.querySelectorAll(".color-box"); +const button = document.getElementById("toggleBtn"); +let currentIndex = 0; + +divs[currentIndex].style.display = "block"; + + +button.addEventListener("click", () => { + + divs[currentIndex].style.display = "none"; + + currentIndex = (currentIndex + 1) % divs.length; + + divs[currentIndex].style.display = "block"; +}); diff --git a/javascript/7-dom-manipulation/Assignment-7/style.css b/javascript/7-dom-manipulation/Assignment-7/style.css new file mode 100644 index 00000000..ccd7dace --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-7/style.css @@ -0,0 +1,35 @@ +body { + font-family: Arial, sans-serif; + text-align: center; + padding: 30px; + background-color: #f4f6f8; +} + +.color-box { + width: 150px; + height: 80px; + margin: 10px auto; + border-radius: 10px; + line-height: 80px; + color: white; + font-weight: bold; + display: none; /* initially hidden */ +} + +.box1 { background-color: #007bff; } +.box2 { background-color: #28a745; } +.box3 { background-color: #ff5722; } + +button { + padding: 10px 20px; + margin-top: 15px; + cursor: pointer; + border: none; + background-color: #333; + color: white; + border-radius: 6px; +} + +button:hover { + background-color: #555; +} diff --git a/javascript/7-dom-manipulation/Assignment-7/togglediv.html b/javascript/7-dom-manipulation/Assignment-7/togglediv.html new file mode 100644 index 00000000..96945625 --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-7/togglediv.html @@ -0,0 +1,20 @@ + + + + + + Toggle Divs Visibility + + + +

Toggle Visibility of Divs

+ +
Div 1
+
Div 2
+
Div 3
+ + + + + + diff --git a/javascript/7-dom-manipulation/Assignment-8/movetablerows.html b/javascript/7-dom-manipulation/Assignment-8/movetablerows.html new file mode 100644 index 00000000..be9ff09f --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-8/movetablerows.html @@ -0,0 +1,27 @@ + + + + + + Move Table Rows + + + +

Moving Table Rows

+ + + + + + + + + + + + +
IDItem NameActions
+ + + + diff --git a/javascript/7-dom-manipulation/Assignment-8/script.js b/javascript/7-dom-manipulation/Assignment-8/script.js new file mode 100644 index 00000000..3c6b56c4 --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-8/script.js @@ -0,0 +1,54 @@ + +const tbody = document.querySelector("#dataTable tbody"); + +for (let i = 1; i <= 10; i++) { + const row = document.createElement("tr"); + + row.innerHTML = ` + ${i} + Item ${i} + + + + + + + `; + + tbody.appendChild(row); +} + +tbody.addEventListener("click", (e) => { + if (e.target.tagName !== "BUTTON") return; + + const button = e.target; + const row = button.closest("tr"); + + if (button.classList.contains("up")) moveUp(row); + if (button.classList.contains("down")) moveDown(row); + if (button.classList.contains("top")) moveTop(row); + if (button.classList.contains("bottom")) moveBottom(row); +}); + + +function moveUp(row) { + const prevRow = row.previousElementSibling; + if (prevRow) { + tbody.insertBefore(row, prevRow); + } +} + +function moveDown(row) { + const nextRow = row.nextElementSibling; + if (nextRow) { + tbody.insertBefore(nextRow, row); + } +} + +function moveTop(row) { + tbody.insertBefore(row, tbody.firstElementChild); +} + +function moveBottom(row) { + tbody.appendChild(row); +} diff --git a/javascript/7-dom-manipulation/Assignment-8/style.css b/javascript/7-dom-manipulation/Assignment-8/style.css new file mode 100644 index 00000000..b879dcaa --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-8/style.css @@ -0,0 +1,41 @@ +body { + font-family: Arial, sans-serif; + background: #f4f6f8; + text-align: center; + padding: 30px; +} + +table { + width: 60%; + margin: 0 auto; + border-collapse: collapse; + background: white; + box-shadow: 0 0 10px rgba(0,0,0,0.1); +} + +th, td { + border: 1px solid #ccc; + padding: 10px; +} + +th { + background-color: #333; + color: white; +} + +button { + margin: 2px; + padding: 5px 10px; + border: none; + cursor: pointer; + border-radius: 4px; +} + +.up { background-color: #2196f3; color: white; } +.down { background-color: #4caf50; color: white; } +.top { background-color: #ff9800; color: white; } +.bottom { background-color: #f44336; color: white; } + +button:hover { + opacity: 0.8; +} diff --git a/javascript/7-dom-manipulation/Assignment-9/moveiframeele.html b/javascript/7-dom-manipulation/Assignment-9/moveiframeele.html new file mode 100644 index 00000000..e70d1a82 --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-9/moveiframeele.html @@ -0,0 +1,34 @@ + + + + + + Moving iFrame Elements + + + +

Moving iFrame Elements

+
+ + + + +
+ + + + + + diff --git a/javascript/7-dom-manipulation/Assignment-9/script.js b/javascript/7-dom-manipulation/Assignment-9/script.js new file mode 100644 index 00000000..db158969 --- /dev/null +++ b/javascript/7-dom-manipulation/Assignment-9/script.js @@ -0,0 +1,85 @@ + +const iframe = document.getElementById("tableFrame"); +const iframeDoc = iframe.contentDocument || iframe.contentWindow.document; + +const iframeHTML = ` + + + + + + + + ${Array.from({ length: 10 }, (_, i) => ` + + + + + + `).join("")} + +
#ItemActions
${i + 1}Item ${i + 1} + + + + +
+`; +iframeDoc.open(); +iframeDoc.write(iframeHTML); +iframeDoc.close(); + +const tbody = iframeDoc.querySelector("tbody"); + +function moveUp(row) { + const prev = row.previousElementSibling; + if (prev) tbody.insertBefore(row, prev); +} + +function moveDown(row) { + const next = row.nextElementSibling; + if (next) tbody.insertBefore(next, row); +} + +function moveTop(row) { + tbody.insertBefore(row, tbody.firstElementChild); +} + +function moveBottom(row) { + tbody.appendChild(row); +} + +document.getElementById("upBtn").addEventListener("click", () => { + const selectedRow = tbody.querySelector("tr:nth-child(3)"); // example: move 3rd row + moveUp(selectedRow); +}); + +document.getElementById("downBtn").addEventListener("click", () => { + const selectedRow = tbody.querySelector("tr:nth-child(3)"); + moveDown(selectedRow); +}); + +document.getElementById("topBtn").addEventListener("click", () => { + const selectedRow = tbody.querySelector("tr:nth-child(3)"); + moveTop(selectedRow); +}); + +document.getElementById("bottomBtn").addEventListener("click", () => { + const selectedRow = tbody.querySelector("tr:nth-child(3)"); + moveBottom(selectedRow); +});