/alura-challenge1-decodificador-descodificador

O repositório é destinado ao Challenge proposto pela Alura + Oracle através do Programa One - Oracle Next Education.

Primary LanguageCSS

Projeto Encrypt Text

Olá, rede! Esse é meu projeto Codificador e Descodificador de textos.

Video de apresentação

Conteúdo:

Deploy:

Encrypt Text

Resumo:

O projeto foi um Challenge proposto pela Alura + Oracle através do Programa One - Oracle Next Education com o intuito de desafiar o desenvolvedor a colocar em prática os conceitos básicos do front-end adquiridos durante os cursos de HTML, CSS, JavaScript e lógica de programação oferecidos na plataforma de ensinos da Alura.

Descrição:

A aplicação consiste em encriptar e desencriptar palavras digitadas pelo usuário.

🔸 Saibam o segredo da criptografia utilizada:

As "chaves" de criptografia que utilizaremos são: A letra "e" é convertida para "enter" A letra "i" é convertida para "imes" A letra "a" é convertida para "ai" A letra "o" é convertida para "ober" A letra "u" é convertida para "ufat";

🔸 Requisitos:

Deve funcionar apenas com letras minúsculas Não devem ser utilizados letras com acentos nem caracteres especiais Deve ser possível converter uma palavra para a versão criptografada e também retornar uma palavra criptografada para a versão original. Por exemplo: "gato" => "gaitober" gaitober" => "gato";

🔸 A página deve ter campos para inserção do texto a ser criptografado ou descriptografado, e a pessoa usuária deve poder escolher entre as duas opções. O resultado deve ser exibido na tela;

Extra: um botão que copie o texto criptografado/descriptografado para a área de transferência - ou seja, que tenha a mesma funcionalidade do ctrl+C ou da opção "copiar" do menu dos aplicativos.

Tópicos abordados durante o desafio:

#### JavaScript:

  - Utilizar expressões regulares para verificar acentos e letras maiúsculas.
  - Utilizar array de objetos.
  - Pegar o evento de click de forma global no caso o container da aplicação.
  - Pegar o target do elemento html que está sendo clicado.
  - Utilizar arrow function.
  - Captura elementos html da page com querySelector.
  - Utilizar funções.
  - Utilizar condicionar if e else.
  - Utilizar estrutura de repetição for.
  - Definir um array de elementos e utilizar o metodo forEach().
  - Utilizar o elemento navigator para tratar itens copiados na área de transferência.
  - Manipular string de acordo com input do usuário.


#### HTML5

    - Tags como main, header, section, div, textarea, span, footer, nav, ul button, img, a,  h1, h2, p.
    - Adicionar mais de um nome de classe a um elemento html.
    - Adicionar link de font padrão a ser utilizada na aplicação na seção head index.html.
    - adicionar link de estilos a ser utilizado na aplicação na seção head index.html.

#### CSS3

    - Utilizar a propriedade animation.
    - Utilizar o @keyframes para efeitos de animção.
    - Utilizar o flexbox.
    - Utilizar propriedade transition, transform.
    - Utilizar a propriedade overflow-wrap: break-word; para quebra de palavra.
    - Utilizar midia-queries na responsividade para outros dispositivos.
    - Utilizar a refatoração dos estilos de cada seção de elementos html separando em arquivos CSS.
    - Utilizar o @import para utilizar os estilos css de cada grupo de elementos em um unico arquivo css.
    - Utilizar pasta de midias e fotos (assets).
    - Utilizar pseudo-elementos e pseudo-classes.

Techs Utilizadas:

CSS3 HTML5 JavaScript Visual Studio Code

Contato:

LinkedIn