Add files via upload

YuDiCC · Mar 28, 2024 · 97c5178 · 97c5178
1 parent 377a8a8
commit 97c5178
Show file tree

Hide file tree

Showing 14 changed files with 210 additions and 53 deletions.
diff --git a/imagenes/Logo.webp b/imagenes/Logo.webp
diff --git a/imagenes/Muñeco.webp b/imagenes/Muñeco.webp
diff --git a/imagenes/fondo.webp b/imagenes/fondo.webp
diff --git a/imagenes/icon.png b/imagenes/icon.png
diff --git a/imagenes/pantallas/Responsividad.jpeg b/imagenes/pantallas/Responsividad.jpeg
diff --git a/imagenes/pantallas/escritorio.png b/imagenes/pantallas/escritorio.png
diff --git a/imagenes/pantallas/movil.png b/imagenes/pantallas/movil.png
diff --git a/imagenes/pantallas/tablet.png b/imagenes/pantallas/tablet.png
diff --git a/imagenes/svg/Logo.svg b/imagenes/svg/Logo.svg
diff --git a/imagenes/svg/Muñeco.svg b/imagenes/svg/Muñeco.svg
diff --git a/imagenes/svg/fondo.jpg b/imagenes/svg/fondo.jpg
diff --git a/index.html b/index.html
@@ -4,25 +4,25 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Encriptador de texto || YuDiCC</title>
+    <meta name="description" content="Este es un encriptador de texto desarrollado por YuDiCC. Convierte texto ingresado a través de reglas predefinidas.">
+    <meta name="keywords" content="encriptador de texto, encriptación, desencriptación, seguridad, YuDiCC">
+    <meta name="author" content="Yudi Calan Chan">
+    <link rel="icon" href="imagenes/icon.png" type="image/png">
     <link rel="stylesheet" href="style.css">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Goldman&family=Montserrat+Alternates&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
-
-    <script src="https://kit.fontawesome.com/1da14e9f64.js" crossorigin="anonymous"></script>
+
 </head>
 <body>
     <header>
-        <img class="logo" src="imagenes/Logo.svg" alt="logo de alura" title="Logo de alura">
+        <img class="logo" src="imagenes/Logo.webp" alt="Logo de Alura" title="Logo de alura">
     </header>
 
     <main>
         <section class="section-1">
-            <textarea class="text-area" cols="32" rows="10" placeholder="Ingrese el texto aquí"></textarea>
+            <textarea class="text-area" cols="32" rows="10" placeholder="Ingrese el texto aquí" autofocus></textarea>
 
             <div class="botones">
                 <button class="btn-encriptar" onclick="btnEncriptador()">Encriptar</button>
+
                 <button class="btn-desencriptar" onclick="btnDesencriptador()">Desencriptar</button>
             </div>
         </section>
@@ -31,22 +31,23 @@
             <textarea class="mensaje" cols="32" rows="10" readonly></textarea>
 
             <div class="botones-mensaje">
-                <button class="btn-copiar" title="copiar texto" onclick="copiar()"><i class="fa-regular fa-paste" id="icon-copiar"></i></button>
-                <button class="btn-borrar" title="borrar texto" onclick="borrar()"><i class="bi bi-trash" id="icon-borrar"></i></button>
+                <button class="btn-copiar" title="Copiar texto" onclick="copiar()"><i class="fa-regular fa-paste" id="icon-copiar"></i></button>
+
+                <button class="btn-borrar" title="Borrar texto" onclick="borrar()"><i class="fa-regular fa-trash-can" id="icon-borrar"></i></button>
             </div>
 
         </section>
     </main>
 
     <div class="notification">
         <div class="notification-content">
-            <h4 class="notification-title">Texto copiado</h4>
+            <h2 class="notification-title">Texto copiado</h2>
         </div>
     </div>
 
     <div>
         <div>
-            <h6 class="informacion"><i class="fa-solid fa-circle-info" id="icon-info" title="Información de uso"></i> Solo letras minúsculas y sin acentos</h6>
+            <h3 class="informacion"><i class="fa-solid fa-circle-info" id="icon-info" title="Información de uso"></i> Solo letras minúsculas y sin acentos</h3>
         </div>
     </div>
 
@@ -56,23 +57,24 @@ <h6 class="informacion"><i class="fa-solid fa-circle-info" id="icon-info" title=
         <div class="redesSociales">
 
             <a href="https://github.com/YuDiCC" target="_blank">
-                <i class="bi bi-github"></i>
+                <i class="fa-brands fa-github" title="Github"></i>
             </a>
 
             <a href="https://www.linkedin.com/in/yudicc/" target="_blank">
-                <i class="bi bi-linkedin"></i>
+                <i class="fa-brands fa-linkedin" title="Linkedin"></i>
             </a>
 
             <a href="https://www.instagram.com/ale_calan04/" target="_blank">
-                <i class="bi bi-instagram"></i>
+                <i class="fa-brands fa-instagram" title="Instagram"></i>
             </a>
 
             <a href="mailto:7243@itescam.edu.mx" target="_blank">
-                <i class="bi bi-envelope-at"></i>
+                <i class="fa-regular fa-envelope" title="Correo electrónico"></i>
             </a>
         </div>
     </footer>
 
     <script src="script.js"></script>
+    <script src="https://kit.fontawesome.com/1da14e9f64.js" crossorigin="anonymous"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -4,74 +4,85 @@ const btnCopiar = document.querySelector(".btn-copiar");
 const btnBorrar = document.querySelector(".btn-borrar");
 const notification = document.querySelector(".notification");
 
+const matrizCodigo = [
+    ["e", "enter"],
+    ["i", "imes"],
+    ["a", "ai"],
+    ["o", "ober"],
+    ["u", "ufat"]
+];
+
 // '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"'
 
+
+function tieneCaracteresEsp(texto) {
+    const regex = /^[a-z]+$/;
+    return !regex.test(texto);
+}
+
 function btnEncriptador() {
-    if (textArea.value.trim() === "") {
-        mostrarMensaje("No hay texto para encriptar");
+    const textoActual = textArea.value.trim().toLowerCase();
+    if (!textoActual) {
+        alert("No hay texto para encriptar");
+        return;
+    }
+
+    if (tieneCaracteresEsp(textoActual)) {
+        alert("El texto contiene caracteres especiales o acentos.");
         return;
     }
 
-    const textoEncriptado = encriptar(textArea.value);
+    const textoEncriptado = encriptar(textoActual);
     mensaje.value = textoEncriptado;
     textArea.value = "";
     mensaje.style.backgroundImage = "none";
 }
 
 function encriptar(stringEncriptada) {
-    let matrizCodigo = [["e", "enter"], ["i", "imes"], ["a", "ai"], ["o", "ober"], ["u", "ufat"]];
-    stringEncriptada = stringEncriptada.toLowerCase()
-
-    for(let i = 0; i < matrizCodigo.length; i++) {
-        if(stringEncriptada.includes(matrizCodigo[i][0])) {
-            stringEncriptada = stringEncriptada.replaceAll(matrizCodigo[i][0], matrizCodigo[i][1])
-        }
-    }
-
-    return stringEncriptada
+    matrizCodigo.forEach(([original, reemplazo]) => {
+        stringEncriptada = stringEncriptada.replaceAll(original, reemplazo);
+    });
+    return stringEncriptada;
 }
 
 function btnDesencriptador() {
-    if (textArea.value.trim() === "") {
-        mostrarMensaje("No hay texto para desencriptar");
+    const textoEncriptado = textArea.value.trim().toLowerCase();
+    if (!textoEncriptado) {
+        alert("No hay texto para desencriptar");
         return;
     }
+
+    if (tieneCaracteresEsp(textoEncriptado)) {
+        alert("El texto contiene caracteres especiales o acentos.");
+        return;
+
+    }
 
-    const textoDesencriptado = desencriptar(textArea.value)
-    mensaje.value = textoDesencriptado
+    const textoDesencriptado = desencriptar(textoEncriptado);
+    mensaje.value = textoDesencriptado;
     textArea.value = "";
-    mensaje.style.backgroundImage = "none"
+    mensaje.style.backgroundImage = "none";
 }
 
 function desencriptar(stringDesEncriptada) {
-    let matrizCodigo = [["e", "enter"], ["i", "imes"], ["a", "ai"], ["o", "ober"], ["u", "ufat"]];
-    stringDesEncriptada = stringDesEncriptada.toLowerCase()
-
-    for(let i = 0; i < matrizCodigo.length; i++) {
-        if(stringDesEncriptada.includes(matrizCodigo[i][1])) {
-            stringDesEncriptada = stringDesEncriptada.replaceAll(matrizCodigo[i][1], matrizCodigo[i][0])
-        }
-    }
-
-    return stringDesEncriptada
+    matrizCodigo.forEach(([original, reemplazo]) => {
+        stringDesEncriptada = stringDesEncriptada.replaceAll(reemplazo, original);
+    });
+    return stringDesEncriptada;
 }
 
-function mostrarMensaje(mensaje) {
-    alert(mensaje);
-}
 
-//Botón de copiar
+
 btnCopiar.addEventListener("click", function () {
     mensaje.select();
     document.execCommand("copy");
     mostrarNotificacion();
 });
 
-//Botón de borrar
 btnBorrar.addEventListener("click", function () {
     alert("¿Estás seguro que deseas borrar el texto?");
     textArea.value = "";
@@ -84,4 +95,4 @@ function mostrarNotificacion() {
     setTimeout(function () {
         notification.classList.remove("active");
     }, 3000);
-}
+}
diff --git a/style.css b/style.css
@@ -1,10 +1,11 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
 * {
     font-weight: 400;
     font-size: 14px;
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-    font-family: 'Goldman', cursive;
     font-family: 'Montserrat Alternates', sans-serif;
 }
 
@@ -13,7 +14,8 @@ html, body{
 }
 
 body{
-    background-image: url(imagenes/fondo.jpg);
+    background-color:#001329;
+    background-image: url(imagenes/fondo.webp);
     background-size: contain;
     background-repeat: repeat;
     background-attachment: fixed;
@@ -64,7 +66,7 @@ main{
 
 .mensaje {
     background: white;
-    background-image: url("imagenes/Muñeco.svg");
+    background-image: url(imagenes/Muñeco.webp);
     background-color: transparent;
     backdrop-filter: blur(30px);
     background-size: contain;