├── README.md
├── estilo
    ├── mobile.css
    └── style.css
├── imagens
    └── logoCrislaine.png
├── index.html
└── interacao
    └── script.js


/README.md:
--------------------------------------------------------------------------------
1 | # Codificador-JavaScript
2 | 


--------------------------------------------------------------------------------
/estilo/mobile.css:
--------------------------------------------------------------------------------
  1 | @media screen and (max-width:850px){
  2 | 
  3 |     .cabecalho{
  4 |         display: flex;
  5 |         justify-content:left;
  6 |         padding: 3%;
  7 |     }
  8 | 
  9 |     .cabecalho h1{
 10 |       font-size: 28px;
 11 |     }
 12 | 
 13 |     .cabecalho img{
 14 |         max-width:90px;
 15 |         max-height:40px;
 16 |         width: auto;
 17 |         height: auto;
 18 |     }
 19 |     
 20 |     .container-input .input{
 21 |         width: 400px;
 22 |         height: 330px;
 23 |     }
 24 | 
 25 |     .container-input{
 26 |         display: flex;
 27 |         justify-content:space-around;
 28 |         flex-direction: column;
 29 |         padding: 2% 0 0 4%;
 30 |     }
 31 | 
 32 |     
 33 |      #input-texto{
 34 |         width: 400px;
 35 |         height: 330px;
 36 |         font-size: 20px;
 37 |     }
 38 | 
 39 |     
 40 | #output{
 41 |    width: 50%;
 42 |    height: 75%;
 43 |    margin-top: 9%;
 44 |    margin-right: 3%;
 45 | }
 46 | 
 47 | #output img{
 48 |    max-width:250px;
 49 |    max-height:200px;
 50 |    width: auto;
 51 |    height: auto;
 52 |    margin-top: 4%;
 53 |    margin-left: 25%;
 54 | }
 55 | 
 56 | .container-bnt button{
 57 |    width: 150px;
 58 |    height: 50px;
 59 |    margin-left: 5%;
 60 |    margin-top: 5%;
 61 | }
 62 | 
 63 | .rodape{
 64 |    display: flex;
 65 |    flex-direction: column;
 66 |    align-items: center;
 67 |    margin-top: 24%;
 68 |    background:var(--corprincipal) ;
 69 |    color: var(--cortitulo);
 70 |    width: 68%;
 71 | }
 72 |     
 73 | }
 74 | 
 75 | @media screen and (max-width:500px){
 76 |    #output{
 77 |       width: 60%;
 78 |       height: 75%;
 79 |       margin-top: 15%;
 80 |    }
 81 | 
 82 |    #input-texto{
 83 |       width: 200px;
 84 |       height: 330px;
 85 |       font-size: 20px;
 86 |   }
 87 | 
 88 |    #output img{
 89 |       max-width:200px;
 90 |       max-height:150px;
 91 |       width: auto;
 92 |       height: auto;
 93 |       margin-top: 4%;
 94 |       margin-left: 5%;
 95 |    }
 96 | 
 97 |    .container-bnt{
 98 |       width: 200px;
 99 |       flex-wrap: wrap;
100 |    }
101 | 
102 |    .container-bnt button{
103 |       width: 110px;
104 |       height: 50px;
105 |       margin-left: 30%;
106 |       margin-top: 5%;
107 | 
108 |    }
109 | 
110 |    .input p{
111 |       font-size: 10px;
112 |    }
113 | 
114 |    .rodape h3{
115 |       font-size: 14px;
116 |   }
117 | 
118 | 
119 | }


--------------------------------------------------------------------------------
/estilo/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap');
  2 | 
  3 | :root{
  4 |     --corprincipal: #ffc7f9;
  5 |     --corsegundaria:#caf9ff;
  6 |     --cortitulo:#7c0160;
  7 | }
  8 | 
  9 | body{
 10 |     background: var(--corsegundaria);
 11 | 
 12 | }
 13 | 
 14 | *{
 15 |     margin: 0;
 16 |     padding: 0;
 17 |     font-family: 'Rubik', sans-serif;
 18 | }
 19 | 
 20 | 
 21 | .cabecalho{
 22 |     display: flex;
 23 |     justify-content: space-between;
 24 |     padding: 2%;
 25 | }
 26 | 
 27 | .cabecalho h1{
 28 |     color: var(--cortitulo);
 29 | }
 30 | 
 31 | .cabecalho img{
 32 |     max-width:70px;
 33 |     max-height:70px;
 34 |     width: auto;
 35 |     height: auto;
 36 | }
 37 | 
 38 | .container-input{
 39 |     display: flex;
 40 |     justify-content: space-between;
 41 |     padding: 2% 0 0 4%;
 42 | }
 43 | 
 44 | .container-input .input{
 45 |     width: 400px;
 46 |     height: 330px;
 47 | }
 48 | 
 49 | #input-texto{
 50 |     width: 345px;
 51 |     height: 330px;
 52 |     font-size: 20px;
 53 |     color: var(--cortitulo);
 54 |     background: transparent;
 55 |     box-shadow: none;
 56 |     border: none;
 57 |     resize: none;
 58 |     outline: 0;
 59 |     padding: 10px;
 60 |     text-transform: uppercase;
 61 | }
 62 |     
 63 | 
 64 | #output{
 65 |     display: flex;
 66 |     flex-direction: column;
 67 |     border: 3px solid var(--cortitulo);
 68 |     border-radius: 20px;
 69 |     width: 350px;
 70 |     height: 400px;
 71 |     margin-right: 3%;
 72 | }
 73 | 
 74 | #output h2{
 75 |     text-align: center;
 76 |     font-size: 25px;
 77 |     color: var(--cortitulo);
 78 | }
 79 | 
 80 | #output span{
 81 |     font-size: 16px;
 82 |     text-align: center;
 83 | }
 84 | 
 85 | #output img{
 86 |     max-width:300px;
 87 |     max-height:300px;
 88 |     width: auto;
 89 |     height: auto;
 90 |     margin-top: 4%;
 91 | }
 92 | 
 93 | .container-bnt button{
 94 |     border: 2px solid var(--cortitulo);
 95 |     border-radius: 10px;
 96 |     text-decoration: none;
 97 |     color: #7c0160;
 98 |     width: 150px;
 99 |     height: 50px;
100 |     margin-left: 4%;
101 |     cursor: pointer;
102 | }
103 | 
104 | .btn-copiar{
105 |     border: 2px solid var(--cortitulo);
106 |     border-radius: 10px;
107 |     text-decoration: none;
108 |     color: #7c0160;
109 |     width: 150px;
110 |     height: 50px;
111 |     margin-bottom: 10%;
112 |     margin-left: 30%;
113 |     cursor: pointer;
114 | }
115 | 
116 | .container-bnt button:hover{
117 |    border: 2px solid var(--corsegundaria);
118 |    transition: 0.5s all;
119 | }
120 | 
121 | .rodape{
122 |     display: flex;
123 |     flex-direction: column;
124 |     align-items: center;
125 |     padding: 2%;
126 |     margin-top: 15px ;
127 |     background:var(--corprincipal) ;
128 |     color: var(--cortitulo);
129 | }
130 | 
131 | .rodape h3{
132 |     font-size: 16px;
133 | }
134 | 
135 | .icons ion-icon{
136 |     width: 25px;
137 |     height: 25px;
138 |     color: var(--cortitulo);
139 | }
140 | 
141 | .icons ion-icon:hover{
142 |     color: var(--corsegundaria);
143 | }
144 | 
145 | 
146 | 
147 | 
148 | 
149 | 
150 | 
151 | 
152 | 
153 | 
154 | 
155 | 


--------------------------------------------------------------------------------
/imagens/logoCrislaine.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CrislainePaula/Codificador-JavaScript/1323954e14d4c26b98b72d134eddcea948d2b4c5/imagens/logoCrislaine.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Decodificador e codificador</title>
 8 |     <link rel="stylesheet" href="estilo/style.css">
 9 |     <link rel="stylesheet" href="estilo/mobile.css">
10 |     <link rel="shortcut icon" href="imagens/logoCrislaine.png" type="image/x-icon">
11 | </head>
12 | <body>
13 |      <main class="main container">
14 |          <header class="cabecalho">
15 |            <img src="imagens/logoCrislaine.png" alt="logo Cris">
16 |            <h1>Mensagens Codificadas</h1>
17 |          </header>
18 |          <div class="container-input">
19 |          <div class="input">
20 |             <textarea  id="input-texto" placeholder="Digite seu texto aqui..."></textarea>
21 |             <p>ATENÇÃO: Apenas letras maiusculas e sem acento!</p>
22 |         </div>
23 | 
24 | 
25 |          <div id="output">
26 |             <img src="imagens/logoCrislaine.png" alt="logo cris" height="330px" width="400px">
27 |             <h2>Sua mensagem aparecerá aqui!</h2>
28 |             <span>Digite um texto que deseja criptografar ou descriptografar.</span>
29 |          </div>
30 |         </div>
31 | 
32 |         
33 |          <div class="buttons">
34 |              <div class="container-bnt">
35 |                 <button  onclick="criptografar()" class="btn-criptografar">Criptografar</button>
36 |                 <button  onclick="descriptografar()" class="btn-descriptografar">Descriptografar</button>
37 |              </div>
38 |             
39 |          </div>
40 |      </main>
41 | 
42 |      <footer class="rodape">
43 |         <div class="icons">
44 |         <a href="https://www.youtube.com/channel/UCVzACWasBoomphRDXjX18aw"><ion-icon name="logo-youtube" ></ion-icon></a>
45 |         <a href="https://www.instagram.com/crislaine_paulapp/?hl=bg"><ion-icon name="logo-instagram"></ion-icon></a>
46 |         <a href="https://github.com/CrislainePaula"><ion-icon name="logo-github"></ion-icon></a>
47 |     </div>
48 |         <h3>Desenvolvido por Crislaine Paula</h3>
49 |      </footer>
50 | 
51 |      <script src="interacao/script.js"></script>
52 |      <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
53 |      <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
54 | </body>
55 | </html>


--------------------------------------------------------------------------------
/interacao/script.js:
--------------------------------------------------------------------------------
 1 | var textInput = document.querySelector("#input-texto");
 2 | var outInput = document.querySelector("#output");
 3 | 
 4 | 
 5 | function criptografar(){
 6 | 
 7 |   var texto = textInput.value;
 8 | 
 9 |   var resultCripto = texto.replace(/e/g, "enter").replace(/i/g, "imes").replace(/a/g, "ai").replace(/o/g, "ober").replace(/u/g, "ufat")
10 | 
11 |   
12 |   document.getElementById('output').innerHTML = '<textarea readonly id="input-texto">' + resultCripto + 
13 |   '</textarea>' + '<button class="btn-copiar" id="copiar" onclick="copiar()">Copiar</button>'
14 | }
15 | 
16 | function descriptografar(){
17 | 
18 |     var texto = textInput.value;
19 | 
20 |     var resultDescripto = texto.replace(/enter/g, "e").replace(/imes/g, "i").replace(/ai/g, "a").replace(/ober/g, "o").replace(/ufat/g, "u");
21 |   
22 |     document.getElementById('output').innerHTML = '<textarea readonly id="input-texto">' + resultDescripto + 
23 |     '</textarea>' + '<button class="btn-copiar" id="copiar" onclick="copiar()">Copiar</button>'
24 | }
25 | 
26 | function copiar() {
27 |     var textoCop = document.getElementById('input-texto');
28 |   
29 |     textoCop.select();
30 |     document.execCommand('copy');
31 |     alert("Texto copiado.");
32 | }  


--------------------------------------------------------------------------------