JSFiddle - React, Tailwind, and code Playground

by mrcatoff

HTML

<div><input type="text" id="morse"></div>
<div id="encode"></div>
<div id="decode"></div>
<div>
  <button onclick="encode(); return false">Encode</button>
  <button onclick="decode(); return false">Decode</button>
</div>

JavaScript

let _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": "--..",  " ": " ",     "1": ".----",
  "2": "..---", "3": "...--", "4": "....-", "5": ".....",
  "6": "-....", "7": "--...", "8": "---..", "9": "----.",
  "0": "-----", ".": ".-.-.-", ",": "--..--", "?": "..--..",
  "'": ".----.",
  "/": "-..-.",  "(": "-.--.",  ")": "-.--.-",  "&": ".-...",
  ":": "---...", ";": "-.-.-.", "=": "-...-",   "+": ".-.-.",
  "-": "-....-", "_": "..--.-", "\"": ".-..-.", "$": "...-..-",
  "!": "-.-.--", "@": ".--.-."
}
let text;
let morse = "";
function encode() {
	text = document.getElementById('morse').value.toLocaleUpperCase().split("");
  for(var i = 0; i < text.length; i++) {
    morse += _MorseCode[text[i]];
  }
  console.log(morse);
}