diff --git a/Practice/MostlyEvents(LiterallyTheOnlyCuteThingInThisFolder!)/index.html b/Practice/MostlyEvents(LiterallyTheOnlyCuteThingInThisFolder!)/index.html new file mode 100644 index 0000000..f280317 --- /dev/null +++ b/Practice/MostlyEvents(LiterallyTheOnlyCuteThingInThisFolder!)/index.html @@ -0,0 +1,55 @@ + + + + + + Fancy Smiley + + + + +
+
😊
+
+ + + + diff --git a/Practice/MostlyEvents(LiterallyTheOnlyCuteThingInThisFolder!)/script.js b/Practice/MostlyEvents(LiterallyTheOnlyCuteThingInThisFolder!)/script.js new file mode 100644 index 0000000..b934105 --- /dev/null +++ b/Practice/MostlyEvents(LiterallyTheOnlyCuteThingInThisFolder!)/script.js @@ -0,0 +1,65 @@ +//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; + } +}); \ No newline at end of file