Reto #8 Cifrado César

Julio César 007

by didacticode

HTML

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Cifrado César</title>
        <link href="Reto08_JulioCesar007.css" rel="stylesheet" type="text/css">
        <script src="Reto08_JulioCesar007.js"></script>
    </head>
<body>
    <h1>Cifrado César con rotación personalizada:</h1>
    <h3>MENSAJE:</h3>
    <p><input type="text" id="mensaje"/></p>
    <h3>DESPLAZAMIENTO:</h3>
    <p><input type="number" id="desplazamiento" size="4"/></p>
    <p><button type="button" id="cifrar">Cifrar</button>     
    <button type="button" id="descifrar">Descifrar</button> </p>    
    <h3>MENSAJE CIFRADO/DESCIFRADO:</h3>
    <p><input type="text" id="mensaje2"/></p>
</body> 
</html>

CSS

body {
      background-image: url("juliocesar.jpg");/* https://pixabay.com/es/photos/escultura-julio-c%C3%A9sar-estatua-3357150/ */
      background-size: cover;
      color: black; 
      font-family: Arial, Helvetica, sans-serif;
  }
  
 h3, p, input {
    font-family: "Arial", sans-serif;
    text-align: center;
    color: black;
  }
  
  input {
    font-family: "Digital", sans-serif;
    font-size: 1.5em;
    background-color: black;
    padding: 10px;
  }

JavaScript

window.addEventListener("load",inicio,true);

function inicio(){
    document.getElementById("mensaje").addEventListener("keyup", function(){
        this.value = this.value.toUpperCase();
    }, true);
    
    document.getElementById("cifrar").addEventListener("click",function(){  
        let texto = document.getElementById("mensaje").value;
        let desplazamiento = document.getElementById("desplazamiento").value;               
        document.getElementById("mensaje2").value = cifrar2(texto, desplazamiento);
    },true);
    document.getElementById("descifrar").addEventListener("click",function(){  
        let texto = document.getElementById("mensaje").value;
        let desplazamiento = document.getElementById("desplazamiento").value;                               
        document.getElementById("mensaje2").value = descifrar(texto, desplazamiento);
    },true);
}

function cifrar(texto, desplazamiento) {
    if (!texto) 
        return ''; // No se recomienda que haya más de un punto de salida de la función
    const letras = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    //Si aceptamos desplazamientos negativos, necesitamos hacerlo dos veces. Si no, sería:
    //desplazamiento = desplazamiento % 26;
    desplazamiento = (desplazamiento % 26 + 26) % 26; 
    return texto.replace(/[A-Z]/ig, c => letras[(letras.indexOf(c) + desplazamiento) % 26]);
}

function descifrar(texto, desplazamiento) {
    if (!texto) 
        return ''; // No se recomienda que haya más de un punto de salida de la función
    const letras = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    //Si aceptamos desplazamientos negativos, necesitamos hacerlo dos veces. Si no, sería:
    //desplazamiento = desplazamiento % 26;
    desplazamiento = (desplazamiento % 26 - 26) % 26; 
    return texto.replace(/[A-Z]/ig, c => letras[(letras.indexOf(c) - desplazamiento) % 26]);
}

function cifrar2(texto, desplazamiento) {
    let resultado='';
    let letras = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    //Si aceptamos...