index.js

const alfabeto = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","Ñ","O","P","Q","R","S","T","U","V","W","X","Y","Z"];

 //para cada elemento HTML que queremos controlar
const inputOriginal = document.getElementById("input-original");

//va a ser el form entero
const cifrador = document.getElementById('cifrador');

//el mensaje ya encriptado 
const resultado = document.getElementById('resultado');

//rango de valores 
const rango = document.getElementById('rango');




const shifMessage = () => {
    const wordArray = [...inputOriginal.value.toUpperCase()]; 
    printChar(0, wordArray);
}

const printChar = (currentLetterIndex, wordArray) => {
    if(wordArray.length === currentLetterIndex) return;
    inputOriginal.value = inputOriginal.value.substring(1)
    const spanChar = document.createElement("span");
    resultado.appendChild(spanChar);
    animateChar(spanChar)
        .then( () => {
            const charSinCodificar = wordArray[currentLetterIndex];
            spanChar.innerHTML = alfabeto.includes(charSinCodificar) ? 
                alfabeto[(alfabeto.indexOf(charSinCodificar) + parseInt(rango.value)) % alfabeto.length] :
                charSinCodificar
            printChar(currentLetterIndex + 1, wordArray);

        });
    }

    
    const animateChar = spanChar => { //animacion de los caracteres
    let cambiosDeLetra = 0;
    return new Promise(resolve => {
        const intervalo = setInterval(() => {
            spanChar.innerHTML = alfabeto[Math.floor(Math.random() * alfabeto.length)];
            cambiosDeLetra++;
            if(cambiosDeLetra === 3) {
                clearInterval(intervalo);
                resolve();
            }
        }, 75);  
    });
}


const submit = e => {
    e.preventDefault(); 
    resultado.innerHTML = ''; 
    shifMessage();
}

cifrador.onsubmit = submit;