Is there a better way to make a page redirect after input is given WITHOUT an input box?

Question

So far, I have come up with this code... Is there a better way to do this without an input box or hitting enter/clicking things? I intend for this to be an easter egg, but it is very large, and is a bit frustrating to look at.

<!-- 7H3 F0110W1N6 R3D1R3C7S 7H3 P463 WH3N 7H3 C0RR3C7 C0D3 1S 3N73R3D -->
<!-- THE FOLLOWING REDIRECTS THE PACE WHEN THE CORRECT CODE IS ENTERED -->
<!-- THE CODE IS: UP UP DOWN DOWN LEFT RIGHT LEFT RIGHT B A S -->
<script>
    document.addEventListener('keydown', function(event) {
if(event.keyCode == 38) {
        document.addEventListener('keydown', function(event) {
    if(event.keyCode == 38) {
        document.addEventListener('keydown', function(event) {
        if(event.keyCode == 40) {
            document.addEventListener('keydown', function(event) {
            if(event.keyCode == 40) {
                document.addEventListener('keydown', function(event) {
                if(event.keyCode == 37) {
                    document.addEventListener('keydown', function(event) {
                    if(event.keyCode == 39) {
                        document.addEventListener('keydown', function(event) {
                        if(event.keyCode == 37) {
                            document.addEventListener('keydown', function(event) {
                            if(event.keyCode == 39) {
                                document.addEventListener('keydown', function(event) {
                                if(event.keyCode == 66) {
                                    document.addEventListener('keydown', function(event) {
                                    if(event.keyCode == 65) {
                                        document.addEventListener('keydown', function(event) {
                                        if(event.keyCode == 83) {
                                            alert('CODE ENTERED');
                                            window.location = "NEW WEB ADRESS"
                                        }
                                    });
                                    }
                                });
                                }
                            });
                            }
                        });
                        }
                    });
                    }
                });
                }
            });
            }
        });
        }
    });
    }
});  
}
});
</script>

Can't you use just one listener and saving the keys that the user push? — Vinicius Monteiro, May 17 '17 at 19:50
It redirects the page when the konami code is entered on the keyboard without a text box or any buttons. I have no idea how to do any other things here... I'm still pretty inexperienced. — Astropup 5000, May 17 '17 at 19:51
http://stackoverflow.com/questions/31626852/how-to-add-konami-code-in-a-website-based-on-html — j08691, May 17 '17 at 19:54

score 1 · Answer 1 · answered May 17 '17 at 19:55

1

It's possible to do this with one listener.

var input = '';
var secretCode = 'abcdefg';

document.addEventListener('keydown', function(event) {
  input += String.fromCharCode(event.keyCode);
  if(input === secretCode) {
      alert('CODE ENTERED');
      window.location = "NEW WEB ADRESS"
  }
});

answered May 17 '17 at 19:55

Gavin

4,365
1
18
27

[keyCode is deprecated...](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode) – Alexander O'Mara May 17 '17 at 19:58
@AlexanderO'Mara Nice, but if you read into the doc, it seems like it still has the most browser support of all the possible solutions. – Gavin May 17 '17 at 20:01

Alexander O'Mara · Answer 2 · 2017-05-17T20:23:26.893

1

I would do it like this.

1 event listener.
No deprecated code (keyCode is deprecated).
No memory leaks.
Works if caps lock is on.
Allows restart if a wrong key is entered.
Readable code.

var keys = [
    'ArrowUp',
    'ArrowUp',
    'ArrowDown',
    'ArrowDown',
    'ArrowLeft',
    'ArrowRight',
    'ArrowLeft',
    'ArrowRight',
    'b',
    'a'
];
var keyed = 0;

window.addEventListener('keydown', function(e) {
    if (keys[keyed].toLowerCase() === e.key.toLowerCase()) {
        keyed++;
    }
    else {
        keyed = 0;
    }
    if (keyed >= keys.length) {
        keyed = 0;
        console.log('Code entered!');
    }
});

edited May 17 '17 at 20:23

answered May 17 '17 at 20:16

Alexander O'Mara

58,688
18
163
171

This is another really good method! I agree that it looks very readable! is there a large difference between using this and using Key codes? – Astropup 5000 May 17 '17 at 20:21
@Astropup5000 [keyCode is technically deprecated](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode). In theory, browsers may remove it at some point. Probably not any time soon, but I like to avoid deprecated code if possible. – Alexander O'Mara May 17 '17 at 20:26
well in that case, I guess I'll be using this from now on. – Astropup 5000 May 17 '17 at 20:29

score 0 · Answer 3 · answered May 17 '17 at 20:01

0

You can keep the keys in an array and pop the first item if it's entered. So, you can keep the prioritization.

var secretKeys = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65, 83];

document.addEventListener('keydown', function(event) {
  input = event.keyCode;
  if(input === secretKeys[0]) {
    secretKeys.shift();
    if (secretKeys.length == 0) {
      alert('You entered the secret key');
      window.location = "NEW WEB ADRESS";
    }
  }
});

answered May 17 '17 at 20:01

Mojtaba

4,852
5
21
38

This is insanely helpful! Thanks! – Astropup 5000 May 17 '17 at 20:04
No problem. Glad to help – Mojtaba May 17 '17 at 20:06
1

If the user messes up the secret key, it will never work when they retype it. Also, if they press any other keys before attempting to enter the secret key, the code will not work. – kamoroso94 May 17 '17 at 20:06
@kamoroso94, How come user can start from the beginning? – Mojtaba May 17 '17 at 20:08

kamoroso94 · Accepted Answer · 2017-05-17T20:29:56.313

I'm not sure if you're aware, but every time you press a key in your initial solution, you will add more and more event listeners. This is quite unnecessary and impractical, as the same solution can be achieved with just one.

~~The bug in your code is you're assigning the URL to window.location instead of window.location.href.~~

EDIT: Assigning to window.location or window.location.href are both correct and yield the same results.

const codes = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65, 83];
let codeIndex = 0;

document.addEventListener("keydown", (event) => {
  console.log(event.keyCode);
  if (event.keyCode != codes[codeIndex++]) {
    codeIndex = 0; // wrong code, reset
  }
  if (codeIndex == codes.length) {
    alert("CODE ENTERED"); // success!
    // window.location.href = "NEW WEB ADDRESS";
  }
});

p {
  font-family: Arial, sans-serif;
  font-size: 1em;
  line-height: 1.25em;
}

key {
  display: inline-block;
  padding: 0 0.5em;
  border: 1px solid #ccc;
  border-radius: 0.25em;
  background-color: #eee;
  font-family: monospace;
}

<p>Focus on this snippet and enter the code to trigger the alert:
  <key title="Up">&uarr;</key>
  <key title="Up">&uarr;</key>
  <key title="Down">&darr;</key>
  <key title="Down">&darr;</key>
  <key title="Left">&larr;</key>
  <key title="Right">&rarr;</key>
  <key title="Left">&larr;</key>
  <key title="Right">&rarr;</key>
  <key title="B">B</key>
  <key title="A">A</key>
  <key title="S">S</key>
</p>

I didn't realize that was happening! Thanks for pointing this out! — Astropup 5000, May 17 '17 at 20:07

score 0 · Answer 5 · answered May 17 '17 at 20:08

0

You can keep track of the code entered and reset it after a duration, or when the length exceeds the Konami Code length so if the user can start over without having to refresh the page.

function arraysMatch(arr1, arr2) {
  return arr1.length === arr2.length && arr1.every(function (char, indx) {
    return arr1[indx] === arr2[indx];
  });
}
var konamiCode = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65, 83];
var code = [];
var timeout = null;
document.addEventListener("keyup", function (event) {
  clearTimeout(timeout);
  if (code.length >= konamiCode.length) {
    code = [];
  }
  code.push(event.keyCode);
  if (arraysMatch(konamiCode, code)) {
    alert("code entered!");
  }
  timeout = setTimeout(function () {
    code = [];
  }, 3000)
});

answered May 17 '17 at 20:08

mhodges

10,938
2
28
46

When testing other codes I've been given, as well as my own, I've never had the need to refresh the page and try again... Why/how would that be necessary? – Astropup 5000 May 17 '17 at 20:11
@Astropup5000 Both Gavin and Mojtba's solutions do not include a reset and require a page refresh if the user messes up. – mhodges May 17 '17 at 20:12
Are you sure about this? I've been testing this with vigorous button mashing before and during entering the code... starting over without refreshing seems to work just fine. Is there a reason i'm getting different results? – Astropup 5000 May 17 '17 at 20:16
@Astropup5000 Test Mojtba's solution with the following: `up, up, up, up, up, down, down, left, down, right, right, right, left, right, B, B, B, A, A, A, S`. It says the "secret" code was entered.. – mhodges May 17 '17 at 20:23
I see... I guess you're right! But isn't it easier/more practical to have the reset based on input instead of on a timer? – Astropup 5000 May 17 '17 at 20:27
@Astropup5000 My solution uses both, just to show you it can be done either way. IMHO, kamoroso94's solution is the best. – mhodges May 17 '17 at 20:28

Is there a better way to make a page redirect after input is given WITHOUT an input box?

5 Answers5