Giter VIP home page Giter VIP logo

gabrieldev071 / alura-challenge1-decodificador-descodificador Goto Github PK

View Code? Open in Web Editor NEW
4.0 1.0 0.0 69.47 MB

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

Home Page: https://gabrieldev071.github.io/alura-challenge1-decodificador-descodificador/

CSS 58.37% HTML 28.82% JavaScript 12.80%
alura challengeonedecodificador4 oracle oracle-next-education encrypt

alura-challenge1-decodificador-descodificador's Introduction

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

alura-challenge1-decodificador-descodificador's People

Contributors

gabrieldev071 avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.