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;

}

morseCodeAlphabet(‘hi’);

// 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);

    //console.log(carName);

    //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

  console.log(result);

  return result;

}

This is the HTML code

<!DOCTYPE html>

<html lang=”en”>

<head>

    <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>

    <style>

    input

        {

          -moz-border-radius: 9px;

         border-radius: 9px;

            border:solid 1px black;

            padding:5px;

        }

        textarea

        {

          -moz-border-radius: 15px;

         border-radius: 15px;

            border:solid 1px black;

            padding:5px;

        }

        button

        {

          -moz-border-radius: 7px;

         border-radius: 7px;

            border:solid 1px black;

            padding:7px;

        }

        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;

}

        </style>

</head>

<body bgcolor=”07E7F3″>

    <div class=”container a”>

        <h1>Morse Code Translator</h1>

        <div></div>

        <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>

    </div>

</body>

</html>

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 https://neilmjoshi.com/morsecode.html

Note:

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.

Thanks!

– The shaped Team