Skip to content

Instantly share code, notes, and snippets.

@chrisportela

chrisportela/morsecode.html

Created June 14, 2020 20:38
Show Gist options
  • Save chrisportela/f832830254700422f6693dc08ab9440d to your computer and use it in GitHub Desktop.
Save chrisportela/f832830254700422f6693dc08ab9440d to your computer and use it in GitHub Desktop.
Download ZIP
Simple HTML Page to convert to/from morse code
Raw
morsecode.html
<!DOCTYPE html>
<html>
<head>
<title>Morse Code</title>
</head>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
display: flex;
flex-direction: column;
}
main {
display: flex;
flex-direction: column;
align-self: center;
width: 90%;
max-width: 800px;
}
main > div {
display: flex;
flex-direction: column;
}
h1 {
font-size: 3em;
}
input[type="text"] {
margin: 5px;
padding: 5px;
font-size: 1.5em;
}
button {
margin: 5px;
padding: 10px;
font-size: 1em;
}
</style>
<body>
<main>
<h1>Morse code converter</h1>
<div>
<input type="text" name="code" id="textInput" />
<button name="button-letters" onclick="convertToLetters()">
To Letters
</button>
<button name="button-morse" onclick="convertToMorse()">
To Morse
</button>
</div>
</main>
<script type="text/javascript">
const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890 ".split("");
const morseCode = [ ".-", "-...", "-.-.", "-..", ".", "..-.", "--.", "....", "..", ".---", "-.-", ".-..", "--", "-.", "---", ".--.", "--.-", ".-.", "...", "-", "..-", "...-", ".--", "-..-", "-.--", "--..", ".----", "..---", "...--", "....-", ".....", "-....", "--...", "---..", "----.", "-----", "/" ];
function convertToMorse() {
try {
const input = document.getElementById("textInput");
const letters = input.value || "";
const code = letters.split("").map(l => (morseCode[alphabet.indexOf(l.toUpperCase())])).join(" ");
input.value = code;
} catch(e) {
console.log(e);
}
}
function convertToLetters() {
try {
const input = document.getElementById("textInput");
const morse = input.value || "";
const letters = morse.split(" ").map(code => (alphabet[morseCode.indexOf(code.trim())])).join("");
input.value = letters;
} catch (e) {
console.log(e);
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment