HomeCSSMorse Code Translator

Morse Code Translator

Introduction:

Morse code, a system of representing text characters using sequences of dots and dashes, has a rich history in telecommunications. Despite its age, it’s still relevant today and can be a fun and educational programming project. In this tutorial, we will build a Morse code translator from scratch using HTML, CSS, and JavaScript. By the end of this tutorial, you’ll have a fully functional Morse code translator web application.

Things You Will Learn:

In this tutorial, you’ll learn:

  1. How to create a Morse code dictionary in JavaScript.
  2. How to reverse the Morse code dictionary for translation.
  3. How to build a web application with HTML, CSS, and JavaScript.
  4. How to handle user input and translate between text and Morse code.
  5. How to structure your project folder for a web application.

 

Video Tutorial:

I would suggest you to watch the video below for a better understanding of how we have implemented the functionality of this project. If you find the video helpful give it a like and subscribe to my YouTube channel where I post new tips, tricks, and tutorials related to HTML, CSS, and Javascript.

 

Project Folder Structure:

Now before we move on to actual coding we create a project folder structure. We name the project folder – ”Morse Code Translator”. Within this folder, we have 3 files. These files are:

  • index.html
  • style.css
  • script.js

HTML:

We begin with the HTML code. Copy the code below and paste it into your HTML document.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Morse Code Translator</title>
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;600&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <h1>Morse Code Translator</h1>
      <label for="input">Enter Text Or Morse Code:</label>
      <textarea id="input" rows="4"></textarea>
      <div class="btn-container">
        <button id="translate">Translate</button>
      </div>
      <p>Translation: <span id="output"></span></p>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

 

CSS:

Next, we style our code using CSS. For this copy, the code provided to you below and paste it into your stylesheet.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto Mono", monospace;
}
body {
  background-color: #5272ee;
}
.container {
  background-color: #ffffff;
  width: min(90%, 500px);
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  padding: 3em;
  border-radius: 1em;
}
h1 {
  font-size: 1.5em;
}
label {
  display: block;
  font-weight: 600;
  margin: 3em 0 0.3em 0;
}
textarea {
  resize: none;
  border: 1px solid black;
  border-radius: 0.5em;
  padding: 0.5em;
  width: 100%;
}
.btn-container {
  display: flex;
  justify-content: flex-end;
}
button {
  background-color: #5272ee;
  color: #ffffff;
  border: none;
  padding: 1em 2em;
  border-radius: 0.3em;
  outline: none;
  margin: 1em 0;
  cursor: pointer;
}
p {
  font-weight: 600;
}
p span {
  font-weight: 400;
}

 

JS:

Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.

//Morse Code Dictionary
const morseCode = {
  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: "----.",
  ".": ".-.-.-",
  ",": "--..--",
  "?": "..--..",
  "'": ".----.",
  "!": "-.-.--",
  "/": "-..-.",
  "(": "-.--.",
  ")": "-.--.-",
  "&": ".-...",
  ":": "---...",
  ";": "-.-.-.",
  "=": "-...-",
  "+": ".-.-.",
  "-": "-....-",
  _: "..--.-",
  '"': ".-..-.",
  $: "...-..-",
  "@": ".--.-.",
  " ": "/",
};

//Reverse the morseCode dictionary to get a lookup for Morse code to letters and numbers
const reverseMorseCode = {};
for (const key in morseCode) {
  if (morseCode.hasOwnProperty(key)) {
    const value = morseCode[key];
    reverseMorseCode[value] = key;
  }
}

const inputField = document.getElementById("input");
const translateButton = document.getElementById("translate");
const outputField = document.getElementById("output");

translateButton.addEventListener("click", () => {
  const inputText = inputField.value.trim().toUpperCase();
  if (inputField === "") {
    outputField.textContent = "No Input Provided";
    return;
  }

  if (inputText.includes(".")) {
    //Input contains dots, assuming it's Morse code and translating to text
    const morseWords = inputText.split("/");
    const translatedWords = morseWords.map((morseWord) => {
      const morseChars = morseWord.split(" ");
      return morseChars
        .map((morseChar) => {
          return reverseMorseCode[morseChar] || morseChar;
        })
        .join("");
    });
    outputField.textContent = translatedWords.join(" ");
  } else {
    //Input is text, translating to Morse Code
    const words = inputText.split(" ");
    const translatedWords = words.map((word) => {
      const chars = word.split("");
      const morseChars = chars.map((char) => {
        return morseCode[char] || char;
      });
      return morseChars.join(" ");
    });
    outputField.textContent = translatedWords.join("/");
  }
});

 

Conclusion:

Congratulations! You’ve successfully built a Morse code translator web application. You’ve learned how to create a Morse code dictionary, reverse it for translation, and structure a web project with HTML, CSS, and JavaScript. This project can serve as a foundation for further web development and JavaScript programming.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

15 + 10 =

Most Popular