SidneyDaniel · SidneyDaniel · Aug 11, 2022 · Aug 11, 2022 · Aug 18, 2022 · Aug 18, 2022
diff --git a/JS_decodificador.JS b/JS_decodificador.JS
@@ -1,10 +1,64 @@
-/*
-top: 50%;
-left: 50%;
-width: 400px;
-padding: 40px;
-transform: translate(-50%,-50%);
-background: rgba(0, 0, 0,.5);
-box-sizing: border-box;
-box-shadow: 0 15px 25px rgba(0, 0, 0,.6);
-*/
+    var cEntrada = document.querySelector("#cEntrada");
+    var dSaida = document.querySelector("#dSaida");
+    var copyButton = document.querySelector("#copy")
+
+    var Btn = document.querySelector("#Cbtn-1")
+    Btn.addEventListener('click', function(){
+        var texto = cEntrada.value;
+        var newCode = texto.replace(/e/gi,'enter')
+                .replace(/i/gi,'imes')
+                .replace(/a/gi,'ai')
+                .replace(/o/gi,'ober')
+                .replace(/u/gi,'ufat');
+                dSaida.value = newCode;
+                console.log(newCode);
+    })
+
+
+    var Btn2 = document.querySelector("#Dbtn-2")
+    Btn2.addEventListener('click', function(){
+        var texto = cEntrada.value;
+        let newDecode = texto.replace(/enter/gi,'e')
+                .replace(/imes/gi,'i')
+                .replace(/ai/gi,'a')
+                .replace(/ober/gi,'o')
+                .replace(/ufat/gi,'u');
+                dSaida.value = newDecode
+                console.log(newDecode);
+    })
+
+
+
+    copyButton.addEventListener('click',()=> {
+        dSaida.select();
+        document.execCommand('copy');
+    })
+
+
+
+
+    var entrada = document.querySelector("#cEntrada");
+
+    entrada.addEventListener("keypress",function(x){
+
+        if (!checkChar(x)) {
+            x.preventDefault();
+        }
+
+    })
+
+    function checkChar(x){
+        var char = String.fromCharCode(x.keyCode);
+
+        const pattern = '[a-z-0-9 ]'
+
+        if(char.match(pattern)){
+            return true;
+        }
+
+    }
+
+
+
+
+
diff --git a/README b/README
diff --git a/README.md b/README.md
@@ -0,0 +1,41 @@
+<h1>_DECODE_</h1>
+
+>Satus: Finished
+
+
+### Projeto de decodificador e codificador do curso Oracle Next Alura(Projeto principal)
+
+## O decodificador funciona por meio da troca de letras das frases pelas seguintes varíaveis:
++ 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"
+
+Um ótimo exemplo é quando se escreve digita "gato" que se codifica para "gaitober"
+
+## Tecnologias usadas:
+<table>
+    <tr>
+     <td>HTML</td>
+     <td>CSS</td>
+     <td>JavaScript</td>
+    </tr> 
+    <tr>
+        <td>5.0</td>
+        <td>3.0</td>
+        <td>*</td>
+    </tr>  
+</table>
+
+## Como funciona a aplicação:
+1) Ao abrir a página o usuário verá duas áreas de texto.
+2) Ao digitar uma frase o usuário terá duas opções.
+3) O botão de codificar, codificará a frase.
+4) O botão de decodificar, decodificara a frase.
+5) O resultado de ambas as opções saíra em um área ao lado.
+6) O usuário tem a opção de copiar o texto gerado por meio de um botão de copiar. 
+
+Links:
+Projeto Base:
+vvv
diff --git a/decodificador.html b/decodificador.html
diff --git a/index.html b/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="pt-Br">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Decoder</title>
+    <link rel="icon" href="https://i.pinimg.com/564x/04/3e/57/043e578df9fc9afc827b7ff7880ba912.jpg">
+    <link rel="stylesheet" href="style_decodificador.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
+
+</head>
+
+<body>
+
+    <header class="cabecalho">
+        <img class="logo" src="https://www.oracle.com/a/ocom/img/customerlogo-alura.png" >
+        <h1>_DECODER_</h1>
+    </header>
+
+   <section class="estructure">
+        <div class="code">
+            <textarea name="" class="texto" id="cEntrada" cols="30" rows="10" placeholder="Insira uma frase..."></textarea>
+        </div>
+
+        <section class="botões">
+            <div class="botão1">
+                <button id="Cbtn-1" class="botão">Codificar </button>
+            </div>
+
+            <div class="botão2">
+                <button id="Dbtn-2" class="botão">Decodificar</button>
+            </div>
+       </section>
+
+
+        <div class="decode">
+            <textarea name="" class="texto" id="dSaida" cols="30" rows="10"></textarea>
+            <span id="copy" class="material-symbols-outlined">content_copy</span>
+        </div>
+
+    </section>
+
+
+
+    <footer class="rodapé">
+        <a class="links" href="https://www.figma.com/file/tvFEYhVfZTjdJ5P24RGV21/Alura-Challenge---Desafio-1---Lógica?node-id=16%3A802">ModeloBase</a>
+        <a class="links"  href="https://github.com/SidneyDaniel">Github</a>
+        <a class="links" href="https://www.linkedin.com/in/sidney-daniel-lopes-a514801b7/">Linkedin</a>
+        <div class="art">
+            <a class="art" href="https://www.artstation.com/artwork/GXwZgz">©Pixel Jeff</a>
+        </div>
+    </footer>
+
+    <script src="JS_decodificador.JS"></script>
+
+</body>
+</html>