TheDOM

2024-10-11 16:14:44 +02:00
parent bc4486fe11
commit 46be1154bf
2 changed files with 146 additions and 0 deletions
--- a/Practice/DOM/index.html
+++ b/Practice/DOM/index.html
@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Page</title>
+</head>
+<style>
+    .box{
+        border: 3px solid;
+        width: 100%;
+        height: 125px;
+    }
+</style>
+<body>
+    <h1 id="my-heading">Food R Us</h1>
+
+    <div class="fruits">Apple</div>
+    <div class="fruits">Banana</div>
+    <div class="fruits">Orange</div>
+    <div class="fruits">Pineapple</div>
+    <div class="fruits">Apple</div>
+    <div class="fruits">Banana</div>
+    <div class="fruits">Orange</div>
+    <div class="fruits">Pineapple</div>
+    <div class="fruits">Apple</div>
+    <div class="fruits">Banana</div>
+    <div class="fruits">Orange</div>
+    <div class="fruits">Pineapple</div>
+    <br><br><br><br>
+
+    <div>
+        <h4>Root vegetables</h4>
+        <ul id="vegetable">
+            <li>Beat</li>
+            <li>Carrot</li>
+            <li>Potato</li>
+        </ul>
+
+        <h4>Non-Root Vegetables</h4>
+        <ul>
+            <li>Broccoli</li>
+            <li>celery</li>
+            <li>Onion</li>
+        </ul>
+    </div>
+
+    <div id="manipulator">
+        <div id="box1" class="box">
+            <p>box1</p>
+        </div>
+        <div id="box2" class="box">
+            <p>box2</p>
+        </div>
+        <div id="box3" class="box">
+            <p>box3</p>
+        </div>
+        <div id="box4" class="box">
+            <p>box4</p>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
--- a/Practice/DOM/script.js
+++ 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"))
+