Add files via upload

YuDiCC · Mar 26, 2024 · a5352f6 · a5352f6
1 parent 98ebebd
commit a5352f6
Show file tree

Hide file tree

Showing 9 changed files with 413 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1 +1,25 @@
-# ChallengeOne_Encriptador_de_Texto
+# Encriptador de Texto 💻
+
+> ¿Qué es un encriptador de texto?
+
+Un encriptador de texto cifra y oculta un mensaje mezclando sus letras de manera especial, lo que hace que parezca un rompecabezas. Solo veríamos palabras revueltas que no podríamos entender si no usáramos un Desencriptador que nos ayude a traducirlo.
+
+> Acerca del Proyecto
+
+Como primer proyecto, tenemos el Desafío 'Challenge One Principiante en Programación' - Construye un Encriptador de Texto para el Programa Oracle Next Education.
+
+[![LinkedIn](https://img.shields.io/badge/LinkedIn-%230077B5.svg?logo=linkedin&logoColor=white)](https://www.linkedin.com/in/yudi-aleyda-calan-chan-a40154277/) 
+
+## Versión Escritorio
+
+<img src="https://github.com/YuDiCC/ChallengeOne_Encriptador_de_Texto/blob/main/imagenes/escritorio.jpeg" alt="Encriptador"/>
+
+## Versión Móvil
+
+<p align="center">
+  <img src="https://github.com/YuDiCC/ChallengeOne_Encriptador_de_Texto/blob/main/imagenes/movil.png" alt="Imagen de ejemplo" width="30%"/>
+</p>
+
+
+
+
diff --git a/imagenes/Responsividad.jpeg b/imagenes/Responsividad.jpeg
diff --git a/imagenes/escritorio.png b/imagenes/escritorio.png
diff --git a/imagenes/fondo.jpg b/imagenes/fondo.jpg
diff --git a/imagenes/movil.png b/imagenes/movil.png
diff --git a/imagenes/tablet.png b/imagenes/tablet.png
diff --git a/index.html b/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Encriptador</title>
+    <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">
+    </header>
+
+    <main>
+        <section class="section-1">
+            <textarea class="text-area" cols="32" rows="10" placeholder="Ingrese el texto aquí"></textarea>
+
+            <div class="botones">
+                <button class="btn-encriptar" onclick="btnEncriptador()">Encriptar</button>
+                <button class="btn-desencriptar" onclick="btnDesencriptador()">Desencriptar</button>
+            </div>
+        </section>
+
+        <section class="section-2">
+            <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>
+            </div>
+
+        </section>
+    </main>
+
+    <div class="notification">
+        <div class="notification-content">
+            <h4 class="notification-title">Texto copiado</h4>
+        </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>
+        </div>
+    </div>
+
+    <footer>
+        <p class="derechos-de-autor">Creado por Yudi Calan Chan (2023) &#169;</p>
+
+        <div class="redesSociales">
+
+            <a href="https://github.com/YuDiCC" target="_blank">
+                <i class="bi bi-github"></i>
+            </a>
+
+            <a href="https://www.linkedin.com/in/yudi-aleyda-calan-chan-a40154277/" target="_blank">
+                <i class="bi bi-linkedin"></i>
+            </a>
+
+            <a href="https://www.instagram.com/ale_calan04/" target="_blank">
+                <i class="bi bi-instagram"></i>
+            </a>
+
+            <a href="mailto:7243@itescam.edu.mx" target="_blank">
+                <i class="bi bi-envelope-at"></i>
+            </a>
+        </div>
+    </footer>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,87 @@
+const textArea = document.querySelector(".text-area");
+const mensaje = document.querySelector(".mensaje");
+const btnCopiar = document.querySelector(".btn-copiar");
+const btnBorrar = document.querySelector(".btn-borrar");
+const notification = document.querySelector(".notification");
+
+// '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 btnEncriptador() {
+    if (textArea.value.trim() === "") {
+        mostrarMensaje("No hay texto para encriptar");
+        return;
+    }
+
+    const textoEncriptado = encriptar(textArea.value);
+    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
+}
+
+function btnDesencriptador() {
+    if (textArea.value.trim() === "") {
+        mostrarMensaje("No hay texto para desencriptar");
+        return;
+    }
+
+    const textoDesencriptado = desencriptar(textArea.value)
+    mensaje.value = textoDesencriptado
+    textArea.value = "";
+    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
+}
+
+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 = "";
+    mensaje.value = "";
+    mensaje.style.backgroundImage = "";
+});
+
+function mostrarNotificacion() {
+    notification.classList.add("active");
+    setTimeout(function () {
+        notification.classList.remove("active");
+    }, 3000);
+}