Key Property tutorial in JavaScript

October 14, 2024

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Key Property JavaScript</title>
    <link rel="stylesheet" href="css/Key_Property_JavaScript.css">
</head>

<body>
    <input type="text" id="myinput"><br><br><br><br><br>
    <div id="box"></div>
    <script>
        document.querySelector("#myinput").addEventListener("keydown", function (e) {
            console.clear();
            var text = "You Pressed Button : " + e.key;
            console.log(text);
        });

        var left = 0;
        var up = 0;
        document.querySelector("#myinput").addEventListener("keydown", function (e) {
            console.clear();

            switch (e.key) {
                case "ArrowRight":
                    left = left + 5;
                    break;
                case "ArrowLeft":
                    left = left - 5;
                    break;
                case "ArrowDown":
                    up = up + 5;
                    break;
                case "ArrowUp":
                    up = up - 5;
                    break;
                default:
                    console.log("Other Key Pressed.");
                    break;
            }
            console.log("Left : " + left);
            console.log("Up : " + up);

            var target = document.querySelector("#box");

            target.style.marginLeft = left + "px";
            target.style.marginTop = up + "px";
        })
    </script>
</body>

</html>




Below File is css/Key_Property_JavaScript.css File
#box {
    width: 100px;
    height: 100px;
    background: #008000;
}