Posted on

Morse Code JavaScript Translator

This translator (coded in JavaScript), takes an input of English and returns it as Morse Code.

Here is the JavaScript code.

function convertToMorseCode(){
let input = document.getElementById(‘english_text’).value;
let output = morseCodeAlphabet(input);
document.getElementById(‘morse_code’).value = output;
// this function takes a string input and turns it into morse code and displays
// it on the console
function morseCodeAlphabet(input){
 //defines a variable length to find out how long the sting input is
 // we are doing this because we need to know every letter in the string
  let length = input.length;
  //we created these two arrays to store all of the alphabet and
  //it’s corosponding morse code
  let alpabet = [ ‘ ‘,’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′];
  let morseCode = [ ‘/’,’.- ‘, ‘.— ‘, ‘-.-. ‘, ‘-.. ‘,
   ‘. ‘, ‘..-. ‘, ‘–. ‘, ‘…. ‘, ‘.. ‘,
    ‘.— ‘, ‘-.- ‘, ‘.-.. ‘,’— ‘,’-. ‘,’— ‘,’.–. ‘,’–.– ‘,’.-. ‘,’… ‘,’- ‘,’..- ‘,‘…- ‘, ‘.– ‘,’-..- ‘,
    ‘-.– ‘,’–.. ‘,’, ‘,’—-– ‘,’.—-‘,’..— ‘,’…– ‘,‘….- ‘,’…..’,’-….’,’–... ‘,’—.. ‘,’—-. ‘];
    console.log(‘alphabet array length’,alpabet.length);
    console.log(‘morse code array length’, morseCode.length);
  //this variable is used for displaying the morse code onto the console in one line
    let result = ”;
  //this for loop takes the first letter in the string input and converts it into morse code
  //and repeats it untill the end of the input
    for(i = 0; i< length; i++){
    //this variable finds the first letter in the string and repeats for every itteration
      let carName = input.substring( i ,i+1);
    //this variable finds the position of carname in the alphabet array and assigns it to idx
  let idx = alpabet.indexOf(carName);
   //this variable finds the conrosponding morse code base
   //on possition from the mose code array
  let mcode = morseCode[idx];
//this line adds mcode to the previous morse code result
  result = result + ‘   ‘  +  mcode;
  //this console.log logs the final result
  return result;
This is the HTML code
<!DOCTYPE html>
<html lang=”en”>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=, initial-scale=1.0″>
    <title>Morse Code Translator</title>
    <meta name=”description” content=”HTML based morse code translator from english to international morse code”>
    <meta name=”keywords” content=”morse code,morse code translator,online morse code translator”>
    <meta name=”author” content=”Neil Joshi”>
    <script src=”morsecode.js”></script>
          -moz-border-radius: 9px;
         border-radius: 9px;
            border:solid 1px black;
          -moz-border-radius: 15px;
         border-radius: 15px;
            border:solid 1px black;
          -moz-border-radius: 7px;
         border-radius: 7px;
            border:solid 1px black;
        div.a {
  text-align: center;
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
<body bgcolor=”07E7F3″>
    <div class=”container a”>
        <h1>Morse Code Translator</h1>
        <label class = “a” for=”english_text”>Type in English Here</label><br>
        <input type= “text” id=”english_text” name=”english_text” size = “50”></input><br>
        <label for=”morse_code”>Morse code will be displayed below</label><br>
        <textarea readonly cols = “50” id=”morse_code” name=“morse_code” ></textarea><br>
        <button onclick=”javascript:convertToMorseCode()”>convert</button><br>
I do not have a video explaining the HTML or the JavaScript but the comments are in the JavaScript code.
If you want to use this translator, go to
Do not use the “Enter” button or any punctuation other than commas. If you want to enter numbers use 1,2,3… or one-two-three…etc.
– The shaped Team