diff --git a/Practice/DOM/index.html b/Practice/DOM/index.html new file mode 100644 index 0000000..69dda8c --- /dev/null +++ b/Practice/DOM/index.html @@ -0,0 +1,64 @@ + + + + + + Page + + + +

Food R Us

+ +
Apple
+
Banana
+
Orange
+
Pineapple
+
Apple
+
Banana
+
Orange
+
Pineapple
+
Apple
+
Banana
+
Orange
+
Pineapple
+



+ +
+

Root vegetables

+ + +

Non-Root Vegetables

+ +
+ +
+
+

box1

+
+
+

box2

+
+
+

box3

+
+
+

box4

+
+
+ + + \ No newline at end of file diff --git a/Practice/DOM/script.js b/Practice/DOM/script.js new file mode 100644 index 0000000..63685d0 --- /dev/null +++ b/Practice/DOM/script.js @@ -0,0 +1,82 @@ + +//ELEMENT SELECTORS +const myheading = document.getElementById("my-heading"); + +myheading.style.backgroundColor = "yellow"; +myheading.style.textAlign = "center"; +myheading.style.width = "fit-content"; +myheading.style.cssText = "border-radius: 15px; padding: 50px; background-color: blue; color: white; font-size: 2ch; width: fit-content; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 5ch; margin: auto;"; + +const fruits = document.getElementsByClassName("fruits"); + +// Using for loop +for (let i = 0; i < fruits.length; i++) { + fruits[i].style.backgroundColor = "yellow"; + fruits[i].style.border = "5px solid black"; + fruits[i].style.width = "150px"; +} + +Array.from(fruits).forEach(fruit => { + fruit.style.fontSize = "3ch"; + fruit.style.margin = "20px"; + fruit.style.float = "left"; +}); + +const listelements = document.getElementsByTagName('li'); +function changecolor(){ + Array.from(listelements).forEach(item => { + item.style.color = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`; + }); +} +setInterval(changecolor, 500); + +const element = document.querySelector(".fruits"); //querryselector will only return the first element!!! +element.style.backgroundColor = "lightgrey" + + +const fruiter = document.querySelectorAll('.fruits'); +function changefruit(){ + fruiter.forEach(item => { + item.style.backgroundColor = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`; + }); +} +setInterval(changefruit, 500); + + +//DOM NAVIGATION + +const children = document.getElementById("vegetable"); +var child = children.firstElementChild; +child.style.backgroundColor = "gray"; + +child = children.lastElementChild; +child.style.backgroundColor = "gray"; + +child = children.nextElementSibling; +child.style.backgroundColor = "green"; + +child = children.parentElement; +child.backgroundColor = "blue" + + +//CHANGE HTML ELEMENTS +//https://youtu.be/lfmg-EJ8gm4?si=jg8Jmn-Y-xvPPW0X&t=31651 + +const newh1 = document.createElement("h1") +const newh2 = document.createElement("h2") +newh2.textContent = "I love You"; +newh1.textContent = "I love You"; +newh1.style.color = "tomato"; +newh1.style.textAlign = "center"; + +document.body.append(newh1); //prepend to instert to the beggining! + +document.getElementById("box2").prepend(newh1); + +document.getElementById("manipulator").insertBefore(newh1, document.getElementById("box3")); + +const boxes = document.querySelectorAll(".box"); +document.getElementById("manipulator").insertBefore(newh2, boxes[3]) + +document.getElementById("manipulator").removeChild(document.getElementById("box4")) +