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

var buttone = document.getElementById("buttonone");
buttone.classList.add("textone");                       //add class

buttone.classList.remove("mybutton");                   //remove class

buttone = document.getElementById("buttontwo");

buttone.addEventListener("mouseover", event =>{
    buttone.classList.toggle("texttwo");                //toggle will add if the class is not there and remove if it is there
});

//https://www.youtube.com/watch?v=lfmg-EJ8gm4&t=35022s