add character table

app.js

@@ -22,8 +22,16 @@ compressButton.addEventListener('click', () => {
     compressedResult.innerHTML = `
         <p>Tamanho após compressão: ${compressedSizeInBits} bits</p>
         <p>Texto convertido: ${huffmanResult.encodedText}</p>
+
     `;
 
+    let tableHTML = '<table><tr><th>Caractere</th><th>Código</th></tr>';
+    for (const char in huffmanResult.huffmanCodes) {
+        tableHTML += `<tr><td>${char}</td><td>${huffmanResult.huffmanCodes[char]}</td></tr>`;
+    }
+    tableHTML += '</table>';
+
+    compressedResult.innerHTML += tableHTML;
     openHuffmanTreeInNewTab(huffmanResult.huffmanTree);
 });
 
@@ -78,7 +86,7 @@ function generateHuffmanCodes(tree, prefix = '', codes = {}) {
 }
 
 function encodeText(text, huffmanCodes) {
-    return text.split('').map(char => huffmanCodes[char]).join('');
+    return text.split('').map(char => huffmanCodes[char]).join(' ');
 }
 
 function calculateCompressedSize(huffmanResult) {
@@ -167,4 +175,4 @@ function generateTreeHTML(node) {
     }
 
     return html;
-}
+}

style.css

@@ -58,6 +58,23 @@ button:hover {
     background-color: #0056b3;
 }
 
+table {
+    border-collapse: collapse;
+    margin: 10px 0;
+    width: 100%;
+    font-weight: 500;
+}
+table th,
+table td {
+    border: 1px solid #ccc;
+    padding: 8px;
+    text-align: left;
+}
+table th {
+    background-color: #f2f2f2;
+    font-weight: 500;
+}
+
 #compressedResult {
     margin-top: 20px;
     font-size: 18px;