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