Kilokem/BroCodeJS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NodeLists

Browse Source
This commit is contained in:
Kilokem
2024-10-11 19:42:11 +02:00
parent a49264a1d4
commit 12f3276172
2 changed files with 63 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
Practice/NodeListsAndOtherLists/main.html Normal file
View File

@ -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>

33
Practice/NodeListsAndOtherLists/script.js Normal file
View File

@ -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