diff --git a/JS_decodificador.JS b/JS_decodificador.JS index d3083d8..4b42501 100644 --- 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); -*/ \ No newline at end of file + 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 deleted file mode 100644 index c73da25..0000000 --- a/README +++ /dev/null @@ -1 +0,0 @@ -Projeto de decodificador e codificador do curso Oracle Next Alura \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..18944c7 --- /dev/null +++ b/README.md @@ -0,0 +1,41 @@ +

_DECODE_

+ +>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: + + + + + + + + + + + +
HTMLCSSJavaScript
5.03.0*
+ +## 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 deleted file mode 100644 index 88b79f5..0000000 --- a/decodificador.html +++ /dev/null @@ -1,51 +0,0 @@ - - - - - - - Document - - - - - - -
- -

_DECODER_

-
- -
-
- -
- -
-
- -
- -
- -
-
- - -
- -
-
- - - - - - - - - \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..24bc180 --- /dev/null +++ b/index.html @@ -0,0 +1,58 @@ + + + + + + + Decoder + + + + + + + + +
+ +

_DECODER_

+
+ +
+
+ +
+ +
+
+ +
+ +
+ +
+
+ + +
+ + content_copy +
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/style_decodificador.css b/style_decodificador.css index d4634fa..befbaab 100644 --- a/style_decodificador.css +++ b/style_decodificador.css @@ -1,6 +1,7 @@ @import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Gelasio:wght@500&display=swap'); + *{ box-sizing: border-box; margin: 0; @@ -10,7 +11,7 @@ body{ - background-image: url(https://i.picsum.photos/id/101/2621/1747.jpg?hmac=cu15YGotS0gIYdBbR1he5NtBLZAAY6aIY5AbORRAngs); + background-image: url(https://i.pinimg.com/originals/3c/ab/43/3cab434622d9fabfde2f46e9a51380d6.gif); background-size: cover; background-position: center center; background-repeat: no-repeat; @@ -19,23 +20,25 @@ body{ width: 100%; height: 100%; } + body::-webkit-scrollbar{ width: 8px; } -body::-webkit-scrollbar-track { - background: rgb(255, 255, 255); -} body::-webkit-scrollbar-thumb { - background-color: rgb(0, 0, 0); - + background-color: rgb(245, 245, 245); + border-radius: 60px; } +body::-webkit-scrollbar-track-piece{ + background-color: rgb(12, 11, 11); +} + .cabecalho{ - background-color: black; + background-color: rgb(0,0,0,0.45); width: 100%; height: 100px; position: relative; @@ -53,18 +56,19 @@ body::-webkit-scrollbar-thumb { h1{ text-align: center left; color: #fff; - font-size: xx-large; + font-size: 40px; font-family: 'Aboreto', cursive; width: fit-content; position: absolute; - left: 45%; + left: 42%; right: 50%; top: 25%; + } .estructure{ - padding: 100px 200px 0px 200px; + padding: 100px 200px 10% 200px; } @@ -78,7 +82,7 @@ h1{ } -#texto{ +.texto{ width: 400px; height: 400px; max-width: 400px; @@ -93,20 +97,36 @@ h1{ font-size: larger; padding: 10px; font-family: 'Gelassio', serif; + outline: none; + text-transform: lowercase; } -.decode #texto{ - height: 140px; - margin-top: 20px; - position: right; +.decode .texto{ + height: 400px; + width: 400px; + margin-top: -462px; border-radius: 4px; - text-decoration: dashed; margin-bottom: 30px; + margin-left: 40%; + position: absolute; + z-index: 10; + + +} +.material-symbols-outlined{ + color: #fff; + position: relative; + z-index: 20; + left: 95%; + top: -100px; + cursor: pointer; + } + .botões{ padding: 10px 20px; display: flex; @@ -134,38 +154,53 @@ h1{ .botão:hover{ - letter-spacing: 4px; background-color: black; + transform: scale(1.1); } .rodapé{ - background-color: rgb(0, 0, 0); - height: 60px; + background-color: rgb(0,0,0,0.45); + width: 100%; text-align: center; padding: 20px; } -a{ +.links{ color: #fff; text-decoration: none; - transition: 0.90s; padding: 10px; } -a:hover{ - font-weight: bolder; - font-size: large; - background-color: #fff; - color: black; +.links:hover{ + background-color: rgba(20, 20, 20, 0); + color: rgb(0, 247, 255); padding: 10px; - border-radius: 50px; + border-radius: 20px; + text-shadow: 1px 1px 50px rgb(0, 255, 255); + + +} + +.art{ + text-align: end; + font-size: 8px; + color: #fff; + cursor: pointer; + transition: 0.50s; + letter-spacing: 2px; + position: relative; + font-style: italic; +} + +.art:hover{ + color: aqua; } @media screen and (max-width:768px){ @@ -174,7 +209,7 @@ a:hover{ } h1{ - left: 39%; + left: 35%; right: 50%; top: 25%; } @@ -184,8 +219,8 @@ a:hover{ margin-left: 10px; height: 45px; position: absolute; - } + .botões{ padding: 10px 20px; @@ -194,5 +229,132 @@ a:hover{ margin-right: 99%; } + .decode .texto{ + margin-top: 20px; + border-radius: 4px; + margin-bottom: 30px; + margin-left: auto; + position: relative; + + } + +} + + +@media screen and (max-width:458px){ + h1{ + left: 23%; + right: 50%; + top: 25%; + } + + } +@media screen and (max-width:1051px){ + + .decode .texto{ + margin-top: 20px; + border-radius: 4px; + margin-bottom: 30px; + margin-left: auto; + position: relative; + + } + +} + +@media screen and (max-width:1051px){ + .material-symbols-outlined{ + left: -7%; + top: -50px; + } + +} + +@media screen and (max-width:830px){ + .material-symbols-outlined{ + left: 85%; + top: -70px; + } + +} + +@media screen and (max-width:766px){ + .material-symbols-outlined{ + left: -8%; + top: -29px; + } + +} + +@media screen and (max-width:649px){ + .material-symbols-outlined{ + left: 89%; + top: -70px; + } + +} + +@media screen and (max-width:500px){ + .material-symbols-outlined{ + left: 121%; + top: -65px; + } + +} + +@media screen and (max-width:450px){ + .material-symbols-outlined{ + left: 166%; + top: -65px; + } + +} + + + +@media screen and (max-width:458px){ + + .cabecalho .logo{ + margin-top: 11px; + margin-left: 10px; + height: 32px; + position: absolute; + + } + +} + + +@media screen and (max-width:410px){ + .material-symbols-outlined{ + left: 184%; + top: -65px; + } + + .texto{ + width: 379px; + } + + .decode .texto{ + width: 379px; + } + + .cabecalho .logo{ + height: 25px; + } + +} + + +@media screen and (max-width:376px){ + + .material-symbols-outlined{ + left: 211%; + top: -71px; + } + +} + +