Encriptador de Texto con Javascript
Este proyecto, desarrollado en el programa Oracle Next Education de Alura Latam y Oracle, consistió en crear un encriptador de texto con HTML, CSS y JavaScript Vanilla.
Servicios:
Desarrollo Web, Javascript
URL del proyecto:
Descripción del proyecto
Este challenge formó parte del programa educativo Oracle Next Education impartido por Alura Latam y Oracle en el que se nos pidió desarrollar un encriptador de texto con tecnologías web como HTML, CSS y Javascript, sin frameworks.
El principio es sencillo: el usuario ingresa un texto y la web lo encripta o desencripta según la opción que haya seleccionado. Adicionalmente, se le brinda la opción de copiar el texto encriptado o desencriptado al portapapeles. ¿Quieres verlo en acción? Ingresa a este link .
Explicación del código
Para darle solución a este problema, generé cuatro funciones en Javascript: procesarTexto, encriptarTexto, desencriptarTexto y copiarTexto. Los nombres de las funciones son bastante descriptivos y no requieren mayor explicación.
A continuación, se muestra una parte del código fuente de mi solución propuesta. Partí creando un "diccionario" (estrictamente un objeto de colección de pares clave-valor) llamado diccionarioEncriptado con las reglas de encriptación (las vocales son encriptadas). El código completo se puede ubicar aquí .
<!DOCTYPE html>
<html lang='es'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Encriptador JavaScript | Junior Salvador</title>
</head>
<body>
<div class='contenedor'>
<div class='contenedor__input'>
<textarea id='inputTexto' placeholder='Ingrese el texto aquí...'></textarea>
<p class='contenedor__input__info'>¡Solo letras minúsculas y sin tildes!</p>
<div class='contenedor__input__botones'>
<button class='boton__encriptar' onclick='procesarTexto('encriptar')'>Encriptar</button>
<button class='boton__desencriptar' onclick='procesarTexto('desencriptar')'>Desencriptar</button>
</div>
</div>
<div class='contenedor__output'>
<div id='outputTexto' class='contenedor__output__mensaje'>
<img src='./assets/no-message-image.png' alt='Sin texto ingresado' />
<p class='contenedor__output__info'>Ningún mensaje fue encontrado</p>
<p class='contenedor__output__infomin'>Ingresa el texto que desees encriptar o desencriptar.</p>
</div>
<div class='contenedor__output__botones'>
<button id='copiarTexto' class='boton__copiar' onclick='copiarTexto()'>Copiar</button>
</div>
</div>
</div>
<script src='./js/script.js'></script>
</body>
</html>
const diccionarioEncriptado = {
'e': 'enter',
'i': 'imes',
'a': 'ai',
'o': 'ober',
'u': 'ufat'
};
function procesarTexto(accion) {
const inputTexto = document.querySelector('#inputTexto').value.toLowerCase();
const outputTexto = document.querySelector('#outputTexto');
const copiarTexto = document.querySelector('#copiarTexto');
if (!inputTexto) {
outputTexto.innerHTML = `
<img src='./assets/no-message-image.png' alt='Sin texto ingresado'/>
<p class='contenedor__output__info'>Ningún mensaje fue encontrado</p>
<p class='contenedor__output__infomin'>Ingresa el texto que desees encriptar o desencriptar.</p>
`;
copiarTexto.style.display = 'none';
return;
}
let resultado = '';
if (accion === 'encriptar') {
resultado = encriptarTexto(inputTexto);
} else {
resultado = desencriptarTexto(inputTexto);
}
outputTexto.innerHTML = `<p>${resultado}</p>`;
copiarTexto.style.display = 'block';
}
function encriptarTexto(texto) {
return texto.split('').map(char => diccionarioEncriptado[char] || char).join('');
}
function desencriptarTexto(texto) {
let resultado = texto;
Object.entries(diccionarioEncriptado).forEach(([key, value]) => {
resultado = resultado.split(value).join(key);
});
return resultado;
}
function copiarTexto() {
const outputText = document.querySelector('#outputTexto').textContent;
navigator.clipboard.writeText(outputText).then(() => {
alert('Texto copiado al portapapeles');
}).catch(err => {
console.error('Error al copiar: ', err);
});
}