Morse Code

Morse Code

HTML

<div id="two">
    Click in the text box below and use the left arrow for "." and the right arrow for "-" the bottom arrow is space.
</div>
<div id="box">
    <textarea id="type"></textarea>
</div>
<img src="http://www.learnmorsecode.com/pix/CW.gif" />
<!-- Created By Raul Rodriguez-->

CSS

input[type="button"] {
    width:20px;
    clear:both;
   
}

#prompt {
border:thin solid black;
    width:100px;
    height: 100px;
    word-wrap: break-word;
    overflow: auto;
}

#two {
border: thin solid black;
float:left;
width:400px;
height:200px;
margin-right:10px;
}

JavaScript

var morse = {
    '.-': 'a', '-...': 'b', '-.-.': 'c', '-..': 'd', '.': 'e',
    '..-.': 'f', '--.': 'g', '....': 'h', '..': 'i', '.---': 'j',
    '-.-': 'k', '.-..': 'l', '--': 'm', '-.': 'n', '---': 'o',
    '.--.': 'p', '--.-': 'q', '.-.': 'r', '...': 's', '-': 't',
    '..-': 'u', '...-': 'v', '.--': 'w', '-..-': 'x', '-.--': 'y',
    '--..': 'z', '.----': '1', '..---': '2', '...--': '3', 
    '....-': '4', '.....': '5', '-....': '6', '--...': '7',
    '---..': '8', '----.': '9', '-----': '0', '.-.-.-': '.',
    '--..--': ',', '..--..': '?', '-..-.': '/', '.--.-.': '@'
};

function translate_morse(code) {
    return (typeof morse[code] === "undefined") ? "" : morse[code];
}

$('#type').keydown(function(e) {
    switch(e.keyCode) {
        case 37: this.value += "."; break;
        case 39: this.value += "-"; break;
        case 40: this.value += " "; break;
        case 8: return; // allow backspace
    }
    e.preventDefault();
}).keyup(function() {
    $('#two').text(
        this.value.split(" ").map(translate_morse).join("")
    );
});