Portanto, a constante cypheredCharCodes será uma array de charCodes, obtidos ao separar as letras da mensagem inserida pelo usuário em uma array e transformando cada letra em seu número charCode.

    EXECUTAR um MAP na array de charCodes {
      SE (o charCode for um número) {
        DESLOCAR o número 33 casas para frente, sendo 10 opções de casas (números de 0-9);
      } MAS SE (o charCode for uma letra maiúscula) {
        DESLOCAR a letra 33 casas para frente, sendo 26 opções de casas (letras de A-Z);
      } MAS SE (o charCode for uma letra minúscula) {
        DESLOCAR a letra 33 casas para frente, sendo 26 opções de casas (letras de a-z);
      } MAS SE (o charCode for uma letra maiúscula com acento) {
        DESLOCAR a letra 33 casas para frente, sendo 30 opções de casas (letras com acento de À-Ý);
      } MAS SE (o charCode for uma letra minúscula com acento) {
        DESLOCAR a letra 33 casas para frente, sendo 34 opções de casas (letras com acento de Þ-ÿ);
      }
    RETORNA o charCode; 
  }
  FIM DA FUNÇÃO cypherCharcodes

Dessa forma, cada charCode da array cypheredCharCodes será classificado em um grupo (charCodes de número, letra maiúscula, minúscula ou com acentos). Depois, o charCode será criptografado, ou seja, será trocado pelo número de charCode de seu respectivo grupo que estiver 33 posições à sua frente.

  DEFINIR uma constante chamada resultMessage que contém o resultado da função transformIntoLetters(cypheredCharCodes);

    INÍCIO DA FUNÇÃO transformIntoLetters = (cypheredCharCodes) => RETORNAR a transformação de cada charCode em letra;
    FIM DA FUNÇÃO transformIntoLetters

Assim, transformIntoLetters irá transformar a array de charCodes criptografados novamente em uma string de letras, que será armazenada na constante resultMessage.

  DEFINIR uma constante chamada method que armazena a tarefa escolhida pelo usuário. Nesse caso, é "criptografada";

  EXECUTAR a função showResultsOnPage(resultMessage, method);

    INÍCIO DA FUNÇÃO showResultOnPage = (resultMessage, method) => {
      RETORNAR no HTML a seguinte mensagem: "Esta é a sua mensagem ${method}: 
        ${resultMessage}"
    }
    FIM DA FUNÇÃO showResultOnPage

Por fim, a mensagem criptografada será inserida no HTMl por meio da função showResultsOnPage. A constante method será usada para preencher a seguinte frase "Está é a sua mensagem ${method}", sendo method, nesse caso, a palavra "criptografada". Caso o usuário tivesse escolhido a opção Descriptografar, a palavra inserida no local seria "descriptografada".

  EXECUTAR a função clearTextArea();

    INÍCIO DA FUNÇÃO clearTextArea = () => {
      LIMPAR a textarea;
      EXECUTAR a função enableButtons(); 

        INÍCIO DA FUNÇÃO enableButtons = () => {
          SE (o campo textarea estiver vazio) {
            DESABILITAR os botões 'Criptografar' e 'Descriptografar';
          } SENÃO {
            HABILITAR os botões 'Criptografar' e 'Descriptografar';
          }
        }
        FIM DA FUNÇÃO enableButtons
      
      EXECUTAR a função addTextAreaRows();

        INÍCIO DA FUNÇÃO addTextAreaRows = () => {
          AUMENTAR o tamanho da texarea conforme a altura do scrollbar da mesma;
        }
        FIM DA FUNÇÃO addTextAreaRows
    }
    FIM DA FUNÇÃO clearTextArea
}
FIM DA FUNÇÃO cipher

A última tarefa da função cypher é limpar a textarea para receber uma nova mensagem pelo usuário. Ao fazer isso, a textarea ficará vazia, portanto, os botões Criptografar e Descriptografar ficarão desabilitados. O tamanho da textarea, caso tenha sido expandido pelo tamanho da mensagem recém criptografada, também precisará retornar ao tamanho normal, por isso executa-se a função addTextAreaRows.

Portanto, a função cipher(message):

1. Transforma a mensagem digitada pelo usuário em uma array composta pelo charcode de cada letra da mensagem;
2. Criptografa os charcodes da array;
3. Transforma os charcodes criptografados novamente em letras e os junta em uma string.
4. Imprime na página a mensagem do usuário criptografada.
5. Reseta o campo de inserção de mensagem para receber uma nova mensagem pelo usuário.

A função decypher funcionará da mesma forma, a única diferença estará na função decypherCharcodes, que ao invés de buscar o charCode 33 posições à frente do charCode original, fará o movimento contrário. Isto é, dado um determinado charCode, buscará o charCode que estiver 33 posições atrás dele, encontrando a letra original, antes de mensagem ser criptografada.

Fluxograma

O seguinte fluxograma diz respeito à primeira versão da página, desenvolvida antes da refatoração. Nessa versão, o usuário não podia escolher entre criptografar / descriptografar, as duas tarefas eram sempre executadas em sequência. Além disso, ainda não era possível inserir números no campo da mensagem.