I’ve created simple JavaScript & HTML5 morse application. With this application you can enter a text then convert it into morse codes (dots and dashes) and vice versa.
Visit this link to use it: http://morse.zofiakreasi.com/
Here is the source code:
<!DOCTYPE html>
<html>
<head>
<title>zkMorse by Zofia Kreasi</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<style>
body{
color: grey;
}
input{
padding: 10px;
width: 70%;
margin: 10px;
}
button{
padding: 10px;
color: white;
background-color: green;
margin: 10px;
border: none;
}
#result{
text-align: center;
padding: 20px;
color: grey;
font-size: 18px;
}
</style>
</head>
<body>
<h1 align="center">zkMorse</h1>
<p align="center">Type some text and convert it int morse codes</p>
<div style="text-align: center">
<input type="text" id="mytext" placeholder="Type something"><br>
<button onclick="encode()">Encode</button><button onclick="decode()">Decode</button>
</div>
<div id="result"></div>
<script>
function encode(){
var rawtext = document.getElementById("mytext").value;
rawtext = rawtext.toLowerCase();
var restext = "";
for(var i = 0; i < rawtext.length; i++){
restext += atm(rawtext[i]);
}
document.getElementById("result").innerHTML = restext;
}
function decode(){
var rawtext = document.getElementById("mytext").value;
rawtext = rawtext.split(" ");
var restext = "";
for(var i = 0; i < rawtext.length; i++){
if(rawtext[i] != "") restext += mta(rawtext[i] + " ");
}
document.getElementById("result").innerHTML = restext;
}
function atm(x){
switch(x){
case "a" :
return ".- ";
break;
case "b" :
return "-... ";
break;
case "c" :
return "-.-. ";
break;
case "d" :
return "-.. ";
break;
case "e" :
return ". ";
break;
case "f" :
return "..-. ";
break;
case "g" :
return "--. ";
break;
case "h" :
return ".... ";
break;
case "i" :
return ".. ";
break;
case "j" :
return ".--- ";
break;
case "k" :
return "-.- ";
break;
case "l" :
return ".-.. ";
break;
case "m" :
return "-- ";
break;
case "n" :
return "-. ";
break;
case "o" :
return "--- ";
break;
case "p" :
return ".--. ";
break;
case "q" :
return "--.- ";
break;
case "r" :
return ".-. ";
break;
case "s" :
return "... ";
break;
case "t" :
return "- ";
break;
case "u" :
return "..- ";
break;
case "v" :
return "...- ";
break;
case "w" :
return ".-- ";
break;
case "x" :
return "-..- ";
break;
case "y" :
return "-.-- ";
break;
case "z" :
return "--.. ";
break;
case "1" :
return ".---- ";
break;
case "2" :
return "..--- ";
break;
case "3" :
return "...-- ";
break;
case "4" :
return "....- ";
break;
case "5" :
return "..... ";
break;
case "6" :
return "-.... ";
break;
case "7" :
return "--... ";
break;
case "8" :
return "---.. ";
break;
case "9" :
return "----. ";
break;
case "0" :
return "----- ";
break;
case " " :
return "..--.--.. ";
break;
case "." :
return ".-.-.- ";
break;
case "-" :
return "-....- ";
break;
case "," :
return "--..-- ";
break;
case ":" :
return "---... ";
break;
case "/" :
return "-..-. ";
break;
default:
return "";
break;
}
}
function mta(x){
switch(x){
case ".- ":
return "a";
break;
case "-... " :
return "b";
break;
case "-.-. " :
return "c";
break;
case "-.. " :
return "d";
break;
case ". " :
return "e";
break;
case "..-. " :
return "f";
break;
case "--. " :
return "g";
break;
case ".... " :
return "h";
break;
case ".. " :
return "i";
break;
case ".--- " :
return "j";
break;
case "-.- " :
return "k";
break;
case ".-.. " :
return "l";
break;
case "-- " :
return "m";
break;
case "-. " :
return "n";
break;
case "--- " :
return "o";
break;
case ".--. " :
return "p";
break;
case "--.- " :
return "q";
break;
case ".-. " :
return "r";
break;
case "... " :
return "s";
break;
case "- " :
return "t";
break;
case "..- " :
return "u";
break;
case "...- " :
return "v";
break;
case ".-- " :
return "w";
break;
case "-..- " :
return "x";
break;
case "-.-- " :
return "y";
break;
case "--.. " :
return "z";
break;
case ".---- " :
return "1";
break;
case "..--- " :
return "2";
break;
case "...-- " :
return "3";
break;
case "....- " :
return "4";
break;
case "..... " :
return "5";
break;
case "-.... " :
return "6";
break;
case "--... " :
return "7";
break;
case "---.. " :
return "8";
break;
case "----. " :
return "9";
break;
case "----- " :
return "0";
break;
case "..--.--.. " :
return " ";
break;
case ".-.-.- " :
return ".";
break;
case "-....- " :
return "-";
break;
case "--..-- " :
return ",";
break;
case "---... " :
return ":";
break;
case "-..-. " :
return "/";
break;
default:
return "";
break;
}
}
</script>
</body>
</html>
Encoding the encoded message
After you encode your message to a morse codes, you can encode that morse codes again into another morse code. Try it lik I’m showing you in this video: