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);
																			});
																		}
Junior Salvador