Learn JavaScript KEY EVENTS in 10+ minutes! ⌨

// eventListener = Listen for specific events to create interactive web pages
// events: keydown, keyup
// document.addEventListener(event, callback);

[@BroCodez]

FYI I was pretty sick while filming so my voice sounds kind of weird.
// eventListener = Listen for specific events to create interactive web pages
// events: keydown, keyup
// document.addEventListener(event, callback);
const myBox = document.getElementById("myBox");
const moveAmount = 10;
let x = 0;
let y = 0;
document.addEventListener("keydown", event => {
myBox.textContent = "😲";
myBox.style.backgroundColor = "tomato";
});
document.addEventListener("keyup", event => {
myBox.textContent = "😀";
myBox.style.backgroundColor = "lightblue";
});
document.addEventListener("keydown", event => {
if(event.key.startsWith("Arrow")){
event.preventDefault();
switch(event.key){
case "ArrowUp":
y -= moveAmount;
break;
case "ArrowDown":
y += moveAmount;
break;
case "ArrowLeft":
x -= moveAmount;
break;
case "ArrowRight":
x += moveAmount;
break;
}
myBox.style.top = `${y}px`;
myBox.style.left = `${x}px`;
}
});

[@Vio.444]

👽👽👽👽👽👽👽👽

[@jakubmatusz1542]

Could you paste HTML and CSS code also? :)

[@iam_mausam]

@@jakubmatusz1542


Document

body{
margin: 0;
}
#myBox{
background-color: lightblue;
width: 200px;
height: 200px;
font-size: 7.5rem;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}

🐶

[@-_SleepAndEat_-]

Bro can you do Kali Linux ?

[@joachimuche424]

😂thx

[@doronfeldman5152]

You are the best programming channel. Only a month and a half ago I started learning on your channel and I have already made a site that checks answers and has 8 pages

[@Pawfessor1]

how do i control arrow keys on mobile? 😂

[@Marsjemijntje]

Oh my days, I was just wondering about some code for simple movement cause I am think of making a game.... and here you are!
Thank you for all your videos they are super helpful and you always keep it fun!🍬

[@NihaltheGreat]

who the f makes a game with html

[@Marsjemijntje]

@@NihaltheGreat Are you okay? For everyone's sake, I will leave it at that.....😘

[@NihaltheGreat]

@@Marsjemijntjei didn't know about html game devlopment, sorry, i always did it with razium(c++) libary

[@l-fitness3590]

@@NihaltheGreatanyone like me whose new to coding

[@widespectrumcreators4691]

Bro code= great tutorials with EPIC voice 😀😀😛👍👍🤩🤩

[@jayac4400]

Excellent teacher 😊 thank you for explaining very easily to understand

[@programmated_brian]

best tutorials in a shorter amount of time, keep doing these man. expecting a playlist on new -v

[@thaitrongson2249]

Thank you

[@QaisZayed.work90]

Thank you !

[@tatsu8001]

bro's explanation is so sigma

[@therealpunit]

Just Came to learn keyboard Events but learned something more extraordinary alongwith that.

[@MEIYANG-sj2sb]

thank you! you explained clearly and the example you showed was fun and relevant to the learning object

[@RajveerSinghnegi-y9l]

love it 😍

[@snub7577]

you are a legend man

[@H_canedit]

👍👍

[@joachimuche424]

Danke wirklich vielen Dank

[@nihongo_]

WW

[@jiyoungkim9258]

love watching this series