JSFiddle - React, Tailwind, and code Playground

by xxxvvvxxx

HTML

<h2 id="answer"></h2>
<table id="table">
	<tbody id="tbody">
	</tbody>
</table>

CSS

table {
    border-collapse: collapse;
    display:none;
}
table td {
    border: 1px solid #ff0000;
    min-width:50px;
    text-align:center;
    text-transform: uppercase;
}

JavaScript

var arr = ["·-", "-···", "-·-·", "-··", "·", "··-·","--·", "····", "··", "·---", "-·-", "·-··", "--", "-·", "---", "·--·", "--·-", "·-·", "···", "-", "··-", "···-", "·--", "-··-", "-·--", "--··"];
var ascii = [];
var answer0 = "", answer = "", text="";
var string = prompt("Enter a string:").toLowerCase();

for (var i of string){
    ascii.push(i.charCodeAt());
}

for (var i of ascii){
    if (i == 32){
    	answer0 += "<td></td>";
    	answer += "<td></td>";
    	text += "&nbsp;".repeat(3);
    }
    else{
        answer0 += "<td>" + String.fromCharCode(i) + "</td>";
    	answer += "<td>" + arr[i-97] + "</td>";
    	text += (arr[i-97] + " ");
    }
}

document.getElementById("answer").innerHTML = text;
document.getElementById("tbody").innerHTML = "<tr>"+ answer0 +"</tr>" + "<tr>"+ answer +"</tr>";

var item = document.getElementById("answer");
item.addEventListener("mouseover", func, false);

function func() {
	var table = document.getElementById("table");
	table.setAttribute("style", "display:block;")
}