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