Javascript Program to Build a Morse Code Converter
In this article, we will create a Morse Code Translator app using HTML, CSS, and JavaScript. Morse code, a system of encoding text characters into dot and dash sequences. The app’s functionality includes the ability to translate Morse code into text format.
Output Preview:
Approach
The Morse Code Translator web application combines HTML, CSS, and JavaScript code to create a visually appealing interface. It offers two sections for translation: Morse Code to Text and Text to Morse Code. Users can conveniently input their text in the corresponding fields and utilize the “Translate” buttons to convert it between Morse code and plain text.
- HTML code creates a webpage for converting Morse Code. It includes metadata, styling options, and two sections for translation.
- This CSS code is responsible for styling a Morse Code Converter application. It defines the font, background color, and margins for the entire page.
- The JavaScript code comprises multiple functions that work together for the Morse Code Converter application. Firstly, the generateMorseCode() function creates a dictionary mapping characters to their respective Morse code representations.
Project Structure
Example: Below is the implementation of the project.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Morse Code Converter</ title > < link rel = "stylesheet" href = "style.css" > </ head > < body > < div class = "container" > < h1 class = "title" >Morse Code Translator</ h1 > < div class = "input-container" > < label class = "label" >Text to Morse Code:</ label > < textarea class = "input" id = "textToMorse" rows = "4" ></ textarea > < button onclick = "handleTextToMorseTranslate()" class = "btn" >Translate</ button > < p class = "result" >Translation: < span id = "textToMorseOutput" ></ span > < button class = "btn" onclick = "copyTextToMorseOutput()" >Copy</ button > </ p > < p class = "success-message" id = "textToMorseSuccessMessage" ></ p > </ div > < div class = "input-container" > < label class = "label" > Morse Code to Text: </ label > < textarea class = "input" id = "morseToText" rows = "4" > </ textarea > < button onclick = "handleMorseToTextTranslate()" class = "btn" >Translate </ button > < p class = "result" >Translation: < span id = "morseToTextOutput" ></ span > < button class = "btn" onclick = "copyMorseToTextOutput()" >Copy </ button > </ p > < p class = "success-message" id = "morseToTextSuccessMessage" > </ p > </ div > </ div > < script src = "script.js" > </ script > </ body > </ html > |
CSS
body { font-family : Arial , sans-serif ; background-color : #f5f5f5 ; margin : 3 rem; padding : 0 ; } .container { background-color : #fff ; border-radius: 20px ; box-shadow: 0 0 40px 0px rgba( 0 , 0 , 0 , 0.1 ); padding : 40px ; margin : 20px ; max-width : 700px ; margin : 0 auto ; text-align : center ; } .title { font-size : 28px ; margin-bottom : 20px ; color : green ; } .input-container { margin-bottom : 30px ; text-align : left ; } .label { font-size : 20px ; color : #333 ; margin : 10px ; font-weight : bold ; } .input { resize: none ; border : 1px solid black ; border-radius: 10px ; padding : 20px ; margin : 10px ; width : 90% ; } .result { font-size : 18px ; margin-top : 10px ; color : #333 ; margin : 10px ; font-family : 'Courier New' , Courier , monospace ; font-weight : bold ; } .btn { background-color : #5272ee ; color : #ffffff ; border : none ; padding : 13px ; border-radius: 10px ; outline : none ; cursor : pointer ; box-shadow: 0 0 10px 0px grey; margin : 5px ; } .btn:hover { background-color : #0056b3 ; } .success-message { color : green ; margin-top : 10px ; font-weight : bold ; font-family : cursive ; } |
Javascript
// script.js function generateMorseCode() { const code = {}; const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.,?\'!/()&:;=+-_"$@ ' ; const morseValues = [ '.-' , '-...' , '-.-.' , '-..' , '.' , '..-.' , '--.' , '....' , '..' , '.---' , '-.-' , '.-..' , '--' , '-.' , '---' , '.--.' , '--.-' , '.-.' , '...' , '-' , '..-' , '...-' , '.--' , '-..-' , '-.--' , '--..' , '-----' , '.----' , '..---' , '...--' , '....-' , '.....' , '-....' , '--...' , '---..' , '----.' , '.-.-.-' , '--..--' , '..--..' , '.----.' , '-.-.--' , '-..-.' , '-.--.' , '-.--.-' , '.-...' , '---...' , '-.-.-.' , '-...-' , '.-.-.' , '-....-' , '..--.-' , '.-..-.' , '...-..-' , '.--.-.' ]; for (let i = 0; i < letters.length; i++) { code[letters[i]] = morseValues[i]; } return code; } const morseCode = generateMorseCode(); // Create reverse Morse code dictionary const reverseMorseCode = {}; for (const key in morseCode) { if (morseCode.hasOwnProperty(key)) { const value = morseCode[key]; reverseMorseCode[value] = key; } } // Function to translate text to Morse code const translateTextToMorse = (text) => { const words = text.split( ' ' ); const translatedWords = words.map((word) => { const chars = word.split( '' ); const morseChars = chars.map((char) => { return morseCode[char] || char; }); return morseChars.join( ' ' ); }); return translatedWords.join( '/' ); }; // Function to translate Morse code to text const translateMorseToText = (morseText) => { const morseWords = morseText.split( '/' ); const translatedWords = morseWords.map((morseWord) => { const morseChars = morseWord.split( ' ' ); return morseChars .map((morseChar) => { return reverseMorseCode[morseChar] || morseChar; }) .join( '' ); }); return translatedWords.join( ' ' ); }; // Function to handle translation from Morse code to text const handleMorseToTextTranslate = () => { const morseToText = document.getElementById( 'morseToText' ) .value.trim().toUpperCase(); if (morseToText === '' ) { document.getElementById( 'morseToTextOutput' ) .textContent = 'No Input Provided' ; return ; } const translatedText = translateMorseToText(morseToText); document.getElementById( 'morseToTextOutput' ) .textContent = translatedText; }; // Function to handle translation from text to Morse code const handleTextToMorseTranslate = () => { const textToMorse = document.getElementById( 'textToMorse' ) .value.trim().toUpperCase(); if (textToMorse === '' ) { document.getElementById( 'textToMorseOutput' ) .textContent = 'No Input Provided' ; return ; } const translatedMorse = translateTextToMorse(textToMorse); document.getElementById( 'textToMorseOutput' ) .textContent = translatedMorse; }; // Function to show success message const showSuccessMessage = (elementId, message) => { const successMessage = document.getElementById(elementId); successMessage.textContent = message; setTimeout(() => { successMessage.textContent = '' ; }, 2000); // Clear the message after 2 seconds }; // Function to copy Morse To Text output const copyMorseToTextOutput = () => { const morseToTextOutput = document.getElementById( 'morseToTextOutput' ); const text = morseToTextOutput.textContent; copyTextToClipboard(text); showSuccessMessage( 'morseToTextSuccessMessage' , 'Copied to Clipboard!!' ); }; // Function to copy Text To Morse output const copyTextToMorseOutput = () => { const textToMorseOutput = document.getElementById( 'textToMorseOutput' ); const text = textToMorseOutput.textContent; copyTextToClipboard(text); showSuccessMessage( 'textToMorseSuccessMessage' , 'Copied to Clipboard!!' ); }; // Function to copy text to clipboard const copyTextToClipboard = (text) => { const textArea = document.createElement("textarea"); textArea.value = text; document.body.appendChild(textArea); textArea.select(); document.execCommand( 'copy' ); document.body.removeChild(textArea); }; |
Contact Us