desafio alura 01

encriptador del desafio alura del programa ONE //incompleto: falta el cambio de imagen cuando no hay texto escrito y hacerlo responsive.
Hernan-Barrientos · May 16, 2022 · d434295 · d434295
commit d434295
Show file tree

Hide file tree

Showing 7 changed files with 453 additions and 0 deletions.
diff --git a/Logo.png b/Logo.png
diff --git a/Munheco.png b/Munheco.png
diff --git a/index - copia.html b/index - copia.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+
+<html lang="es">
+
+    <head>
+
+        <meta charset="UTF-8"> 
+        <title>Challenge</title>
+        <link rel="stylesheet" href="reset.css">
+        <link rel="stylesheet" href="style.css">
+
+    </head>
+
+<body>
+    <section>
+     <textarea type="text" class="input-text" cols="40" rows="6" placeholder=""></textarea>
+     <div>
+         <button type="button" onclick="btnEncriptar()">Encriptar</button>
+         <button type="button" onclick="btnDesencriptar()">Desencriptar</button>
+     </div>       
+    </section>
+    <section>
+        <textarea type="text" cols="40" rows="6" class="input-text-area" placeholder=""></textarea>
+    </section>
+
+<script src="principal.js"></script> 
+</body>
+</html>
+
+
diff --git a/index.html b/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+
+<html lang="es">
+
+    <head>
+
+        <meta charset="UTF-8"> 
+        <title>Challenge</title>
+        <link rel="stylesheet" href="reset.css">
+        <link rel="stylesheet" href="style.css">
+
+    </head>
+
+<body>
+<div class="contenedorPrincipal">
+<div class="boxLogo"><img src="Logo.png" class="logoAlura"></div>
+
+
+    <section id="seccionConCajaYBotones">
+        <div class="areaTextual"><textarea id="texto" class="texto" placeholder="Ingrese su texto aquí"></textarea>
+        </div>
+        <div class="cajaBotones">
+            <button id="encriptar" class="boton1" onclick="btnEncriptar()" >encriptar</button>
+            <button id="desencriptar" class="boton2" onclick="btnDesencriptar()">desencriptar</button>
+
+        </div>
+    </section>
+
+<section id="cuadradoDerecha" class="cuadradoDerecha">
+    <div id="contenedorRenovable">
+        <textarea id="textoEnTextarea" class="texto2" readonly="readonly"></textarea>
+        <div>
+
+</section><!--esta section va a contener el textarea y la imagen de "no encontrado"-->
+</div>
+<script src="principal.js"></script> 
+</body>
+</html>
+
diff --git a/principal.js b/principal.js
@@ -0,0 +1,69 @@
+const inputTexto = document.querySelector(".texto");
+//const mensaje = document.querySelector(".texto2");
+const mensaje = document.querySelector("#cuadradoDerecha");
+
+//if(inputTexto.textContent==""){crearImagenDerecha();}
+
+function btnEncriptar(){
+    const textoEncriptado = encriptar(inputTexto.value);
+    mensaje.value = textoEncriptado;
+    crearTextareaDerecha();
+//  eliminarImagenDerecha();
+} 
+
+function btnDesencriptar(){
+    const textoEncriptadoBis = desencriptar(inputTexto.value);
+    mensaje.value = textoEncriptadoBis;
+    crearTextareaDerecha();
+} 
+
+function encriptar(StringParaEncriptar){
+    let matrizCodigo = [["e","enter"],["i","imes"],["a","ai"],["o","ober"],["u","ufat"]];
+    StringParaEncriptar = StringParaEncriptar.toLowerCase();
+    for (let i=0; i<matrizCodigo.length; i++){
+        if(StringParaEncriptar.includes(matrizCodigo[i][0])){
+            StringParaEncriptar = StringParaEncriptar.replaceAll(matrizCodigo[i][0],matrizCodigo[i][1])
+        }
+    }
+    return StringParaEncriptar;
+}
+
+function desencriptar(StringParaDesencriptar){
+    let matrizCodigoBis = [["enter","e"],["imes","i"],["ai","a"],["ober","o"],["ufat","u"]];
+    StringParaDesencriptar = StringParaDesencriptar.toLowerCase();
+    for (let i=0; i<matrizCodigoBis.length; i++){
+        if(StringParaDesencriptar.includes(matrizCodigoBis[i][0])){
+            StringParaDesencriptar = StringParaDesencriptar.replaceAll(matrizCodigoBis[i][0],matrizCodigoBis[i][1])
+        }
+    }
+    return StringParaDesencriptar;
+}
+
+    const $mivariable = document.getElementById("cuadradoDerecha");
+
+    function crearTextareaDerecha(){/*esta function tiene que extraer el valor ingresado en el input para mostrarlo como una string dentro del <Textarea id="textoFuerte"> y sobreescribir el valor dentro del mismo */
+    const valorDelTextarea = document.getElementById("textoEnTextarea");
+
+    var cajitaTextoD = document.createElement("textarea");
+    cajitaTextoD.className = "texto2";
+    cajitaTextoD.id="texto2";
+    cajitaTextoD.value=mensaje.value;
+
+
+    valorDelTextarea.textContent=mensaje.value;
+    }
+
+
+
+
+function crearImagenDerecha(){
+
+    munheco = document.createElement("img");
+    munheco.src = "Munheco.png";
+    munheco.alt = "Logo Javascript";
+    munheco.className = "munheco";
+    munheco.id = "munhequito"
+
+    const contenedor = document.getElementById("cuadradoDerecha");
+    contenedor.prepend(munheco);
+    }
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;
+}