[Proyecto] Challenge 1 de encriptado | Alura Latam

Quiero compartir mi primer challenge, realizado con Tailwind, Js y HTML.

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="./output.css" rel="stylesheet" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="min-h-full">
    <nav class="bg-aluraBlue">
      <div class="flex h-16 items-center justify-between p-12">
        <div>
          <img
            src="/multimedia/Logo.png"
            alt="logo"
            class="w-12 sm:w-14 xl:w-20"
          />
        </div>
        <div class="rounded-full bg-blue-950 px-3 py-2 text-white">
          <a href="index.html">Iniciar de nuevo</a>
        </div>
      </div>
    </nav>

    <div class="mx-auto lg:mt-24 mt-10 max-w-7xl px-4 sm:px-6 lg:px-8">
      <div class="flex justify-center font-bold text-blue-900">
        Challenge 1 Alura Latam
      </div>
    </div>

    <div
      class="max-w-7xl mx-auto p-6 bg-white rounded-lg lg:flex gap-7 space-y-5 lg:space-y-0"
    >
      <div class="flex-1 bg-blue-500 text-white p-6 rounded-md shadow-lg">
        <p class="mb-4">Escriba el texto que desea desencriptar debajo</p>
        <input
          type="text"
          id="input-usuario"
          class="w-full h-44 p-2 bg-slate-200 text-gray-800 border border-gray-300 rounded-md focus:ring-blue-500"
        />

        <div class="flex flex-col md:flex-row gap-4 mt-5">
          <input
            type="button"
            value="Encriptar"
            class="bg-blue-950 text-white px-12 py-3 rounded-md"
            id="encriptar"
          />
          <input
            type="button"
            value="Desencriptar"
            class="bg-blue-200 text-blue-950 border-blue-950 border-1-4 px-12 py-3 rounded-md"
            id="desencriptar"
          />
        </div>
      </div>
      <div
        class="flex-1 bg-green-500 text-white p-6 rounded-md shadow-lg flex flex-col justify-center text-center"
      >
        <h2 class="mb-4">Mensaje encriptado</h2>
        <input
          type="text"
          id="input-encriptado"
          class="w-full h-44 p-2 rounded-md text-gray-800 bg-slate-200"
        />
        <div class="flex justify-center">
          <button
            class="bg-blue-200 text-blue-950 border-blue-950 border-1-4 px-12 py-3 rounded-md mt-10"
            id="copiar-texto"
          >
            Copiar
          </button>
        </div>
        <p id="mensaje"></p>
      </div>
    </div>
    <script type="module" src="copiar.js"></script>
    <script type="module" src="index.js"></script>
  </body>
</html>

/* 
Encriptador de texto

1. Capturar el texto ingresado por el usuario con el botón "encriptar"
2. Crear una función que reciba el texto y lo encripte con .replace y utilizar gi que capitaliza las palabras del input. 
3. Mostrar el texto encriptado en el input
4. Crear otra función que reciba el texto y desencripte el texto
5. Crear una función de copiar el texto del input recibido 


La letra "e" es convertida para "enter"
La letra "i" es convertida para "imes"
La letra "a" es convertida para "ai"
La letra "o" es convertida para "ober"
La letra "u" es convertida para "ufat"

Ejemplo: "hola" -> "hoberlai"

*/
function textoUsuario() {
  let texto = document.getElementById("input-usuario").value;
  let encriptado = texto
    .replace(/e/gi, "enter")
    .replace(/i/gi, "imes")
    .replace(/a/gi, "ai")
    .replace(/o/gi, "ober")
    .replace(/u/gi, "ufat");

  document.getElementById("input-encriptado").value = encriptado;
}

function desencriptar() {
  let texto = document.getElementById("input-usuario").value;
  let desencriptado = texto
    .replace(/enter/gi, "e")
    .replace(/imes/gi, "i")
    .replace(/ai/gi, "a")
    .replace(/ober/gi, "o")
    .replace(/ufat/gi, "u");

  document.getElementById("input-encriptado").value = desencriptado;
}

document.getElementById("encriptar").onclick = textoUsuario;
document.getElementById("desencriptar").onclick = desencriptar;

JS función de copiar


function copiarContenido() {
  let texto = document.getElementById("input-encriptado").value;

  navigator.clipboard
    .writeText(texto)
    .then(function () {
      let copiaExitosa = document.getElementById("mensaje");
      copiaExitosa.textContent = "Texto copiado al portapapeles";
    })
    .catch(function (err) {
      let copiaFallida = document.getElementById("mensaje");
      copiaFallida.textContent = "Error al copiar texto: " + err;
    });
}

document.addEventListener("DOMContentLoaded", function () {
  document
    .getElementById("copiar-texto")
    .addEventListener("click", copiarContenido);
});