How to create morse code translator

Did you know what is morse code? It is a method of communication using short and long signals that are common represented as dots and dashes. Developed to transmit human language to math language and as only translate letters it became and international standard.

#Short Answer

To create a morse code encrypter and decrypter you have two methods. One can use the ASCII table as described in this answer of Stackoverflow. But my preferred way is making a dictionary mapping all valid characters, which would be letters A from Z, number 0 to 9 and a blank space to separate words, anything else would be undefined and you can handle as you want.

1. Create a dictionary containing all valid characters:

typescriptconst dictionary = {
  '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': '-----', ' ': '/'
}

2. Add function to transform letters into morse code:

typescript  function transformToMorse(rawText: string) {
    return rawText.split('').map(letter => dictionary[letter.toLowerCase()]).join(' ')
  }

#Long Answer

#What is morse code?

Morse code was created by Samuel Morse and Alfred Vail. It is a method to encode human words characters into just short and long sequences that can be anything from lights, sounds, smoke, anything you can make a short or long signal can be used to represent any word or number from a-z and 0-9. It became very popular in telegraph - grandfather of communication that used morse code to transmit messages from short and long bip. They even had a profession to people hearing and translating the messages- telegraphist.

Morse code works by using a sequence of short or long signal to represent one letter/number. For example, the letter t can be represent by a long signal -, but the letter g is two long signal and one short signal --.. With this you can make a very good system of communication to transform human language into natural language.

It's also very popular on pop culture as almost every riddle movie has a part using morse to encrypt or decrypt some kind of message.

#Alphabet

#Google learn morse

If you stay curious to learn more about morse code, I highly recommend you try Google's morse learn. They use images to help us remember the letters.

#Javascript/Typescript functions

To create a morse code encrypter and decrypter you have two methods.

• Using ASCII table You can use the ASCII table as described in this answer of Stackoverflow. By knowing that ASCII table characters a - z goes from 97 to 122 and numbers 0 - 9 goes from 48 to 57 you can do something like this.

1. First create 2 arrays containing the characters and one constant for the space.

typescript// Characters in order A - Z and 0 - 9
  const charactersAZ = ['.-', '-...','-.-.','-..','.','..-.','--.','....','..','.---','-.-','.-..','--','-.','---','.--.','--.-','.-.','...','-','..-','...-','.--','-..-','-.--','--..']
  const numbers09 = ['-----', '.----', '..---', '...--', '....-', '.....', '-....', '--...', '---..', '----.']
  const characterSpace = '/'

2. Now you need to remove all weird characters that does not have an index on our arrays

typescript  function cleanRawText(rawText: string) {
    return rawText.toLowerCase().replace(/[^a-z0-9\s]/g, "");
  }

3. Finally make a function to return the encrypted character.

typescript  const isNumberRegex = /^\d+$/
 
function transformToMorse(rawText: string) {
  const formatText = cleanRawText(rawText);
  return formatText.split('').map(letter => {
    if(letter === " ") return characterSpace;
 
    asciiCode = letter.charCodeAt(letter);
    if(isNumberRegex.test(letter)) return numbers09[asciiCode - 48];
    else return charactersAZ[asciiCode - 97];
  }).join(' ');
}

4. Test the functions

typescript  transformToMorse('Hello world')
  // result .... . .-.. .-.. --- / .-- --- .-. .-.. -..

-Using dictionary

My preferred way is making a dictionary mapping all valid characters, which would be letters A from Z, number 0 to 9 and a blank space to separate words, anything else would be undefined and you can handle as you want.

1. Create a dictionary containing all valid characters:

typescript  const dictionary = {
    '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': '--..', '0': '-----', '1': '.----', '2': '..---', '3': '...--', '4': '....-', '5': '.....', '6': '-....', '7': '--...', '8': '---..', '9': '----.', ' ': '/'
  }

2. Add function to transform letters into morse code:

typescript  function transformToMorse(rawText: string) {
    return rawText.split('').map(letter => dictionary[letter.toLowerCase()]).join(' ')
  }

3. Test it

typescript  transformToMorse('Hello world')
  // result .... . .-.. .-.. --- / .-- --- .-. .-.. -..

Which one of them should I choose? Well, I think is up to you, personally I will not go to performance side because both has map method and the others doesn't make that much difference. I would choose based on readability as the first one the arrays seems a bit confusing and object making a dictionary seems much more readable for me.

Okay, but this is only an encrypter, where is the decrypter? For this, just invert the logic, make a dictionary containing morse code as keys, letters with values and the backslash for white space.

#Bonus: UI - NextJS - Tailwind

This article only shows how to convert, but not how to create an application with these logics. I'am gonna leave this for you to create a design. I personally recommend to create a NextJS project with TailwindCSS for styling and Vercel as free host.

You can checkout the source code to get inspired

#Conclusion

In this article you learnt the history of morse code and how to create simple functions to translate/encrypt/decrypt morse code using Javascript/Typescript. Feel free to leave any suggestions, corrections and tips. Thank you for reading and see you in the next article. Have a nice day. 😎✨✨✨😎