Keybinding

By David Thomas on StackOverflow

by Chris LaFrombois

HTML

<div id="swatch"></div>

CSS

#swatch {
    margin: 1em;
    width: 100px;
    height: 100px;
    border: 2px solid #000;
}

JavaScript

var colorMap = {
    'b' : 'blue',
    'r' : 'red',
    'w' : 'white',
    'f' : 'fuchsia'
};

$(document).on('keyup', function(e){
    var letter = String.fromCharCode(e.which).toLowerCase();
    $('#swatch').css('background-color', function(i,currentColour){
        return colorMap[letter] || currentColour;
    });
});