Cargando proyecto ionicial

smanchile · Aug 27, 2024 · b3e7ea8 · b3e7ea8
1 parent 0128590
commit b3e7ea8
Show file tree

Hide file tree

Showing 5 changed files with 488 additions and 0 deletions.
diff --git a/assets/logo.png b/assets/logo.png
diff --git a/assets/muneco.png b/assets/muneco.png
diff --git a/encriptador.js b/encriptador.js
@@ -0,0 +1,82 @@
+const entrada = document.querySelector('.contenido__entrada__cuadro');
+const mensaje = document.querySelector('.contenido__resultado__cuadro');
+const tituloMensaje = document.querySelector('.contenido__resultado__mensaje__titulo');
+const textoMensaje = document.querySelector('.contenido__resultado__mensaje__texto');
+const btnCopiar = document.querySelector('.contenido__resultado__botones');
+
+
+function reiniciar(){
+  entrada.value = '';
+  mensaje.value = '';
+  mensaje.style.backgroundImage = 'url("/assets/muneco.png")';
+  tituloMensaje.style.display = 'flex';
+  textoMensaje.style.display = 'flex';
+  btnCopiar.style.display = 'none';
+}
+
+function btnEncriptar(){
+  const textoEncriptado = encriptar(entrada.value);
+
+  mensaje.style.backgroundImage = 'none';
+  tituloMensaje.style.display = 'none';
+  textoMensaje.style.display = 'none';
+  console.log(entrada.value);
+  if (validaEntrada(entrada.value)){
+    mensaje.value = textoEncriptado;
+    btnCopiar.style.display = 'flex';
+  } else {
+    mensaje.value = "Sólo se permite letras minúsculas y sin acento";
+    mensaje.style.textTransform = 'inherit';
+  };
+
+
+}
+
+function btnDesencriptar(){
+  const textoDesencriptado = desencriptar(entrada.value);
+  mensaje.style.backgroundImage = 'none';
+  tituloMensaje.style.display = 'none';
+  textoMensaje.style.display = 'none';
+  if (validaEntrada(entrada.value)){
+    mensaje.value = textoDesencriptado;
+    btnCopiar.style.display = 'flex';
+  } else {
+    mensaje.value = "Sólo se permite letras minúsculas y sin acento";
+    mensaje.style.textTransform = 'inherit';
+  }
+
+}
+
+function encriptar(stringEncriptado) {
+  let matrizCodigo = [["e","enter"],["i","imes"],["a","ai"],["o","ober"],["u","ufat"]];
+  stringEncriptado = stringEncriptado.toLowerCase()
+
+  for(let i=0; i < matrizCodigo.length; i++){
+    if(stringEncriptado.includes(matrizCodigo[i][0])){
+      stringEncriptado = stringEncriptado.replaceAll(matrizCodigo[i][0],matrizCodigo[i][1]);
+    }
+  }
+  return stringEncriptado
+}
+
+function desencriptar(stringDesencriptado) {
+  let matrizCodigo = [["e","enter"],["i","imes"],["a","ai"],["o","ober"],["u","ufat"]];
+    stringDesencriptado= stringDesencriptado.toLowerCase()
+
+    for(let i=0; i < matrizCodigo.length; i++){
+      if(stringDesencriptado.includes(matrizCodigo[i][1])){
+        stringDesencriptado = stringDesencriptado.replaceAll(matrizCodigo[i][1],matrizCodigo[i][0]);
+      }
+    }
+    return stringDesencriptado
+}
+
+function copiarTexto(){
+  mensaje.select();
+  document.execCommand("copy");
+}
+
+function validaEntrada(input){
+  const regex = /^[a-z\s]+$/;
+  return regex.test(input);
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Encriptador de Texto</title>
+  <link rel="stylesheet" href="./styles/style.css">
+</head>
+<body>
+  <header class="header">
+    <img class="header__imagen" src="./assets/logo.png" alt="Logo Alura">
+  </header>
+  <main class="contenido">
+    <section class="contenido__entrada">
+      <textarea class="contenido__entrada__cuadro" onclick="reiniciar()"  cols="30" rows="10"  placeholder="Ingrese el texto aqui" ></textarea>
+      <div class="contenido__entrada__informacion">
+        <p class="contenido__entrada__informacion__texto">Solo letras minúsculas y sin acentos</p>
+      </div>
+      <div class="contenido__entrada__botones">
+        <button class="contenido__entrada__botones__encriptador" onclick="btnEncriptar();">Encriptar</button>
+        <button class="contenido__entrada__botones__desencriptador" onclick="btnDesencriptar();">Desincriptar</button>
+      </div>
+    </section>
+    <section class="contenido__resultado">
+      <textarea id="resultado"  class="contenido__resultado__cuadro" cols="20" rows="10" ></textarea>
+      <div class="contenido__resultado__mensaje">
+        <h6 class="contenido__resultado__mensaje__titulo">Ningún mensaje fue encontrado</h6>
+        <p class="contenido__resultado__mensaje__texto">Ingresa el texto que desees encriptar o desencriptar.</p>
+      </div>
+      <div class="contenido__resultado__botones">
+        <button class="contenido__resultado__copiar" onclick="copiarTexto();">Copiar</button>
+      </div>
+
+    </section>
+  </main>
+  <footer class="footer">
+    <p class="footer__texto">Desarrollado por <a href="https://www.linkedin.com/in/andr%C3%A9s-aguilar-4bb01254/" target="_blank">Andrés Aguilar</a>  @2024</p>
+  </footer>
+
+  <script src="encriptador.js"></script>
+
+
+</body>
+</html>