how do i create a program to play morse code using a keyboard key and actively translate it to english in javascript

First, you would need to create a mapping between the Morse code and the English alphabet in your program. Here is a sample implementation:

index.tsx
const MORSE_CODES = { 
    ".-": "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", 
    ".-.-.-": ".", 
    "--..--": ",", 
    "..--..": "?", 
    "-....-": "-", 
    "-..-.": "/", 
    ".--.-.": "@", 
    "-.--.": "(", 
    "-.--.-": ")", 
    ".-...": "&",
    "---...": ":",
    "-.-.--": "!",
    ".-.-.": "+",
    ".-.-.": "=",
    "..--.-": "_",
    ".-..-.": '"',
    "...-..-": "$",
    ".--.-.': "@"
};
986 chars
56 lines

Next, you would need to listen to keyboard events in order to gather the Morse code input from the user. This can be achieved by using the keyup and keydown events. Here is an example implementation:

index.tsx
let morse = '';

document.addEventListener('keydown', (event) => {
    if (event.keyCode === 32) { // space bar
        morse += ' ';
    } else if (event.keyCode === 13) { // enter key
        console.log(morseToEnglish(morse));
        morse = '';
    }
});

document.addEventListener('keyup', (event) => {
    if (event.keyCode === 38) { // up arrow
        morse += '.';
    } else if (event.keyCode === 40) { // down arrow
        morse += '-';
    }
});
460 chars
19 lines

This code listens for the keydown and keyup events on the document object. When the space bar is pressed, a space character is added to the morse string. When the enter key is pressed, the morse string is translated to English using the morseToEnglish() function (which we will define next), and then the morse string is reset. When the up arrow key is pressed, a dot character is added to the morse string. When the down arrow key is pressed, a dash character is added to the morse string.

Finally, you would need to implement the morseToEnglish() function that takes a Morse code string as input and translates it to English using the mapping we defined earlier. Here is an example implementation:

index.tsx
function morseToEnglish(morse) {
    const words = morse.split('  ');
    let english = '';
    words.forEach((word) => {
        const characters = word.split(' ');
        characters.forEach((character) => {
            if (MORSE_CODES[character]) {
                english += MORSE_CODES[character];
            }
        });
        english += ' ';
    });
    return english.trim();
}
390 chars
15 lines

This code takes a Morse code string as input and splits it into words based on double spaces. It then splits each word into characters based on single spaces. For each character, it checks if there is a matching value in the MORSE_CODES mapping, and if so, it appends the corresponding English character to the english string. Finally, it adds a space between each character and returns the english string (with leading and trailing spaces removed).

With these pieces in place, you should be able to create a program that allows the user to enter Morse code input via the keyboard and have it translated to English in real-time.

related categories

gistlibby LogSnag