Morse Code Converter!

#javascript #learning #webdev #github

Today, I decided to make a simple program that converts normal text to Morse code. Here's the rundown:

The HTML

I started with a few lines of HTML to form the base of the program:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Morse Code Converter</title>
</head>
<body>
    <div id="container">
        <h2>Morse Code Converter!</h2>
        <p>Enter the message to be converted.</p>
        <input type="text" id="input" placeholder="Enter it here"><br>
        <button onclick="submit()">Convert</button>
        <div id="output"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

The CSS

Now, I suck at design, so I had AI handle the CSS 😭. I was satisfied with what it gave me, so I moved on to the next part.

The Fun Part

First, I defined some variables that I would use later. I also created a morseDecoderMap object to map input to its Morse Code translation.

let input = document.getElementById("input");
let output = document.getElementById("output");
let decodedMessage = "";
const morseDecoderMap = {
  // Letters
  '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': '--..',

  // Digits
  '0': '-----',  '1': '.----',  '2': '..---',  '3': '...--',
  '4': '....-',  '5': '.....',  '6': '-....',  '7': '--...',
  '8': '---..',  '9': '----.', ' ':' , '
};

Next, I created a submit() function:

function submit(){
   let inputArray = input.value.split("");
   decodedMessage = inputArray.map(character => morseDecoderMap[character.toUpperCase()] || "?").join(" ");
   output.innerHTML = `${decodedMessage}`
}

Explanation
I split the input into individual characters and stored them in an array. Next, I used the morseDecoderMap object to convert them to their Morse Code counterparts, making sure to convert lowercase letters to uppercase (much easier than adding every lowercase letter to the decoder object). I then joined them together into a single string and displayed it as the output.

Notes

If not for the console, I would've been stuck for a long time due to an uncaught type error from typing .getELementById() instead of .getElementById() (bruh).

I had to change the output font to monospace because the AI's font made it hard to distinguish between letters in Morse Code.

If you want to mess around with the code yourself, here's the link to the GitHub repository.

joelEzema / morse-code-converter

Simple Morse Code converter. That's it really

Bye fellas

DEV Community