Monday 8 September 2014

Adding The Konami Code!

I'm currently designing a website for my wedding next year. The idea is that people will be able to R.S.V.P., add a song to the play list and choose dietary options via the website.


So I'm using a bootstrap modal to show my R.S.V.P., I'm using a mix of plain old JavaScript and jQuery to fade elements in and out. For example Question 1: "Are you coming?", if answered 'Yes' fade out question 1 and fade in Question 2...etc..

SO far it's going pretty well, I'm learning quite a bit about browser compatibility and what's new in CSS.

One cool thing I have learnt is the konami code.

The JavaScript for this is actually quite easy, the code and keyPadCode variables represent the characters, which can be found here. All I'm doing is waiting for the key sequence and then launching my countdown function.

$(document).ready(function(){
    var keys     = [];
    var code  = '52,48,52';
    var keyPadCode = '100,96,100'
  $(document).keydown(
    function(e) {
      keys.push( e.keyCode );
        if ( keys.toString().indexOf( code ) >= 0 ){
          $("#secret").modal('show');
             CountDownTimer('09/19/2015 1:0 PM', 'countdown');
             keys = [];
        } else if ( keys.toString().indexOf( keyPadCode ) >= 0 ){
             $("#secret").modal('show');
             CountDownTimer('09/19/2015 1:0 PM', 'countdown');
             keys = [];
        }
    });
});

I was going to keep the original:




But I thought I'd use '404' (from the 404 Not Found HTTP request). So when the user types '404' (on the number pad or top line of numbers) The following countdown to WEDDINGGEDON! is shown:


Pretty cool eh?

No comments:

Post a Comment