Keyboard Sequence Detection

demo

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";

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);
        );

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
        );

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();
        }
      });

We also used

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

and with this our project for the day was completed.

GitHub repo:

Blog on Day-11 of javascript30

JavaScript-30-Day-11

KUMAR HARSH ・ Jun 11 '21

#javascript #html #webdev #css

Blog on Day-10 of javascript30

JavaScript-30-Day-10

KUMAR HARSH ・ Jun 10 '21

#javascript #html #webdev #github

Blog on Day-9 of javascript30

JavaScript-30-Day-9

KUMAR HARSH ・ Jun 9 '21

#javascript #productivity #webdev #github

Follow me on Twitter
Follow me on Linkedin

DEV Profile

KUMAR HARSHFollow

The best way to learn is to teach.Programmer by Passion and Developer for Fun, and I love sharing my journey with everyone.

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!