Add files via upload

Dublioros · Apr 26, 2023 · 788b80d · 788b80d
1 parent 30cee89
commit 788b80d
Show file tree

Hide file tree

Showing 5 changed files with 547 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <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=Poppins&display=swap" rel="stylesheet">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Proyecto Encriptador</title>
+</head>
+<body>
+     <!-- Encabezado Logo y Titulo -->
+    <header>
+
+        <div class="encabezado">
+            <a href="https://www.aluracursos.com/" target="_blank"><i class="fa-brands fa-amilia fa-beat fa-2xl" style="color: #fffafa;"></i></a>
+            <h1 class="titulo-principal" id="titulo-principal">Challange One: Encriptador de Texto</h1>
+        </div>
+
+    </header>
+
+    <!-- Proyecto Encriptador -->
+    <main id="main">
+        <!-- Seccion IZQ para ingresar el texto -->
+        <div class="div-section">
+            <section class="ingreso-texto-iz">
+
+                <h2 id="subtitulo-izquiera">Inicializador de Codificación</h2>
+                <textarea class="texto-codigo" name="texto-codigo" id="texto-codigo" cols="50" rows="15" placeholder="Ingrese su código solo en minúsculas y sin acentos" style="resize: none;" required id="texto-codigo" onKeyUp="document.getElementById(this.id).value=document.getElementById(this.id).value.toLowerCase()"></textarea>
+
+                <div class="btn">
+                    <input class ="btn-encriptar" type="button" value="Encriptar" onclick="encriptar()">
+                    <input class ="btn-desencriptar" type="button" value="Desencriptar" onclick="desencriptar()">
+                </div>
+
+            </section>
+
+            <!-- Seccion DER para mostrar el texto -->
+            <section class="muestra-texto-der">
+
+                <div class="mostrar-mensaje" id="mostrar-mensaje">
+                    <h2 id="mostrar-texto">Analizando</h2>
+                    <textarea readonly class="area-mensaje" name="mensaje" id="area-mensaje" cols="50" rows="15" style="resize: none;"></textarea >
+                </div>
+
+                <div class="btn">
+                    <input class ="btn-copiar" type="button" value="Copiar" onclick="copiar()">
+                </div>
+
+            </section>
+        </div>
+    </main>
+
+
+    <!-- Pie de Pagina, derechos reservados y links a redes sociales -->
+    <footer>
+        <!-- Enlances de redes sociales -->
+        <div class="social-media" id="div">
+            <a href="https://www.facebook.com/aluracursoslatam" target="_blank"><i class="fa-brands fa-facebook fa-bounce" ></i></a>
+            <a href="https://github.com/Dublioros" target="_blank"><i class="fa-brands fa-github fa-bounce"></i></a>
+        </div>
+
+        <span class="span-footer">Copyright &copy; 2023 Jose Carlo Gutierrez Schweitzer, todos los derechos reservados.</span>
+    </footer>
+
+    <!-- Codigo Script -->
+    <script src="script.js"></script> 
+    <script src="https://kit.fontawesome.com/132d1ba02a.js" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
+</body>
+</html>
diff --git a/reset.css b/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
diff --git a/script.js b/script.js
@@ -0,0 +1,65 @@
+//Secure Cookies
+document.cookie = "promo_shown=1; Max-Age=2600000; Secure";
+
+//Texto a LowerCase
+function min(e) {
+    e.value = e.value.toLowerCase();
+}
+
+// Solo Letras y Espacio
+document.getElementById("texto-codigo").addEventListener("keypress",verificar);
+function verificar(e) {
+    if(e.key.match(/[a-z\s]/i)===null) {
+        // Si la tecla pulsada no es la correcta se elimina
+        e.preventDefault();
+    }
+}
+
+// BTN ENCRIPTAR
+function encriptar() {
+    const texto = document.getElementById("texto-codigo").value.toLowerCase();
+    const textoCodificado = texto.replace(/e/gi, "enter")
+                                .replace(/i/gi, "imes")
+                                .replace(/a/gi, "ai")
+                                .replace(/o/gi, "ober")
+                                .replace(/u/gi, "ufar");
+
+    if (texto.length > 0) {
+      document.getElementById("mostrar-texto").textContent = "Encriptado Exitoso";
+      document.getElementById("area-mensaje").textContent = textoCodificado;
+    } else {
+      swal("Alerta", "Debes ingresar un texto", "warning");
+    }
+  }
+
+
+//BTN DESENCRIPTAR
+function desencriptar() {
+    const texto = document.getElementById("area-mensaje").value.toLowerCase();
+    const textoCodificado = texto.replace(/enter/gi, "e")
+                                 .replace(/imes/gi, "i")
+                                 .replace(/ai/gi, "a")
+                                 .replace(/ober/gi, "o")
+                                 .replace(/ufar/gi, "u");
+
+    if (texto.length > 0) {
+      document.getElementById("mostrar-texto").textContent = "Desencriptado Exitoso";
+      document.getElementById("area-mensaje").textContent = textoCodificado;
+    } else {
+      swal("Alerta", "Debes ingresar un texto", "warning");
+    }
+  }
+
+
+//BTN COPIAR
+async function copiar() {
+    const textoCodificado = document.getElementById("area-mensaje").value;
+
+    if (textoCodificado.length > 0) {
+      await navigator.clipboard.writeText(textoCodificado);
+      document.getElementById("mostrar-texto").textContent = "Texto Copiado con Éxito";
+    } else {
+      swal("Alerta", "No hay texto para copiar", "warning");
+    }
+  }
+
diff --git a/style.css b/style.css