Encriptador concluido por el momento

mrp500 · Mar 4, 2024 · d9b7dfd · d9b7dfd
1 parent ffb6e73
commit d9b7dfd
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -21,15 +21,15 @@
         </script>
     </head>
     <body>
-        <h1><img class="candado" src="imagenes/candado.svg">
+        <h1><img class="candado" src="imagenes/candado.svg" draggable="false" oncontextmenu="return false" alt="Candado">
             <span class ="Encriptador">Encriptador</span><br>
             <span class = "Desencriptador">Desencriptador</span>
         </h1>
         <label for="inputTextArea"></label>
             <div class="input">
                 <textarea id="inputTextArea" rows="18" cols="40" placeholder="Ingrese texto aquí" class="campotransparente-uno"></textarea>
                 <p>
-                    <img class="circulo-exclamacion" src="imagenes/circulo-exclamacion-cierre.svg">
+                    <img class="circulo-exclamacion" src="imagenes/circulo-exclamacion-cierre.svg" alt="Circulo-Exclamacion">
                     Solo letras minusculas y sin acentos
                 </p>
                 <div style="text-align: center;">
@@ -39,9 +39,9 @@ <h1><img class="candado" src="imagenes/candado.svg">
             </div>
                 <div class="output">
                     <div class="detective">
-                        <img src="imagenes/detective.svg">
+                        <img id="hideable-image" src="imagenes/detective.svg" draggable="false" oncontextmenu="return false" alt="Detective" onclick="hideImageAndFocusTextarea();">
                     </div>
-                    <textarea id="result" rows="18" cols="32" class="campotransparente-dos" placeholder=""></textarea><br>
+                    <textarea id="result" rows="18" cols="32" class="campotransparente-dos" onclick="hideImageAndFocusTextarea();"></textarea><br>
                 <div style="text-align: center;">
                     <button class="button-tres" onclick="copyText();">Copiar</button>
                 </div>

diff --git a/script.js b/script.js
@@ -1,22 +1,29 @@
 
 function encryptText() {
     var inputText = document.getElementById('inputTextArea').value;
-    var resultTextArea = document.getElementById('result');
-    var encryptedText = inputText
-        .replace(/e/g, 'enter')
-        .replace(/i/g, 'imes')
-        .replace(/a/g, 'ai')
-        .replace(/o/g, 'ober')
-        .replace(/u/g, 'ufat');
+    if (inputText.trim() !== '') {
+        var resultTextArea = document.getElementById('result');
+        var encryptedText = inputText
+            .replace(/e/g, 'enter')
+            .replace(/i/g, 'imes')
+            .replace(/a/g, 'ai')
+            .replace(/o/g, 'ober')
+            .replace(/u/g, 'ufat');
     resultTextArea.value = encryptedText;
     var inputElement = document.getElementById('inputTextArea');
     inputElement.value = '';
+    document.getElementById('hideable-image').style.display = 'none';
+    } else {
+        var inputElement = document.getElementById('inputTextArea');
+        inputElement.focus();
+    }
 }
 
 function decryptText() {
     var inputText = document.getElementById('inputTextArea').value;
-    var resultTextArea = document.getElementById('result');
-    var decryptedText = inputText
+    if (inputText.trim() !== '') {
+        var resultTextArea = document.getElementById('result');
+        var decryptedText = inputText
         .replace(/ufat/g, 'u')
         .replace(/ober/g, 'o')
         .replace(/ai/g, 'a')
@@ -25,5 +32,35 @@ function decryptText() {
     resultTextArea.value = decryptedText;
     var inputElement = document.getElementById('inputTextArea');
     inputElement.value = '';
+    document.getElementById('hideable-image').style.display = 'none';
+    } else {
+        var inputElement = document.getElementById('inputTextArea');
+        inputElement.focus();
+    }
+}
+
+document.querySelector('.button-tres').addEventListener('click', function() {
+    var image = document.getElementById('hideable-image');
+    image.style.display = 'none'; 
+});
+
+
+function hideImageAndFocusTextarea(event) {
+    var image = document.getElementById('hideable-image');
+    var textarea = document.getElementById('result');
+    image.style.display = 'none';
+    textarea.focus(); 
 }
 
+document.getElementById('hideable-image').onclick = hideImageAndFocusTextarea;
+
+document.getElementById('result').addEventListener('blur', function() {
+    var resultTextArea = document.getElementById('result');
+    var image = document.getElementById('hideable-image');
+    if (resultTextArea.value.trim() === '') {
+        image.style.display = 'block'; 
+    }
+});
+
+document.getElementById('result').onblur = showImageIfNoFocus;
+
diff --git a/styles.css b/styles.css
@@ -17,6 +17,10 @@ h1 {
     height: 60px;
     transform: translate(0px, 35px);
     filter: invert(58%) sepia(34%) saturate(841%) hue-rotate(189deg) brightness(115%) contrast(101%);
+    -webkit-user-select: none;
+    -moz-user-select: none; 
+    -ms-user-select: none; 
+        user-select: none;
 }
 
 body {
@@ -98,6 +102,10 @@ body {
     position: absolute;
     margin-left: 7% ;
     margin-top: 5%;
+    -webkit-user-select: none;
+    -moz-user-select: none; 
+    -ms-user-select: none; 
+        user-select: none;
 }
 
 p {
@@ -248,7 +256,7 @@ p {
     }
 
     .detective {
-        margin: 10% 13%;
+        margin: 10% 12%;
     }
 
 }