NodeLists

2024-10-11 19:42:11 +02:00
parent a49264a1d4
commit 12f3276172
2 changed files with 63 additions and 0 deletions
--- a/Practice/NodeListsAndOtherLists/main.html
+++ b/Practice/NodeListsAndOtherLists/main.html
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    .mybutton{
+        padding: 20px;
+        margin: 20px;
+        float: left;
+        background-color: aqua;
+        border: 10px dashed white;
+        font-size: 4ch;
+        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+        font-style: italic;
+    }
+</style>
+<body>
+    <button class="mybutton">Button 1</button>
+    <button class="mybutton">Button 2</button>
+    <button class="mybutton">Button 3</button>
+    <button class="mybutton">Button 4</button>
+    <button class="mybutton">Button 5</button>
+    <button class="mybutton">Button 6</button>
+
+    <script src="script.js"></script>
+</body>
+</html>
--- a/Practice/NodeListsAndOtherLists/script.js
+++ b/Practice/NodeListsAndOtherLists/script.js
@ -0,0 +1,33 @@
+//NODELISTS
+
+let buttons = document.querySelectorAll(".mybutton");       //NOTE!!! Node lists wont update the state of the DOM when it changes for example a new element is added, or an old removed
+
+//Add new element
+
+const newButton = document.createElement("button");
+newButton.textContent = "Button S";
+newButton.classList = "mybutton";
+
+document.body.appendChild(newButton);
+buttons = document.querySelectorAll(".mybutton");
+
+
+buttons.forEach(button =>{
+    button.style.marginTop = `${Math.floor(Math.random() * 350)}px`;
+});
+
+let colors = ["red", "yellow", "green", "grey", "black", "violet"] 
+buttons.forEach(button =>{
+    button.addEventListener("click", event =>{
+        event.target.style.backgroundColor = `${colors[Math.floor(Math.random()*6)]}`;
+    });
+    button.addEventListener("mouseover", event =>{
+        event.target.style.border = `10px solid lightyellow`;
+    });
+    button.addEventListener("mouseout", event => {
+        event.target.style.border = `10px dashed white`;
+    });
+});
+
+//CLASSLISTS
+//https://youtu.be/lfmg-EJ8gm4?si=-VAntMYmkAuzoruJ&t=35022