JSFiddle - React, Tailwind, and code Playground

by SHELDON PASCIAK

HTML

<html>
<head>

</head>
<p>
Morse Code
</p>
<div id="word">

</div>

<div id="letter">

</div><div id="code">

</div>
<div id="flash" style="height:200px;">

</div>
<div id='fun'>

</div>
</html>

JavaScript

let letterCodes = {
  "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": ["-", "-", ".", "."]
}

const pause = ms => new Promise(resolve => setTimeout(resolve, ms));

const sleepForMs = async (ms) => {
  await pause(ms);
}

let word = 'MERRY CHRISTMAS';

let functionCalls = '';

for (let i = 0; i < word.length; i++) {
  let llll = word[i];
  if (llll === ' ') {
    functionCalls += 'show_word_pause();\n<br>';
  } else {
    let arrayOfDotDash = letterCodes[llll];
    for (let j = 0; j < arrayOfDotDash.length; j++) {
      let dotordash = arrayOfDotDash[j];
      if (dotordash === '.') {
        functionCalls += 'show_dot();\n<br>';
      }
      if (dotordash === '-') {
        functionCalls += 'show_dash();\n<br>';
      }
      functionCalls += 'show_letter_pause();\n<br>';
    }
  }
}

document.getElementById('fun').innerHTML = functionCalls;

const flash = async (word) => {

  document.getElementById("word").innerText = word;
  await sleepForMs(1000);
  for (var i = 0; i < word.length; i++) {
    let letter = word[i];
    let array = letterCodes[letter];
    for (var j = 0; j < array.length; j++) {
      let dotOrDash = array[j];
      document.getElementById("letter").innerText = letter;
      document.getElementById("code").innerText = array.join(" ");
      document.getElementById("flash").innerText = dotOrDash;
      document.getElementById("flash").style.backgroundColor = "red";
      if...