Add cambio de estados en botones y textarea para casos de exito y error

Cambia formato de textarea de texto a encriptar/desencriptar
Cambia formato de botones encriptar/desencriptar
Agrega configuracion de eslint
Agrega gitignore

Author: lucianodlf

.eslintrc.js

@@ -0,0 +1,31 @@
+/* eslint-disable no-undef */
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": "eslint:recommended",
+    "overrides": [
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest"
+    },
+    "rules": {
+        "indent": [
+            "error",
+            4
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "double"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ]
+    }
+};

.gitignore

@@ -0,0 +1 @@
+/node_modules/

css/global-desktop.css

@@ -0,0 +1,7 @@
+textarea{
+    resize: none;
+}
+
+.text-error{
+   border: 2px solid red !important; 
+}

index.html

@@ -6,6 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Encrypter/Decrypter</title>
+    <link rel="stylesheet" href="./css/reset.css">
     <link rel="stylesheet" href="./css/global-desktop.css">
     <link rel="stylesheet" href="./css/w3.css">
     <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css">
@@ -32,7 +33,9 @@ <h1 class="w3-xxxlarge w3-animate-bottom">Encrypter / Decrypter</h1>
                 <h3>Enter text to encrypt or decrypt</h3><br>
                 <i class="fa-solid fa-keyboard fa-bounce w3-margin-bottom w3-text-theme"
                     style="color: #33d17a; font-size: 50px;"></i>
-                <textarea class="w3-input w3-border" name="text-to-encrypt" id="text-to-encrypt" cols="30" rows="10"
+                <div id="notification" class="w3-text-red" style="visibility: visible;"></div>
+                <textarea class="w3-input w3-border w3-round-large w3-border-black w3-hover-border-dark-gray text-error"
+                    name="text-to-encrypt" id="text-to-encrypt" cols="30" rows="10"
                     placeholder="Write here the text to encrypt... &#10;Or write a encrypted text to decrypt..."></textarea>
                 <button id="encrypt-button"
                     class="w3-btn w3-round-xlarge w3-large w3-left-align w3-dark-grey w3-hover-light-grey w3-margin-top"
@@ -52,8 +55,8 @@ <h3>Enter text to encrypt or decrypt</h3><br>
                 <h3>Result</h3><br>
                 <i class="fa-solid fa-message w3-margin-bottom w3-text-theme"
                     style="color: #33d17a; font-size: 50px;"></i>
-                <textarea class="w3-input w3-border" name="encrypted-text" id="encrypted-text" cols="30" rows="10"
-                    readonly></textarea>
+                <textarea class="w3-input w3-border w3-round-large w3-border-black" name="encrypted-text"
+                    id="encrypted-text" cols="30" rows="10" readonly></textarea>
                 <button id="copy-button"
                     class="w3-btn w3-round-xlarge w3-large w3-left-align w3-dark-grey w3-hover-light-grey w3-margin-top"
                     style="font-weight: bold;"><i class="fa-solid fa-copy"></i> Copy

js/main.js

@@ -6,17 +6,17 @@ const words_replace = ["enter", "imes", "ai", "ober", "ufat"];
 
 const verifyCharacters = (text) => {
     /* Regex que permite solo letras minusculas, sin acentos, sin caracteres especiales */
-    const regex = /^[a-z\s]*$/
-    return regex.test(text);
-}
+    const regex = /^[a-z\s]*$/;
+    return text && regex.test(text);
+};
 
 const encrypText = (text) => {
     for (let i = 0; i < character_to_replace.length; i++) {
         text = text.replaceAll(character_to_replace[i], words_replace[i]);
     }
     console.debug(`Encrypted text: ${text}`);
     return text;
-}
+};
 
 const decryptText = (text) => {
     for (let i = 0; i < words_replace.length; i++) {
@@ -25,26 +25,40 @@ const decryptText = (text) => {
     console.debug(`Decrypted text: ${text}`);
 
     return text;
-}
+};
 
 const encrypt = () => {
-    const text = document.getElementById("text-to-encrypt").value.trim();
+    resetStyleTexarea("text-to-encrypt");
+    resetStyleButton("encrypt-button");
+    resetStyleButton("decrypt-button");
+
+    const text = document.getElementById("text-to-encrypt").value.trim().toLowerCase();
     console.debug(`Text to encrypt: ${text}`);
+    document.getElementById("text-to-encrypt").value = text;
 
     if (!verifyCharacters(text)) {
-        alert("Texto invalido");
+        console.error("Text invalid");
+        document.getElementById("notification").innerHTML = "Solo se admiten caracteres alfabeticos sin acentos.";
+        document.getElementById("text-to-encrypt").classList.replace("w3-border-black", "w3-border-red");
+        document.getElementById("text-to-encrypt").classList.add("w3-animate-opacity");
         return;
     }
 
     const encryptedText = encrypText(text);
     document.getElementById("encrypted-text").value = encryptedText;
+    setSuccessStyleButton("encrypt-button");
 
     return;
-}
+};
 
 const decrypt = () => {
-    const text = document.getElementById("text-to-encrypt").value.trim();
+    resetStyleTexarea("encrypted-text");
+    resetStyleButton("decrypt-button");
+    resetStyleButton("encrypt-button");
+
+    const text = document.getElementById("text-to-encrypt").value.trim().toLowerCase();
     console.debug(`Text to decrypt: ${text}`);
+    document.getElementById("text-to-encrypt").value = text;
 
     if (!verifyCharacters(text)) {
         alert("Texto invalido");
@@ -53,17 +67,38 @@ const decrypt = () => {
 
     const decryptedText = decryptText(text);
     document.getElementById("encrypted-text").value = decryptedText;
-
+    setSuccessStyleButton("decrypt-button");
     return;
-}
+};
 
 
+const setSuccessStyleButton = (idElement) => {
+    document.getElementById(idElement).classList.add("w3-border");
+    document.getElementById(idElement).classList.add("w3-border-green");
+    document.getElementById(idElement).classList.remove("w3-dark-grey");
+    document.getElementById(idElement).classList.add("w3-green");
+    document.getElementById(idElement).classList.add("w3-animate-opacity");
+
+};
+
+const resetStyleButton = (idElement) => {
+    document.getElementById(idElement).classList.remove("w3-border");
+    document.getElementById(idElement).classList.remove("w3-border-green");
+    document.getElementById(idElement).classList.remove("w3-green");
+    document.getElementById(idElement).classList.add("w3-dark-grey");
+};
+
+const resetStyleTexarea = (idElement) => {
+    document.getElementById(idElement).classList.replace("w3-border-red","w3-border-black");
+    document.getElementById(idElement).classList.remove("w3-animate-opacity");
+};
+
 const copyToClipboard = () => {
     if (navigator.clipboard) {
         const str = document.getElementById("encrypted-text").value.trim();
         navigator.clipboard.writeText(str)
             .then(() => console.log("Text copied to clipboard"))
-            .catch(err => console.log('Something went wrong', err));
+            .catch(err => console.log("Something went wrong", err));
     } else {
         alert("API clipboard not supported");
         console.log("API clipboard not supported");
@@ -85,4 +120,12 @@ window.onload = () => {
     const copyButton = document.getElementById("copy-button");
     copyButton.onclick = copyToClipboard;
 
-}  
+    const textToEncrypt = document.getElementById("text-to-encrypt");
+    textToEncrypt.onkeyup = () => {
+        document.getElementById("notification").innerHTML = "";
+        document.getElementById("encrypted-text").value = "";
+
+        resetStyleButton("encrypt-button");
+        resetStyleButton("decrypt-button");
+    }; 
+};