+
+
+
+
+
+
+
+
+ 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
new file mode 100644
index 0000000..af94440
--- /dev/null
+++ 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;
+}
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..53706c8
--- /dev/null
+++ b/style.css
@@ -0,0 +1,267 @@
+body{background-color: #cfd6f0;
+
+}
+::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+ color: #0A3871;
+ opacity: 1; /* Firefox */}
+
+
+.contenedorPrincipal {
+
+ background-repeat: repeat;
+ position: absolute;
+ height: 100%;
+ width: 95%;
+ background: #F3F5FC;
+
+
+}
+
+.boxLogo {
+
+ position: absolute;
+ width: 160px;
+ height: 100px;;
+ display: inline-block;
+ margin-top:40px;}
+
+.logoAlura{
+ width: 120px;
+ height: 48px;
+ left: 40px;
+ top: 40px;
+ filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+}
+
+
+
+.areaTextual{
+
+ margin-top: 168px;
+ margin-left: 20%;
+ position: absolute;
+ display: inline-block;
+ height:401px ;
+ width: 80%x;
+}
+
+.texto {
+ width: 100%;
+ height: 400px;
+ font-family: 'Arial';
+ color:#0A3871;
+ font-size: 32px;
+ border: 0px;
+ background-color:#f3f5fcc2;
+ resize: none;
+ outline: none;
+}
+
+.texto2 {
+
+ margin:35px 10px 10px 10px;
+ display:inline-block;
+ width: 90%;/*400px*/
+ height: 400px;
+ font-family: 'Arial';
+ color:#0A3871;
+ font-size: 32px;
+ border: 0px;
+ background-color:#f3f5fcd8;
+ resize: none;
+ outline: none;
+ z-index: 0;
+}
+
+
+
+.cuadradoDerecha {
+
+ /*background-image: url("file:///C:/Users/hernan/Desktop/alura/Challenge/Munheco.png");*/
+ position:absolute;
+ display: inline;
+ width: 20%;/*400px*/
+ height: 90%;
+ margin-top: 40px;
+ margin-left: 70%;
+
+
+
+ /* White */
+
+
+ /* shadow */
+
+ box-shadow: 0px 24px 32px -8px rgba(0, 0, 0, 0.08);
+ border-radius: 32px;
+ }
+
+
+ .testSeccion{z-index: 1000;
+ position: absolute;
+ margin-left: 100px;}
+.cajaBotones{
+ position: absolute;
+ margin-top:45%;
+margin-left: 10%;}
+
+.boton1{
+ box-sizing: border-box;
+
+ /* Auto layout */
+
+ display: inline-block;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 24px;
+
+ position: static;
+ width: 328px;
+ height: 67px;
+ left: 352px;
+ top: 0px;
+
+ /* Light gray */
+
+ background: #D8DFE8;
+ /* Dark blue/dark-blue-300 */
+
+ border: 1px solid #0A3871;
+ border-radius: 24px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ margin: 0px 24px;}
+
+ .boton1{
+ box-sizing: border-box;
+ color: white;
+ /* Auto layout */
+ text-align: center;
+ display: inline-block;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 24px;
+
+ position: static;
+ width: 328px;
+ height: 67px;
+ left: 352px;
+ top: 0px;
+
+ /* Light gray */
+
+ background: #0A3871;
+ /* Dark blue/dark-blue-300 */
+
+ border: 1px solid #0A3871;
+ border-radius: 24px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ margin: 0px 24px;}
+.boton2{
+ box-sizing: border-box;
+
+ /* Auto layout */
+ color: #0A3871;
+ text-align: center;
+ display: inline-block;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 24px;
+
+ position: static;
+ width: 328px;
+ height: 67px;
+ left: 352px;
+ top: 0px;
+
+ /* Light gray */
+
+ background: #D8DFE8;
+ /* Dark blue/dark-blue-300 */
+
+ border: 1px solid #0A3871;
+ border-radius: 24px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ margin: 0px 24px;}
+.boton3{
+ box-sizing: border-box;
+
+ /* Auto layout */
+ color: #0A3871;
+ text-align: center;
+ display: inline-block;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 24px;
+
+ position: static;
+ width: 328px;
+ height: 67px;
+ left: 352px;
+ top: 0px;
+
+ /* Light gray */
+
+ background: white;
+ /* Dark blue/dark-blue-300 */
+
+ border: 1px solid #0A3871;
+ border-radius: 24px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+.munheco{
+ margin-top: 243px;
+ margin-left: 32px;
+}
+
+.noMensajeFound{
+ font-family: 'Arial';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 24px;
+ line-height: 120%;
+ /* or 29px */
+
+ text-align: center;
+
+ /* Gray/gray-500 */
+
+ color: #343A40;
+}
+
+.ingreseTexto {
+ font-family: 'Arial';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 150%;
+ /* or 24px */
+
+ text-align: center;
+}
+
+
+.contenedorRenovable{
+
+}
\ No newline at end of file
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/principal.js b/principal.js
new file mode 100644
index 0000000..cada011
--- /dev/null
+++ 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