Olá, rede! Esse é meu projeto Codificador e Descodificador de textos.
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.
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.
#### 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent