detalles finales

app.js

@@ -1,7 +1,7 @@
 let btnCopiar = document.querySelector(".copiar");
-let cuadroMensajes = document.querySelector(".form__outbox--msg");
-let imagen = document.querySelector(".msg--img");
-let cuadroResultado = document.querySelector(".form__outbox--result");
+let cuadroMensajes = document.querySelector(".container__message");
+let imagen = document.querySelector(".search-img");
+let cuadroResultado = document.querySelector(".container__result");
 let textoDesencriptado = document.querySelector("#result");
 
 
@@ -13,12 +13,20 @@ function limpiarTextArea(){
 }
 
 
+function clearDefaultText() {
+    let textoEntrada = document.querySelector("#entrada");
+    //console.log("click por fuera")
+    if (textoEntrada.value === " ") {      
+        textoEntrada.value = "Ingrese el texto aquí:"
+    }     
+}
+
 
 function validarEntrada(){   
     btnCopiar.classList.remove("ocultar");
     let textoEntrada = document.querySelector("#entrada").value;
-    let contenido = textoEntrada.trim(); //quito espacios y tabulaciones
-    if (contenido === '') {
+    let contenido = textoEntrada.trim(); //quito espacios y tabulaciones    
+    if (contenido === '' || contenido === 'Ingrese el texto aquí:') {
         //alert('El texto no puede estar en blanco.'); 
         textoEntrada.focus(); // Con esto espero por el text area de nuevo     
         validarEntrada();       
@@ -54,14 +62,16 @@ function mostrarResultado(resultado){
     ocultarElemento(imagen);
     ocultarElemento(cuadroMensajes);
     cuadroResultado.style.display = 'block';
+
     textoDesencriptado.innerHTML = resultado;    
 }
 
 function copiarElemento(){
     let texto = document.querySelector("#result");
     let contenidoTexto = texto.innerHTML;
-    navigator.clipboard.writeText(contenidoTexto);  
+    navigator.clipboard.writeText(contenidoTexto);      
     btnCopiar.classList.toggle("ocultar");
+    //btnCopiar.setAttribute("hidden",true);
     //alert("Copiado con exito");
 
 }
@@ -105,8 +115,8 @@ function procesoDesencriptar(texto){
 
 
 function menuHamburguesa(){
-    let menuHamburguesa = document.querySelector('.hamburguer-menu');
-    let contenido = document.querySelector('.menu--info-proyect');   
+    let menuHamburguesa = document.querySelector('.hamburguer');
+    let contenido = document.querySelector('.links');   
     menuHamburguesa.classList.toggle('menu-abierto');
     contenido.classList.toggle('menu-abierto');
 
@@ -116,8 +126,8 @@ function menuHamburguesa(){
 // Agrega un evento de clic al documento
 
 document.addEventListener('click', function(event) {
-    let menuHamburguesa = document.querySelector('.hamburguer-menu');
-    let contenido = document.querySelector('.menu--info-proyect');   
+    let menuHamburguesa = document.querySelector('.hamburguer');
+    let contenido = document.querySelector('.links');   
     const estaDentroDelMenu = menuHamburguesa.contains(event.target);
 
 
@@ -131,22 +141,18 @@ document.addEventListener('click', function(event) {
 
 
 
-let btnToogle = document.querySelector("#toogle-button");
-let img= document.querySelector("#img-toogle-buttton");
+// utilizo un interruptor para los modos de luz
+
+let btnToogle = document.querySelector("#toogle-btn");
+let img= document.querySelector("#toogle-btn--img");
 
 btnToogle.addEventListener("click",function(){
-
     let body = document.querySelector("body");
     if (body.classList.contains("dark-mode")){
         body.classList.remove("dark-mode");
         img.setAttribute("src", "./icons/moon.png");
     }else{
         body.classList.add("dark-mode");
         img.setAttribute("src", "./icons/sun.png");
-    }});
-
-
-
-
-
+}});
 

css/pc.css

@@ -1,77 +1,51 @@
-body{
-    max-width: 1680px;
-    margin: 0 auto;
+.nav{
+    height: 60px;
 }
 
 
-main{
+.main{
     display: flex;
     align-items: center;
-    padding-bottom: 3em;
-    margin-bottom: 1em;
+    align-content: center;
+    margin-top: 2em;
+    margin-bottom: 1em;    
 }
 
-.form__box{    
-    width: 45%;   
+
+.main__form,.main__output{    
+    width: 45%;       
     margin: 0 auto;
-}
+    padding-top: 0;
 
-.form__inbox textarea {
-    padding-left:0 ;
-    padding-right: 0;
 }
 
-.form__buttons{
-    width: 100%;
-    margin-top: 0.5em;   
+.input__textarea{  
+    min-height: 380px;
+    margin-top: 0;
 }
-
-.btn{
-    width: 70%;
-    padding: 0.6em; 
-} 
-
-.outbox-container{
+.buttons__btn{ 
     width: 40%;
-    margin: 0 auto; 
 }
-.form__outbox{      
-    border-radius: 20px;
-    padding-bottom: 0;
+
+.container__result{
+    min-height: 520px;
 }
-.form__outbox--img{
+
+.container__img{
     display: block;
     background-image: url(./icons/Loupe.png);
-    margin-top: 2em;
-}
-
-.form__outbox--img img {
-    width: 90%;
 }
 
-.form__outbox--result h1 {
-    margin-top: 1.5em;
-    margin-bottom: 1em;
-
-}
-.form__outbox--result textarea{ 
-    min-height: 380px;
-
-    margin-bottom: 1em;
-    padding-bottom: 1em;
+.hero{
+    display: none;
 }
 
-.form__outbox--btncopiar{
-    margin: 0 auto;    
+.footer{
+    padding-top: 2em  ;
 }
 
-.hero__img{
-    display: none;
-    margin-bottom: 1em;
+.footer__socials{
+    width: 60%;
 }
 
-footer section{
-    padding-bottom: 0;
-    padding-top: 0;
-}
 

css/tablet.css

@@ -1,53 +1,63 @@
-.hamburguer-menu, .menu--info-proyect{
+.hamburguer, .links{
     visibility: hidden;
 }
 
-.menu--info-project--desplegado ul{
-    visibility:visible;
+.links-deployed{
+    display: flex;    
+    justify-content: space-between; 
+    visibility: visible; 
+    list-style: none;
 }
 
-.menu--info-project--desplegado ul li a{
-    font-size: 1.8rem;
+.links_deployed .links_item{
+    font-size: 1.8rem;   
+    color: var(--text-color);
 }
 
-.form__inbox textarea{   
-    font-size: 1.8rem;
-    min-height: 400px;
+.main__form{
+    width: 100%;  
 
 }
-.form__buttons{
-    display: flex;    
+.input__textarea{   
+    font-size: 1.8rem;
+    min-height: 300px;
+}
+
 
+.buttons{
+    display: flex;    
+    justify-content: space-around;
+    align-content: center;
+    margin-top: 2em;
 }
-.btn{
-    width: 50%;
-    margin: 0 0.5em;
+
+
+.buttons__btn{ 
+    width: 40%;
+    margin: 0 auto;   
     font-size: 2.4rem;
 }
 
-.form__outbox--msg h5 {
-    padding: 1.4em;
-    font-size: 1.6rem;
+.main__output{
+    width: 100%;
 }
+.container__message h5 {
 
-.form__outbox--result textarea{ 
-    max-height: 400px;
-    font-size: 1.8rem;
-    margin-bottom: 2em;
+    font-size: 1.6rem;
 }
 
-.hero__img{    
+
+.hero{    
     min-width: 768px; 
     min-height: 400px; 
     max-width: 980px;
-    margin: 10px auto;     
+    margin: 1em auto;     
     background-size:cover;
 }
 
-footer .left ul li a{    
-    font-size: 1.8rem;
+.footer__socials{
+    width: 50%;
 }
-
-.right a{     
+.social-link{    
     font-size: 1.8rem;
 }