//EVENTLISTENNERS

const boxe = document.getElementById("box");
const moveamount = 10;
let y = 0;
boxe.addEventListener("click", changebg);


function changebg(event){
    document.body.style.backgroundColor = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
}

function rotate(){
    boxe.style.rotate = "180deg"
}
function backrotate(){
    boxe.style.transition = "all 0.3s ease-in-out";
    boxe.style.rotate = "0deg";
}
boxe.addEventListener("mouseover", rotate);
boxe.addEventListener("mouseout", backrotate);

//KEEEEY EVENTS

//document.addEventListener("keydown", () => console.log("KEY PRESSED!!"));
//document.addEventListener("keyup", () => console.log("KEY released!!!"));

document.addEventListener("keydown", event =>{
    console.log(`Key ${event.key} was pressed!`);
    switch (event.key) {
        case 'ArrowUp':
            y -= moveamount;
            break;
        case 'ArrowDown':
            y += moveamount;
            break;
    }
    boxe.style.top = `${y}px`;
});


//HIDE BLOCKS

let hiden = false;
document.addEventListener("keyup", key => {
    if(key.key === ' ' && hiden === false){
        boxe.style.display = "none";
        hiden = true;
    }
    else if(key.key === ' ' && hiden === true){
        boxe.style.display = "block";
        hiden = false;
    }
});

document.addEventListener("keyup", key => {
    if(key.key === 'h' && hiden === false){
        boxe.style.visibility = "hidden";
        hiden = true;
    }
    else if(key.key === 'h' && hiden === true){
        boxe.style.visibility = "visible";
        hiden = false;
    }
});