JS30. Задание 12 Key Sequence Detection



Демо: https://js3012.github.io/
Код: https://github.com/js3012/js3012.github.io
Задание называется Key Sequence Detection. В нём нужно определить ввёл ли пользователь с клавиатуры "секретное слово".

Код:

var pressed = [];
var secretCode = "wesbos";

window.addEventListener("keyup", (event) => {
    pressed.push(event.key);
    pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
    if (pressed.join("").includes(secretCode)) {
    console.log("DING DING!");
    cornify_add();
  }
  console.log(pressed);
});

1. Создаём пустой массив, куда будем помещать результат ввода с клавиатуры

var pressed = [];

2. Определяем секретное слово, которое должен ввести пользователь

var secretCode = "wesbos";

3. Добавляем слушатель, реагирующий на нажатие клавиш

window.addEventListener("keyup", (event) =>

4.  Используем стрелочную функцию с параметром event

Значение event.key - какая клавиша была нажата

5. Добавляем значение этой клавиши в наш пустой массив

pressed.push(event.key);

6. Здесь какой-то непонятный поворот

pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
    if (pressed.join("").includes(secretCode)) {
    console.log("DING DING!");
}

Как мне кажется, проще и понятнее было бы условие

if(pressed.join("") === secretCode){

        console.log("DING DING!");
  }

Или так

if(pressed.join("").includes(secretCode)) {

        console.log("DING DING!");
  }

Мне бы хотелось изменить идею проекта и сделать кейлогер - перехватчик нажатий клавиш клавиатуры.

Код:

var inputText = document.querySelector(".input-text");
var button = document.querySelector("button");
var rede = document.querySelector(".rede");
var pressed = [];


window.addEventListener("keydown", function(event) {
    pressed.push(event.key);
    rede.innerText = "Вы ввели:";
    button.classList.remove("hide");
    inputText.innerText = pressed.join("");
    if(pressed.length > 8) {
        pressed.splice(0, 1);
    }
});

button.addEventListener("click", function() {
    pressed = [];
    inputText.innerText = "";
    rede.innerText = "";
    button.classList.add("hide");
});


Итого:

Узнала, как при помощи js узнать какая клавиша была нажата на клавиатуре

window.addEventListener("keydown", function(event) {
    console.log(event.key);
});


Значение event.key - какая клавиша была нажата