CodePen Embed - Morse Code Translater

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Morse Code Translater</title>
    <link rel="icon" href="https://cdn-icons-png.flaticon.com/512/179/179895.png">
  </head>
  <body>
    <nav>
      <h1>Morse Code</h1>
    </nav>
    <details class="morseRef">
      <img
        class="refSheet"
        src="https://imgv2-2-f.scribdassets.com/img/document/313270717/original/6cee57f4d0/1572272364?v=1"
        alt="morse code sheet"
      />
      <summary>
        <ion-icon name="book"></ion-icon>
      </summary>
    </details>
    <form>
      <textarea
        name="Morsefield"
        id="morseTextArea"
        placeholder="Morse(Input)"
      ></textarea
      ><ion-icon name="swap-vertical-outline" id="swapBtn"></ion-icon>
      <textarea
        name="Textfield"
        id="textArea"
        placeholder="Text(Output)"
        readonly
      ></textarea>
      <div class="translateBtn"><ion-icon name="play"></ion-icon></div>
    </form>
    <p>Secrets found: <span id="count">0</span>/3</p>
    <script src="script.js"></script>
    <script
      type="module"
      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"
    ></script>
  </body>
</html>

@import url("https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap");

html,
body {
  --main-font: Cutive Mono;
  --main-text-color: black;
  --bg-color: white;
  --secondary-bg-color: #d9d9d9;
  --main-text-color-dark: white;
  --bg-color-dark: #323232;
  --secondary-bg-color-dark: #191919;


  font-family: var(--main-font);
  width: 100%;
  height: 100%;
  margin: 0;
  transition: 0.3s;
}

@media (prefers-color-scheme: light) {
  body {
    background-color: var(--bg-color);
    color: var(--main-text-color);
  }
  textarea {
    background-color: var(--secondary-bg-color);
  }
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--bg-color-dark);
    color: var(--main-text-color-dark);
  }
  textarea {
    background-color: var(--secondary-bg-color-dark);
    color: white;
  }
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  position: relative;
}

ion-icon {
  cursor: pointer;
}

nav {
  width: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  height: 80px;
  position: relative;
}

nav > h1 {
  font-weight: 300;
  align-content: center;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  animation: typing 1s steps(25, end);
}

@keyframes typing {
  from {
    width: 0%;
    border-right: solid;
  }

  to {
    width: 510px;
  }
}

.morseRef {
  position: absolute;
  z-index: 4;
  bottom: 20px;
  right: 30px;
  font-size: 2rem;
}

.refSheet {
  width: 250px;
  position: absolute;
  z-index: 4;
  right: 50px;
  bottom: 50px;
  border-radius: 10px;
}

summary {
  list-style: none;
}

form {
  width: 550px;
  height: 60%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  align-items: center;
}

textarea {
  width: 500px;
  height: 282px;
  border: solid 2px;
  padding: 15px;
  border-radius: 10px;
  resize: none;
  position: relative;
  color: var(--bg-color);
}

form #swapBtn {
  font-size: 3.5rem;
}

.translateBtn {
  cursor: pointer;
  width: 50px;
  height: 50px;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  position: absolute;
  z-index: 2;
  right: 4%;
  top: 31%;
  font-size: 1.8rem;
  display: none;
  transition: 0.2s;
}

.translateBtn > ion-icon {
  color: white;
}

.translateBtn:hover {
  background-color: grey;
}

textarea[name="Morsefield"]:not(:placeholder-shown) ~ .translateBtn {
  display: flex;
}

@media (max-width: 540px) {
  form {
    align-items: center;
    width: 350px;
  }
  textarea {
    width: 280px;
    height: 200px;
  }
  .translateBtn {
    right: 10%;
    top: 30%;
  }
  nav > h1 {
    font-size: 2.3rem;
  }
}

.sos {
  --main-text-color: white;
  --bg-color: #EE3E3E;
  --secondary-bg-color: #F1F1F1;
  --main-text-color-dark: white;
  --bg-color-dark: #EE3E3E;
  --secondary-bg-color-dark: #F1F1F1;
}

.classic {
  --main-text-color: #000000;
  --bg-color: #FFFADA;
  --secondary-bg-color: #D4A373;
  --main-text-color-dark: #000000;
  --bg-color-dark: #FFFADA;
  --secondary-bg-color-dark: #D4A373;
}

.military {
  --main-text-color: white;
  --bg-color: #588157;
  --secondary-bg-color: #283618;
  --main-text-color-dark: white;
  --bg-color-dark: #588157;
  --secondary-bg-color-dark: #283618;
}

var InputTextArea = document.getElementById("morseTextArea");
var OutputTextArea = document.getElementById("textArea");
var translateButton = document.querySelector(".translateBtn");
var input = InputTextArea.value.toString("");
var isInputMorse = true;
var swapBtn = document.getElementById("swapBtn");
let secretCount = parseInt(document.getElementById("count").innerHTML, 10);

var morseRef = {
  ".-": "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",
  "/": " ",
  "--..--": ",",
  "..--..": "?",
  "-.-.-.": ";",
  "---...": ":",
  "-....-": "-",
  "-..-.": "/",
  ".----.": "'",
  "-.-.--": "!",
};

var reversedMorseRef = {};

for (var key in morseRef) {
  if (morseRef.hasOwnProperty(key)) {
    reversedMorseRef[String(morseRef[key])] = key;
  }
}

console.log(morseRef);

console.log(reversedMorseRef);

function checkIfValid() {
  input = InputTextArea.value.toString("");
  if (isInputMorse && input.match(/[a-zA-Z0-9_@#$%^&*()]/g) === null) {
    morseToText();
    return console.log(input.split(" "));
  }
  if (!isInputMorse) {
    textToMorse();
    return console.log(input.split(" "));
  } else {
    InputTextArea.value = "";
  }
}

function morseToText() {
    let str = input
    .split(" ")
    .map((code) => morseRef[code])
    .join("");
    OutputTextArea.value = str;
    console.log(str);
    lookForSecrets();
    
}


function lookForSecrets() {
  if (document.body.classList.contains('sos') === false && input.split(" ").map((code) => morseRef[code]).join("") === ("SOS")) {
    document.body.classList.add('sos');
    secretCount++;
    document.getElementById("count").innerHTML = secretCount;
  }
  if (document.body.classList.contains('classic') === false && input.split(" ").map((code) => morseRef[code]).join("") === ("WHAT HATH GOD WROUGHT")) {
    document.body.classList.add('classic')
    secretCount++;
    document.getElementById("count").innerHTML = secretCount;

  }
  if (document.body.classList.contains('military') === false && input.split(" ").map((code) => morseRef[code]).join("") === ("TORTURE")) {
    document.body.classList.add('military');
    secretCount++;
    document.getElementById("count").innerHTML = secretCount;

  }
}

function textToMorse() {
  let textStr = input
    .toUpperCase()
    .split("")
    .map((text) => reversedMorseRef[text])
    .join(" ");
  OutputTextArea.value = textStr;
  console.log(textStr);
}

translateButton.addEventListener("click", checkIfValid);

swapBtn.addEventListener("click", () => {
  isInputMorse = !isInputMorse;
  OutputTextArea.value = "";
  InputTextArea.value = "";
  if (!isInputMorse) {
    InputTextArea.setAttribute("placeholder", "Text(Input)");
    OutputTextArea.setAttribute("placeholder", "Morse(Output)");
  } else {
    InputTextArea.setAttribute("placeholder", "Morse(Input)");
    OutputTextArea.setAttribute("placeholder", "Text(Output)");
  }
});

This Pen is owned by Lensco825 on CodePen.

See more by @lensco825 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.