DEV Community

loading...
Cover image for JavaScript-30-Day-12

JavaScript-30-Day-12

KUMAR HARSH
The best way to learn is to teach. Programmer by Passion and Developer for Fun, and I love sharing my journey with everyone.
Updated on ・2 min read

Keyboard Sequence Detection

demo

img

Today we'll be making a Key Sequencing Detection that is when some one inputs a certain sequence of keys into your window then something happens, used most of the time online for Konami Code.

First of all we would we would create an empty array to store all the keys we type and also create a secret code of our choice.

const pressed = [];
const secretCode = "harsh";
Enter fullscreen mode Exit fullscreen mode

Now we would add a keyup event on the window and we and we would extract the keycode and add it into the array.

window.addEventListener("keyup", (e) => {
        pressed.push(e.key);
        );
Enter fullscreen mode Exit fullscreen mode

But this would keep increasing the size of the array as we go on typing so we need to trim the array to the maximum size we would ever need that is the size of our secret code.

For that we would use splice() and since we want to trim the array from the back that is as soon as the array goes beyond the required size it will start removing elements from the start.

window.addEventListener("keyup", (e) => {
        pressed.push(e.key);
        pressed.splice(
          -secretCode.length - 1,
          pressed.length - secretCode.length
        );
Enter fullscreen mode Exit fullscreen mode

Now finally we would check if the array contains our secret code or not and for that we would convert the individual array elements into a string using .join() and then use includes() function to see if our secret code is present in the array.

window.addEventListener("keyup", (e) => {
        pressed.push(e.key);
        pressed.splice(
          -secretCode.length - 1,
          pressed.length - secretCode.length
        );
        if (pressed.join("").includes(secretCode)) {
          console.log("secretCode Matched");
          cornify_add();
        }
      });
Enter fullscreen mode Exit fullscreen mode

We also used

<script
      type="text/javascript"
      src="https://www.cornify.com/js/cornify.js"
    ></script>
Enter fullscreen mode Exit fullscreen mode

and with this our project for the day was completed.

GitHub repo:

Blog on Day-11 of javascript30

Blog on Day-10 of javascript30

Blog on Day-9 of javascript30

Follow me on Twitter
Follow me on Linkedin

DEV Profile

cenacr007_harsh image

You can also do the challenge at javascript30

Thanks @wesbos , WesBos to share this with us! 😊💖

Please comment and let me know your views

Thank You!

Discussion (10)

Collapse
rohitk570 profile image
ROHIT KUMAR

cool😍👌

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

thanks

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

thanks.

Collapse
rash123 profile image
RASHMI VERMA

Unicorn👌👌

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

yup loved them.

Collapse
rohitk570 profile image
ROHIT KUMAR

can add this too

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

add what?

Collapse
rohitk570 profile image
ROHIT KUMAR

a failed attempt of uploading img

Collapse
srshohan profile image
Shohanur Rahman

cool

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

thanks