Initial commit

2gutierrez · Feb 24, 2024 · 1d7eaab · 1d7eaab
commit 1d7eaab
Show file tree

Hide file tree

Showing 5 changed files with 281 additions and 0 deletions.
diff --git a/Logo.png b/Logo.png
diff --git a/app.js b/app.js
@@ -0,0 +1,83 @@
+
+
+const campoTexto = document.querySelector("#textoIntroducido");
+const resultado =document.querySelector("#resultado");
+
+const matriz = [
+  ["e", "enter"],
+  ["i", "imes"],
+  ["a", "ai"],
+  ["o", "ober"],
+  ["u", "ufat"],
+];
+
+
+
+
+function botonE() {
+
+alert("Recuerda no usar letras mayúsculas ni caracteres especiales");
+  const texto = encriptar(campoTexto.value);
+  resultado.value = texto;
+
+
+ // console.log(texto);
+}
+
+
+function encriptar(fraseEncriptada) {
+for (let i = 0; i < matriz.length; i++) {
+  if(fraseEncriptada.includes(matriz[i][0])) {
+    fraseEncriptada = fraseEncriptada.replaceAll(
+      matriz[i][0],
+      matriz[i][1],
+    );
+  }
+}
+
+
+return fraseEncriptada;
+
+}
+
+
+
+
+
+
+function botonD() {
+ // alert("Desencriptando");
+  const texto = desencriptar(campoTexto.value);
+ // console.log(texto); 
+  resultado.value = texto;
+
+}
+
+function desencriptar(fraseDesEncriptada) {
+  for (let i = 0; i < matriz.length; i++) {
+    if(fraseDesEncriptada.includes(matriz[i][0])) {
+      fraseDesEncriptada = fraseDesEncriptada.replaceAll(
+        matriz[i][1],
+        matriz[i][0],
+      );
+    }
+  }
+
+  return fraseDesEncriptada;
+
+  }
+
+  function botonC() {
+    const copiarTexto = document.getElementById("resultado");
+    copiarTexto.select();
+    navigator.clipboard.writeText(copiarTexto.value);
+  }
+
+
+
+function copiar() {
+ alert("Texto Copiado");
+
+}
+
+
diff --git a/index.html b/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+
+<html lang="es">
+
+    <head>
+        <meta charset="UTF-8">
+        <title>Encriptador de Texto</title>
+        <link rel="stylesheet" href="reset.css">
+        <link rel="stylesheet" href="style.css">
+
+    </head>
+
+    <body>
+
+        <header>
+            <img src="Logo.png" alt="Logo-Alura" title="Logo Alura" class="logo">
+            <h1>Encriptador secreto de texto</h1>      
+
+        </header>
+
+        <main>
+
+            <section>
+                <label for="textoIntroducido"></label>
+                <textarea  id="textoIntroducido" class="campoTexto"
+                placeholder="Ingrese su texto aqui:" required maxlength="300"></textarea>
+
+                <div class="boton">
+                    <button class="botonE" onclick="botonE()">Encriptar</button>
+
+                    <button class="botonD" onclick="botonD()">Desencriptar</button>
+
+                    <!-- <input type="submit" value="Encriptar" class="botonE" onclick="encriptar()">
+                    <input type="submit" value="Desencriptar" class="botonD" onclick="desencriptar()"> -->
+                </div>
+            </section>
+            <!--usar comando: action="app.js" method="POST" ??? whitin form?? --> 
+
+            <section>
+                <label for="resultado"></label>
+                <textarea  id="resultado" class="resultado" rows="10" cols="40"
+                placeholder="Resultado:" readonly></textarea>
+
+            <div class="boton">
+                <button class="botonC" onclick="botonC()">Copiar</button>
+            </div>
+
+                <!--<input type="submit" value="Copiar" class="botonC" onclick="copiar()">-->
+
+            </section>
+
+
+        </main>
+
+
+        <footer>
+            <p>Developed by: Jesús A. Gutiérrez M. &copy; 2024</p>    
+        </footer>
+
+        <script src="app.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/style.css b/style.css
@@ -0,0 +1,80 @@
+body {
+    background-image: linear-gradient(#eff5f5, #97ade8);
+
+}
+
+
+h1{
+    text-align: center;
+    font-size: 40px;
+    padding-top: 30px;
+}
+
+
+.logo{
+    position: absolute;
+    top: 25px;
+    left: -35px;
+    display: block;
+}
+
+
+
+footer{
+
+    font-family:'Times New Roman', Times, serif;
+    font: size 10px;
+    text-align: right;
+    padding-top: 1%;
+    padding-right: 20px;
+
+}
+
+.campoTexto{
+    width: 28%; height: 28%;
+    margin-top: 40px;margin-left: 36%;
+    position: absolute;
+    border: 3px solid blue;
+    text-align: center;
+
+    font-size: medium;
+    font-family: Arial, Helvetica, sans-serif;
+    padding: 5px; resize: none;
+
+}
+
+.botonE{
+    position: absolute;
+    margin-left: 36%; margin-top: 280px; margin-right: 10px;
+    padding: 10px;
+    cursor: pointer;
+}
+
+.botonD{
+    position: absolute;
+    margin-top: 280px; margin-left: 59%;
+    padding: 10px;
+    cursor: pointer;
+
+}
+
+.resultado{
+    width: 28%; height: 28%;
+    margin-top: 350px;margin-left: 36%;
+    position: absolute;
+    border: 3px solid blue;
+    text-align: center;
+    font-size: medium;
+    font-family: Arial, Helvetica, sans-serif;
+    padding: 5px; resize: none;
+
+}
+
+.botonC{
+    margin-top: 580px;
+    margin-left: 49%;
+    padding: 10px;
+    cursor: pointer;
+}
+
+