var boxes = document.querySelectorAll(".box")

//line trigger for the carillon

let line = document.createElement("div")
line.id = "line"
line.style.position = "fixed"
line.style.top = "0"
line.style.width ="100%"
line.style.height = "10px"
line.style.backgroundColor ="green"
line.style.opacity ="0.5"
line.style.zIndex ="9999999999999999"

document.body.appendChild(line)

// some space at the bottom to be able to scroll all the elements of the page
let finale = document.createElement("div")
finale.style.height = "100vh"
document.body.appendChild(finale)
  
let observer = new IntersectionObserver(
    entries => {
        console.log(entries);
    },
    {
        root: line,
    }
);

//inbuild funct
boxes.forEach((box)=>{
    observer.observe(box);
})










// following code relates to the test html page



boxes.forEach((box) => {
    let randomCol = '#'+(Math.floor(Math.random()*16777215).toString(16));
    box.style.backgroundColor = randomCol;


});


// sound?
//upload as webextension

//web audio API to do synthesis