Add files via upload

b3z3 · Apr 18, 2022 · e3e25ff · e3e25ff
1 parent 4f6b384
commit e3e25ff
Show file tree

Hide file tree

Showing 8 changed files with 581 additions and 0 deletions.
diff --git a/images/alura-logo.png b/images/alura-logo.png
diff --git a/images/exclamation.svg b/images/exclamation.svg
diff --git a/images/favicon-16x16.png b/images/favicon-16x16.png
diff --git a/images/favicon-32x32.png b/images/favicon-32x32.png
diff --git a/images/searching.svg b/images/searching.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="./styles/main.css">
+    <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-16x16.png">
+    <title>Cifrador - Challenge Alura ONE</title>
+</head>
+<body>
+    <main class="wrapper">
+        <div class="logo">
+            <a href="https://www.aluracursos.com/" target="_blank" rel="noopener noreferrer"><img src="./images/alura-logo.png" alt="logo de alura"/></a>
+        </div>
+
+        <!--texto a cifrar/descifrar-->
+        <div class="input-text">
+            <div id="text-form">
+                <textarea id="text-to-manipulate" placeholder="Ingrese el texto aquí" required></textarea>
+                <p><img src="./images/exclamation.svg" alt="icono de advertencia"/>Solo letras minúsculas y sin acentos</p>
+                <div class="input-text-btns">
+                    <div>
+                        <button id="crypt-btn" type="button">Encriptar</button>
+                    </div>
+                    <div>
+                        <button id="decrypt-btn" type="button">Desencriptar</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!--texto cifrado/descifrado-->
+        <div class="output-text">
+            <div id="no-text" class="output-text-no-msg">
+                <img src="./images/searching.svg" alt="joven con una lupa buscando"/>
+                <h2>Ningún mensaje fue encontrado</h2>
+                <p>Ingresa el texto que desees encriptar o desencriptar.</p>
+            </div>
+            <div id="text" class="output-text-msg hidden">
+                <textarea id="output-text" readonly></textarea>
+                <button id="copy-btn" type="button">Copiar</button>
+            </div>
+        </div>
+    </main>
+</body>
+<script src="./scripts/app.js"></script>
+</html>
diff --git a/scripts/app.js b/scripts/app.js
@@ -0,0 +1,90 @@
+(function (){
+    const aluraKeys = {
+        'e': 'enter',
+        'i': 'imes',
+        'a': 'ai',
+        'o': 'ober',
+        'u': 'ufat',
+    };
+
+    function cipher(str, dict) {
+        const regex = new RegExp(Object.keys(dict).join('|'), 'gi');
+        return str.replace(regex, (match) => dict[match]);
+    }
+
+    function decipher(str, dict){
+        const regex = new RegExp(Object.values(dict).join('|'), 'gi');
+        return str.replace(regex, (match) => Object.keys(dict).find(key => dict[key] === match));
+    }
+
+    function classManagerOutput(toRemove, toAdd, className){
+        toRemove.classList.remove(className);
+        toAdd.classList.add(className);
+    }
+
+    function ButtonManager(state){
+        const xButtons = document.querySelectorAll('.input-text-btns div button');
+        if(state === 'add'){
+            xButtons.forEach(button => button.setAttribute('disabled', true));
+        }else if(state === 'remove'){
+            xButtons.forEach(button => button.removeAttribute('disabled'));
+        }
+    }
+
+    function validateText(e){
+        const regex = new RegExp('[A-ZÀ-ú]', 'g');
+        if(regex.test(e.target.value)){
+            ButtonManager('add');
+        }
+        else{
+            ButtonManager('remove');
+        }
+    }
+
+    function cleanTextArea(element){
+        element.value = '';
+    }
+
+    window.onload = () => {
+        //DOM
+
+        //Buttons
+        const cryptBtn = document.getElementById('crypt-btn');
+        const decryptBtn = document.getElementById('decrypt-btn');
+        const copyBtn = document.getElementById('copy-btn');
+        //Text Areas
+        const textToManipulate = document.getElementById('text-to-manipulate');
+        const outputText = document.getElementById('output-text');
+        //
+        const text = document.getElementById('text');
+        const noText = document.getElementById('no-text');
+
+        //Events
+
+        textToManipulate.addEventListener('input', validateText);
+        textToManipulate.addEventListener('paste', validateText);
+
+        cryptBtn.addEventListener('click', () => {
+            if(textToManipulate.value.length > 0){
+                let result = cipher(textToManipulate.value, aluraKeys);
+                classManagerOutput(text, noText, 'hidden');
+                outputText.value = result;
+                cleanTextArea(textToManipulate);
+            }
+        });
+
+        decryptBtn.addEventListener('click', () => {
+            if(textToManipulate.value.length > 0){
+                let result = decipher(textToManipulate.value, aluraKeys);
+                classManagerOutput(text, noText, 'hidden');
+                outputText.value = result;
+                cleanTextArea(textToManipulate);
+            }
+        });
+
+        copyBtn.addEventListener('click', () => {
+            outputText.select();
+            document.execCommand('copy');
+        });
+    }
+})()