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:
- How to create a Morse code dictionary in JavaScript.
- How to reverse the Morse code dictionary for translation.
- How to build a web application with HTML, CSS, and JavaScript.
- How to handle user input and translate between text and Morse code.
- 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.
