如何让 konami 代码打开一个模式 enables/disables 暗模式（并有一个关闭按钮）？

Question

所以我尝试做一个打开输入Konami代码的Modal(↑↑↓↓←→←→BA)。到目前为止，这是我尝试过的方法（我是 JS 的新手，所以请不要刻薄。顺便说一句，我有代码集，但我需要模式。查看代码以获取更多详细信息。）：

var pattern = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
var current = 0;

var keyHandler = function (event) {

    // If the key isn't in the pattern, or isn't the current key in the pattern, reset
    if (pattern.indexOf(event.key) < 0 || event.key !== pattern[current]) {
        current = 0;
        return;
    }

    // Update how much of the pattern is complete
    current++;

    // If complete, alert and reset
    if (pattern.length === current) {
        current = 0;
        // Modal with dark mode option and light mode (if dark mode is already turned on(optional)).

    }
};

// Listen for keydown events
document.addEventListener('keydown', keyHandler, false);

<h1> Enter the Konami code. (↑↑↓↓←→←→BA) for a surprise.

Answer 1

直接取自https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal

我只是复制粘贴而已

var pattern = [
  "ArrowUp",
  "ArrowUp",
  "ArrowDown",
  "ArrowDown",
  "ArrowLeft",
  "ArrowRight",
  "ArrowLeft",
  "ArrowRight",
  "b",
  "a"
];
var current = 0;

var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

var keyHandler = function (event) {
  // If the key isn't in the pattern, or isn't the current key in the pattern, reset
  if (pattern.indexOf(event.key) < 0 || event.key !== pattern[current]) {
    current = 0;
    return;
  }

  // Update how much of the pattern is complete
  current++;

  // If complete, alert and reset
  if (pattern.length === current) {
    modal.style.display = "block";
    current = 0;
    // Modal with dark mode option and light mode (if dark mode is already turned on(optional)).
  }
  
};

span.onclick = function () {
    modal.style.display = "none";
  };

  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function (event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  };

// Listen for keydown events
document.addEventListener("keydown", keyHandler, false);

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

<h1> Enter the Konami code. (↑↑↓↓←→←→BA) for a surprise.</h1>

<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

如何让 konami 代码打开一个模式 enables/disables 暗模式（并有一个关闭按钮）？

How to make konami code open a modal that enables/disables dark mode (and has a close button)?

html

javascript

css

jquery

modal-dialog