Невидимая кнопка-шпион

Сегодня мы создадим секретную "кнопку", которую нельзя увидеть на странице и невозможно нажать мышкой. Она будет реагировать только на особую комбинацию клавиш — Ctrl + Shift + K.

Никаких HTML-элементов заранее создавать не будем — всё с нуля на чистом JavaScript.

Сначала нужно отследить нужную комбинацию клавиш. Для этого используем событие keydown, которое срабатывает при нажатии клавиши. Мы проверяем, нажаты ли Ctrl, Shift и именно клавиша K:


document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.shiftKey && e.key === 'K') {
    toggleSecretPanel();
  }});



Далее мы создаём div элемент прямо через JavaScript, прописываем ему стили, чтобы он был изначально невидим, и добавляем его в тело документа:


const panel = document.createElement('div');
panel.textContent = 'Секретный режим активирован!';
panel.style.cssText = 'display:none;position:fixed;top:20px;left:20px;padding:10px;background:#222;color:#fff;';
document.body.appendChild(panel);



Теперь нужна функция, которая будет переключать видимость панели. Если она скрыта — показать, если показана — скрыть:


function toggleSecretPanel() {
  panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
}

Что получилось?
Теперь при каждом нажатии Ctrl + Shift + K на странице появляется (или исчезает) секретная панель. Визуально её нет, и без знания кода никто не догадается, что она вообще существует.

📣 JS Ready | #практика

hcdev — справочник по HTML, CSS и JS, который содержит в себе актуальные знания по всем технологиям, предназначенных для фронтенд-разработки.

📌 Ссылочка: hcdev.ru

📣 JS Ready | #сайт

Regulex — это онлайн-инструмент для визуализации регулярных выражений в JavaScript, который преобразует их в диаграммы, помогая легче понять сложные паттерны.

📌 Ссылочка: jex.im/regulex

📣 JS Ready | #сайт