andrewn/remote.html

## remote.html
<!DOCTYPE html>
<html>
  <head>
    <title>Remote</title>
    <style type="text/css">
      body {
        font-family: sans-serif;
        font-size: 4em;
      }
      #wrapper {
        margin: ;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <h1>Press button...</h1>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script>
      var mappings = {
        '117' : 'UP',
        '100' : 'DOWN',
        '108' : 'LEFT',
        '114' : 'RIGHT',
        '111' : 'OK',
        '98' : 'BACK',
        '49' : 'RED',
        '50' : 'GREEN',
        '51' : 'YELLOW',
        '52' : 'BLUE'
      };
      var initialMsg = $('h1').text(),
          el = $('h1');
      $(document).on('keypress', function (evt) {
        var button = mappings[evt.which];

        fadeTo(el, button);
      });

      function fadeTo(el, msg) {
        el.fadeOut({
          duration:200,
          complete:function () {
            el.text(msg);
            el.fadeIn(200);
          }
        });
      };
    </script>

  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Remote</title>
	<style type="text/css">
	body {
	font-family: sans-serif;
	font-size: 4em;
	}
	#wrapper {
	margin: ;
	}
	</style>
	</head>
	<body>
	<div id="wrapper">
	<h1>Press button...</h1>
	</div>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
	<script>
	var mappings = {
	'117' : 'UP',
	'100' : 'DOWN',
	'108' : 'LEFT',
	'114' : 'RIGHT',
	'111' : 'OK',
	'98' : 'BACK',
	'49' : 'RED',
	'50' : 'GREEN',
	'51' : 'YELLOW',
	'52' : 'BLUE'
	};
	var initialMsg = $('h1').text(),
	el = $('h1');
	$(document).on('keypress', function (evt) {
	var button = mappings[evt.which];

	fadeTo(el, button);
	});

	function fadeTo(el, msg) {
	el.fadeOut({
	duration:200,
	complete:function () {
	el.text(msg);
	el.fadeIn(200);
	}
	});
	};
	</script>

	</body>
	</html>