Skip to content

Commit e3e25ff

Browse files
authored
Add files via upload
1 parent 4f6b384 commit e3e25ff

File tree

8 files changed

+581
-0
lines changed

8 files changed

+581
-0
lines changed

images/alura-logo.png

1.14 KB
Loading

images/exclamation.svg

Lines changed: 3 additions & 0 deletions
Loading

images/favicon-16x16.png

741 Bytes
Loading

images/favicon-32x32.png

1.05 KB
Loading

images/searching.svg

Lines changed: 139 additions & 0 deletions
Loading

index.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" type="text/css" href="./styles/main.css">
8+
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
9+
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-16x16.png">
10+
<title>Cifrador - Challenge Alura ONE</title>
11+
</head>
12+
<body>
13+
<main class="wrapper">
14+
<div class="logo">
15+
<a href="https://www.aluracursos.com/" target="_blank" rel="noopener noreferrer"><img src="./images/alura-logo.png" alt="logo de alura"/></a>
16+
</div>
17+
18+
<!--texto a cifrar/descifrar-->
19+
<div class="input-text">
20+
<div id="text-form">
21+
<textarea id="text-to-manipulate" placeholder="Ingrese el texto aquí" required></textarea>
22+
<p><img src="./images/exclamation.svg" alt="icono de advertencia"/>Solo letras minúsculas y sin acentos</p>
23+
<div class="input-text-btns">
24+
<div>
25+
<button id="crypt-btn" type="button">Encriptar</button>
26+
</div>
27+
<div>
28+
<button id="decrypt-btn" type="button">Desencriptar</button>
29+
</div>
30+
</div>
31+
</div>
32+
</div>
33+
34+
<!--texto cifrado/descifrado-->
35+
<div class="output-text">
36+
<div id="no-text" class="output-text-no-msg">
37+
<img src="./images/searching.svg" alt="joven con una lupa buscando"/>
38+
<h2>Ningún mensaje fue encontrado</h2>
39+
<p>Ingresa el texto que desees encriptar o desencriptar.</p>
40+
</div>
41+
<div id="text" class="output-text-msg hidden">
42+
<textarea id="output-text" readonly></textarea>
43+
<button id="copy-btn" type="button">Copiar</button>
44+
</div>
45+
</div>
46+
</main>
47+
</body>
48+
<script src="./scripts/app.js"></script>
49+
</html>

scripts/app.js

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
(function (){
2+
const aluraKeys = {
3+
'e': 'enter',
4+
'i': 'imes',
5+
'a': 'ai',
6+
'o': 'ober',
7+
'u': 'ufat',
8+
};
9+
10+
function cipher(str, dict) {
11+
const regex = new RegExp(Object.keys(dict).join('|'), 'gi');
12+
return str.replace(regex, (match) => dict[match]);
13+
}
14+
15+
function decipher(str, dict){
16+
const regex = new RegExp(Object.values(dict).join('|'), 'gi');
17+
return str.replace(regex, (match) => Object.keys(dict).find(key => dict[key] === match));
18+
}
19+
20+
function classManagerOutput(toRemove, toAdd, className){
21+
toRemove.classList.remove(className);
22+
toAdd.classList.add(className);
23+
}
24+
25+
function ButtonManager(state){
26+
const xButtons = document.querySelectorAll('.input-text-btns div button');
27+
if(state === 'add'){
28+
xButtons.forEach(button => button.setAttribute('disabled', true));
29+
}else if(state === 'remove'){
30+
xButtons.forEach(button => button.removeAttribute('disabled'));
31+
}
32+
}
33+
34+
function validateText(e){
35+
const regex = new RegExp('[A-ZÀ-ú]', 'g');
36+
if(regex.test(e.target.value)){
37+
ButtonManager('add');
38+
}
39+
else{
40+
ButtonManager('remove');
41+
}
42+
}
43+
44+
function cleanTextArea(element){
45+
element.value = '';
46+
}
47+
48+
window.onload = () => {
49+
//DOM
50+
51+
//Buttons
52+
const cryptBtn = document.getElementById('crypt-btn');
53+
const decryptBtn = document.getElementById('decrypt-btn');
54+
const copyBtn = document.getElementById('copy-btn');
55+
//Text Areas
56+
const textToManipulate = document.getElementById('text-to-manipulate');
57+
const outputText = document.getElementById('output-text');
58+
//
59+
const text = document.getElementById('text');
60+
const noText = document.getElementById('no-text');
61+
62+
//Events
63+
64+
textToManipulate.addEventListener('input', validateText);
65+
textToManipulate.addEventListener('paste', validateText);
66+
67+
cryptBtn.addEventListener('click', () => {
68+
if(textToManipulate.value.length > 0){
69+
let result = cipher(textToManipulate.value, aluraKeys);
70+
classManagerOutput(text, noText, 'hidden');
71+
outputText.value = result;
72+
cleanTextArea(textToManipulate);
73+
}
74+
});
75+
76+
decryptBtn.addEventListener('click', () => {
77+
if(textToManipulate.value.length > 0){
78+
let result = decipher(textToManipulate.value, aluraKeys);
79+
classManagerOutput(text, noText, 'hidden');
80+
outputText.value = result;
81+
cleanTextArea(textToManipulate);
82+
}
83+
});
84+
85+
copyBtn.addEventListener('click', () => {
86+
outputText.select();
87+
document.execCommand('copy');
88+
});
89+
}
90+
})()

0 commit comments

Comments
 (0)