diff --git a/Practice/NodeListsAndOtherLists/main.html b/Practice/NodeListsAndOtherLists/main.html
new file mode 100644
index 0000000..b3c553f
--- /dev/null
+++ b/Practice/NodeListsAndOtherLists/main.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Practice/NodeListsAndOtherLists/script.js b/Practice/NodeListsAndOtherLists/script.js
new file mode 100644
index 0000000..d30586f
--- /dev/null
+++ 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