first commit

deztri · Aug 26, 2024 · df666e9 · df666e9
commit df666e9
Show file tree

Hide file tree

Showing 8 changed files with 533 additions and 0 deletions.
diff --git a/Encriptador.js b/Encriptador.js
@@ -0,0 +1,115 @@
+const btnEncriptar = document.querySelector(".btn-encriptar");
+const txtEncriptar = document.querySelector(".encriptar");
+const aviso = document.querySelector(".textalert");
+const respuesta = document.querySelector(".evaluar");
+const contenido = document.querySelector(".tarjeta-visualizador");
+const btnCopiar = document.querySelector(".btn-copiar");
+const btnDesencriptar = document.querySelector(".btn-desencriptar");
+
+btnEncriptar.addEventListener("click", e=>{
+    e.preventDefault();
+    let texto = txtEncriptar.value;
+    let txt = texto.normalize("NFD").replace(/[$\.¿\?~!\¡@#%^&*()_|}\{[\]>\<:"`;,\u0300-\u036f']/g, "");
+
+    if(texto == ""){
+        aviso.style.background = "#0A3871";
+        aviso.style.color = "#FFFF";
+        aviso.style.fontWeight = "800";
+        aviso.textContent = "El campo de texto está vacio";
+
+        setTimeout(()=>{
+            aviso.removeAttribute("style");
+        },1500);
+    }
+
+    else if(texto !== txt){
+        aviso.style.background = "#0A3871";
+        aviso.style.color = "#FFFF";
+        aviso.style.fontWeight = "800";
+        aviso.textContent = "No usar caracteres especiales";
+
+        setTimeout(()=>{
+            aviso.removeAttribute("style");
+        },1500);
+    }
+
+    else if(texto !== texto.toLowerCase()){
+        aviso.style.background = "#0A3871";
+        aviso.style.color = "#FFFF";
+        aviso.style.fontWeight = "800";
+        aviso.textContent = "Solo letras minúsculas y sin acentos";
+
+        setTimeout(()=>{
+            aviso.removeAttribute("style");
+        },1500);
+    }
+
+    else{
+        texto = texto.replace(/e/mg, "enter");
+        texto = texto.replace(/i/mg, "imes");
+        texto = texto.replace(/a/mg, "ai");
+        texto = texto.replace(/o/mg, "ober");
+        texto = texto.replace(/u/mg, "ufat");
+
+        respuesta.innerHTML = texto;
+        btnCopiar.style.visibility = "inherit";
+        contenido.remove(); 
+    }
+});
+
+btnDesencriptar.addEventListener("click", e=>{
+    e.preventDefault();
+    let texto = txtEncriptar.value;
+    let txt = texto.normalize("NFD").replace(/[$\.¿\?~!\¡@#%^&*()_|}\{[\]>\<:"`;,\u0300-\u036f']/g, "");
+
+    if(texto == ""){
+        aviso.style.background = "#0A3871";
+        aviso.style.color = "#FFFF";
+        aviso.style.fontWeight = "800";
+        aviso.textContent = "El campo de texto no debe estar vacio";
+
+        setTimeout(()=>{
+            aviso.removeAttribute("style");
+        },1500);
+    }
+
+    else if(texto !== txt){
+        aviso.style.background = "#0A3871";
+        aviso.style.color = "#FFFF";
+        aviso.style.fontWeight = "800";
+        aviso.textContent = "No debe tener acentos y caracteres especiales";
+
+        setTimeout(()=>{
+            aviso.removeAttribute("style");
+        },1500);
+    }
+
+    else if(texto !== texto.toLowerCase()){
+        aviso.style.background = "#0A3871";
+        aviso.style.color = "#FFFF";
+        aviso.style.fontWeight = "800";
+        aviso.textContent = "El texto debe ser todo en minúscula";
+
+        setTimeout(()=>{
+            aviso.removeAttribute("style");
+        },1500);
+    }
+
+    else{
+        texto = texto.replace(/enter/mg, "e");
+        texto = texto.replace(/imes/mg, "i");
+        texto = texto.replace(/ai/mg, "a");
+        texto = texto.replace(/ober/mg, "o");
+        texto = texto.replace(/ufat/mg, "u");
+
+        respuesta.innerHTML = texto;
+        btnCopiar.style.visibility = "inherit";
+        contenido.remove(); 
+    }
+});
+
+btnCopiar.addEventListener("click", copiar = () => {
+    var contenido = document.querySelector(".evaluar").textContent;
+    navigator.clipboard.writeText(contenido);
+})
+
diff --git a/Imagenes/alert.png b/Imagenes/alert.png
diff --git a/Imagenes/linkedinicon.svg b/Imagenes/linkedinicon.svg
diff --git a/Imagenes/logo.png b/Imagenes/logo.png
diff --git a/Imagenes/logoicon.ico b/Imagenes/logoicon.ico
diff --git a/Imagenes/personaje.png b/Imagenes/personaje.png
diff --git a/Index.html b/Index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Encriptador</title>
+    <link rel="icon" type="image/x-Icon" href="./Imagenes/logoicon.ico">
+    <link rel="stylesheet" href="./Style.css"> 
+</head>
+<body>
+
+    <header>
+        <a href="" rel="">
+            <img src="./Imagenes/logo.png" alt="Logo de Alura" class="logo">
+        </a>
+    </header>
+
+    <main>
+        <section class="encriptador">
+
+            <textarea class="encriptar" placeholder="Ingrese el texto aquí"></textarea>
+
+            <div class="encriptador-aviso">
+
+                <img src="./Imagenes/alert.png" alt="Imagen Alerta" class="img-alert">
+                <p class="textalert">Solo letras minúsculas y sin acentos</p>
+
+            </div>
+            <div class="encriptar-desencriptar">
+                <button type="submit" class="btn-encriptar">Encriptar</button>
+                <button type="submit" class="btn-desencriptar">Desencriptar</button>
+
+            </div>
+        </section>
+
+        <section class="visualizador">
+
+            <div class="tarjeta-visualizador">
+                <img src="./Imagenes/personaje.png" alt="Imagen de Personaje" class="img-personaje">
+                <p class="texto-visualizador-uno">Ningún mensaje fue encontrado</p>
+                <p class="texto-visualizador-dos">Ingresa el texto que deseas encriptar o desencriptar</p>
+
+            </div>
+
+            <textarea type="mensaje" class="evaluar" readonly></textarea>
+            <button type="submit" class="btn-copiar">Copiar</button>
+
+
+        </section>
+    </main>
+    <footer>
+        <p class="desarrollador-por">Encriptador desarrollado por Jesus D. Ramirez</p>
+        <a href="https://www.linkedin.com/in/jesus-d-ramirez/" rel="">
+            <img src="./Imagenes/linkedinicon.svg" alt="Icono Linkedin" class="linkedin">
+        </a>
+    </footer>
+    <script src="Encriptador.js"></script>
+</body>
+</html>