How to add a special code on my page? (Similar to the Konami code)

Question

What I'm looking for is not exactly like the other Konami code questions where the user types a certain code (like the konami one) and the page does something like an alert or loads a different page. I have a main page (index.html) which contains a few paragraphs. I want one paragraph to be hidden by default and when the user types the konami code (or a certain sequence of keys) I want that paragraph to appear.

<p id="hidden">TEXT TO BE HIDDEN BY DEFAULT</p

So find the code that does it and replace the new window part by showing the element.... — epascarello, Oct 25 '17 at 19:49

score 0 · Answer 1 · answered Oct 25 '17 at 19:28

Making it hidden by default is easy, with css you can set all #hidden to have display:none, making the text not render on the page

You can listen for key presses in javascript by using document.body.addEventListener("keydown", callback);. You can then store the e.keys in a string and check if it equals your sequence of characters in the callback. e => {myString += e.key; if(myString === konamiCode) {make element visible} }. To set the element to visible, you can set the element's .style.display = block.

score 0 · Accepted Answer · answered Oct 25 '17 at 19:47

This shouldn't be a problem, implementing what is done of the Konami code, though as you said you just need to set your own special code, after checking it you do the callback showing your text.

So as copy and paste from How to add konami code in a website based on html?:

// a key map of allowed keys 
    var allowedKeys = {
      37: 'left',
      38: 'up',
      39: 'right',
      40: 'down',
      65: 'a',
      66: 'b'
    };
    
    // the 'official' Konami Code sequence Change this to you code
    var konamiCode = ['up', 'up', 'down', 'down', 'left', 'right', 'left', 'right', 'b', 'a'];
    
    // a variable to remember the 'position' the user has reached so far.
    var konamiCodePosition = 0;
    
    // add keydown event listener
    document.addEventListener('keydown', function(e) {
      // get the value of the key code from the key map
      var key = allowedKeys[e.keyCode];
      // get the value of the required key from the konami code
      var requiredKey = konamiCode[konamiCodePosition];
    
      // compare the key with the required key
      if (key == requiredKey) {
    
        // move to the next key in the konami code sequence
        konamiCodePosition++;
    
        // if the last key is reached, activate cheats
        if (konamiCodePosition == konamiCode.length) {
          activateCheats();
          konamiCodePosition = 0;
        }
      } else {
        konamiCodePosition = 0;
      }
    });
    
    function activateCheats() {
      //Here our callback that will show your text
      document.getElementById("hidden").style.display = 'block';
    }

<p id="hidden" style="display:none">TEXT TO BE HIDDEN BY DEFAULT</p>

How to add a special code on my page? (Similar to the Konami code)

2 Answers2