From b899606c47f880f039b04399278b2e31532eebaa Mon Sep 17 00:00:00 2001 From: SidneyDaniel Date: Thu, 11 Aug 2022 19:24:51 -0300 Subject: [PATCH 01/15] design changes --- decodificador.html | 1 + style_decodificador.css | 78 +++++++++++++++++++++++++++++++++-------- 2 files changed, 65 insertions(+), 14 deletions(-) diff --git a/decodificador.html b/decodificador.html index 88b79f5..125d038 100644 --- a/decodificador.html +++ b/decodificador.html @@ -35,6 +35,7 @@

_DECODER_

+ diff --git a/style_decodificador.css b/style_decodificador.css index d4634fa..1183bff 100644 --- a/style_decodificador.css +++ b/style_decodificador.css @@ -10,7 +10,7 @@ body{ - background-image: url(https://i.picsum.photos/id/101/2621/1747.jpg?hmac=cu15YGotS0gIYdBbR1he5NtBLZAAY6aIY5AbORRAngs); + background-image: url(https://i.pinimg.com/originals/35/8b/53/358b539b1fe285e32573de0a9cd15182.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; @@ -19,6 +19,7 @@ body{ width: 100%; height: 100%; } + body::-webkit-scrollbar{ width: 8px; @@ -34,8 +35,9 @@ body::-webkit-scrollbar-thumb { } + .cabecalho{ - background-color: black; + background-color: rgb(0,0,0,0.45); width: 100%; height: 100px; position: relative; @@ -53,18 +55,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; } @@ -93,18 +96,22 @@ h1{ font-size: larger; padding: 10px; font-family: 'Gelassio', serif; + outline: none; } .decode #texto{ - height: 140px; - margin-top: 20px; - position: right; + height: 400px; + width: 400px; + margin-top: -461px; border-radius: 4px; - text-decoration: dashed; margin-bottom: 30px; + margin-left: 40%; + position: absolute; + + } .botões{ @@ -142,8 +149,8 @@ h1{ } .rodapé{ - background-color: rgb(0, 0, 0); - height: 60px; + background-color: rgb(0,0,0,0.45); + width: 100%; text-align: center; padding: 20px; @@ -152,7 +159,6 @@ h1{ a{ color: #fff; text-decoration: none; - transition: 0.90s; padding: 10px; @@ -174,7 +180,7 @@ a:hover{ } h1{ - left: 39%; + left: 35%; right: 50%; top: 25%; } @@ -184,8 +190,8 @@ a:hover{ margin-left: 10px; height: 45px; position: absolute; - } + .botões{ padding: 10px 20px; @@ -194,5 +200,49 @@ 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:458px){ + + .cabecalho .logo{ + margin-top: 11px; + margin-left: 10px; + height: 32px; + position: absolute; + + } + } From e7fb702064d10e5962b775a167691a74a75e10cd Mon Sep 17 00:00:00 2001 From: "Sid. Daniel" <102486000+SidneyDaniel@users.noreply.github.com> Date: Thu, 11 Aug 2022 19:51:12 -0300 Subject: [PATCH 02/15] Update README --- README | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README b/README index c73da25..098f6c6 100644 --- a/README +++ b/README @@ -1 +1 @@ -Projeto de decodificador e codificador do curso Oracle Next Alura \ No newline at end of file +Projeto de decodificador e codificador do curso Oracle Next Alura(Projeto principal) From 5322d27f9671d06f2cf8493f8aa49977afaf0f63 Mon Sep 17 00:00:00 2001 From: SidneyDaniel Date: Wed, 17 Aug 2022 22:19:22 -0300 Subject: [PATCH 03/15] JS update --- JS_decodificador.JS | 48 ++++++++++++++++++++++++++++++++--------- decodificador.html | 12 +++++------ style_decodificador.css | 20 ++++++++++------- 3 files changed, 56 insertions(+), 24 deletions(-) diff --git a/JS_decodificador.JS b/JS_decodificador.JS index d3083d8..b5d7120 100644 --- a/JS_decodificador.JS +++ b/JS_decodificador.JS @@ -1,10 +1,38 @@ -/* -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 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); + }) + + + + + + + + + + + diff --git a/decodificador.html b/decodificador.html index 125d038..d687bb4 100644 --- a/decodificador.html +++ b/decodificador.html @@ -18,30 +18,30 @@

_DECODER_

- +
- +
- +
- +
- + diff --git a/style_decodificador.css b/style_decodificador.css index 1183bff..4db5e9e 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.pinimg.com/originals/35/8b/53/358b539b1fe285e32573de0a9cd15182.jpg); + background-image: url(https://i.pinimg.com/originals/3c/ab/43/3cab434622d9fabfde2f46e9a51380d6.gif); background-size: cover; background-position: center center; background-repeat: no-repeat; @@ -81,7 +82,7 @@ h1{ } -#texto{ +.texto{ width: 400px; height: 400px; max-width: 400px; @@ -102,7 +103,7 @@ h1{ -.decode #texto{ +.decode .texto{ height: 400px; width: 400px; margin-top: -461px; @@ -168,10 +169,13 @@ a{ a:hover{ font-weight: bolder; font-size: large; - background-color: #fff; - color: black; + 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); + + } @media screen and (max-width:768px){ @@ -200,7 +204,7 @@ a:hover{ margin-right: 99%; } - .decode #texto{ + .decode .texto{ margin-top: 20px; border-radius: 4px; margin-bottom: 30px; @@ -223,7 +227,7 @@ a:hover{ } @media screen and (max-width:1051px){ - .decode #texto{ + .decode .texto{ margin-top: 20px; border-radius: 4px; margin-bottom: 30px; From 3229e09c101c836c77412bb98b8818e2ac2817fc Mon Sep 17 00:00:00 2001 From: SidneyDaniel Date: Thu, 18 Aug 2022 19:34:53 -0300 Subject: [PATCH 04/15] update: copy button, styles --- JS_decodificador.JS | 26 ++++++++++++++ decodificador.html | 14 +++++--- style_decodificador.css | 77 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 113 insertions(+), 4 deletions(-) diff --git a/JS_decodificador.JS b/JS_decodificador.JS index b5d7120..4b42501 100644 --- a/JS_decodificador.JS +++ b/JS_decodificador.JS @@ -1,5 +1,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(){ @@ -27,10 +28,35 @@ }) + + 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/decodificador.html b/decodificador.html index d687bb4..acd2bdf 100644 --- a/decodificador.html +++ b/decodificador.html @@ -4,8 +4,10 @@ - Document + Decoder + + @@ -18,7 +20,7 @@

_DECODER_

- +
@@ -34,6 +36,7 @@

_DECODER_

+ content_copy
@@ -42,8 +45,11 @@

_DECODER_

diff --git a/style_decodificador.css b/style_decodificador.css index 4db5e9e..1095180 100644 --- a/style_decodificador.css +++ b/style_decodificador.css @@ -98,6 +98,7 @@ h1{ padding: 10px; font-family: 'Gelassio', serif; outline: none; + text-transform: lowercase; } @@ -111,10 +112,21 @@ h1{ 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; @@ -178,6 +190,21 @@ a:hover{ } +.art{ + text-align: end; + font-size: 8px; + color: #fff; + cursor: pointer; + transition: 0.50s; + letter-spacing: 2px; + position: absolute; + font-style: italic; +} + +.art:hover{ + color: aqua; +} + @media screen and (max-width:768px){ .estructure{ padding: 100px 200px 0px 10px; @@ -238,6 +265,56 @@ a:hover{ } +@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{ From 65ae1caabf997d5bc1e3c0c1c3ca0b9d3d5c5141 Mon Sep 17 00:00:00 2001 From: SidneyDaniel Date: Fri, 19 Aug 2022 12:40:30 -0300 Subject: [PATCH 05/15] scrollbar customization --- style_decodificador.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/style_decodificador.css b/style_decodificador.css index 1095180..e546477 100644 --- a/style_decodificador.css +++ b/style_decodificador.css @@ -26,16 +26,16 @@ body::-webkit-scrollbar{ } -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: rgb(0,0,0,0.45); From cfe59e2bb51af64bae924c2989bd348ee6694c0e Mon Sep 17 00:00:00 2001 From: SidneyDaniel Date: Fri, 19 Aug 2022 13:44:13 -0300 Subject: [PATCH 06/15] redame changes --- README | 41 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) diff --git a/README b/README index 098f6c6..ea2fac1 100644 --- a/README +++ b/README @@ -1 +1,40 @@ -Projeto de decodificador e codificador do curso Oracle Next Alura(Projeto principal) +

_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: From 0ceec69449062f80ac282707fe0bfd36617b6534 Mon Sep 17 00:00:00 2001 From: "Sid. Daniel" <102486000+SidneyDaniel@users.noreply.github.com> Date: Fri, 19 Aug 2022 13:51:34 -0300 Subject: [PATCH 07/15] Update README --- README | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README b/README index ea2fac1..4e92d33 100644 --- a/README +++ b/README @@ -38,3 +38,5 @@ Um ótimo exemplo é quando se escreve digita "gato" que se codifica para "gaito Links: Projeto Base: +https://www.figma.com/file/tvFEYhVfZTjdJ5P24RGV21/Alura-Challenge---Desafio-1---Lógica?node-id=16%3A802 + From 0ca0d205f3041f8638aa5a383c08cdd1cead6517 Mon Sep 17 00:00:00 2001 From: SidneyDaniel Date: Fri, 19 Aug 2022 14:40:17 -0300 Subject: [PATCH 08/15] change name --- README | 1 + 1 file changed, 1 insertion(+) diff --git a/README b/README index ea2fac1..7f29221 100644 --- a/README +++ b/README @@ -38,3 +38,4 @@ Um ótimo exemplo é quando se escreve digita "gato" que se codifica para "gaito Links: Projeto Base: + From 7dfefc2a474fbee2b4c9b9284af6f7d4cb472983 Mon Sep 17 00:00:00 2001 From: SidneyDaniel Date: Fri, 19 Aug 2022 14:40:36 -0300 Subject: [PATCH 09/15] changes --- decodificador.html => index.html | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename decodificador.html => index.html (100%) diff --git a/decodificador.html b/index.html similarity index 100% rename from decodificador.html rename to index.html From 5ab8ee2efa968c99cd3d177b914fedcc0ebe0f14 Mon Sep 17 00:00:00 2001 From: SidneyDaniel Date: Wed, 24 Aug 2022 18:30:52 -0300 Subject: [PATCH 10/15] Alignment and link changes --- index.html | 8 ++++---- style_decodificador.css | 41 +++++++++++++++++++++++++++++++++++++---- 2 files changed, 41 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index acd2bdf..24bc180 100644 --- a/index.html +++ b/index.html @@ -44,11 +44,11 @@

_DECODER_

diff --git a/style_decodificador.css b/style_decodificador.css index e546477..19bf208 100644 --- a/style_decodificador.css +++ b/style_decodificador.css @@ -107,7 +107,7 @@ h1{ .decode .texto{ height: 400px; width: 400px; - margin-top: -461px; + margin-top: -462px; border-radius: 4px; margin-bottom: 30px; margin-left: 40%; @@ -169,7 +169,7 @@ h1{ } -a{ +.links{ color: #fff; text-decoration: none; transition: 0.90s; @@ -178,7 +178,7 @@ a{ } -a:hover{ +.links:hover{ font-weight: bolder; font-size: large; background-color: rgba(20, 20, 20, 0); @@ -197,7 +197,7 @@ a:hover{ cursor: pointer; transition: 0.50s; letter-spacing: 2px; - position: absolute; + position: relative; font-style: italic; } @@ -327,3 +327,36 @@ a:hover{ } + +@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; + } + +} + + + From f2d442c32d7304deeb828d91f7e45f9a105755e4 Mon Sep 17 00:00:00 2001 From: SidneyDaniel Date: Wed, 24 Aug 2022 18:40:48 -0300 Subject: [PATCH 11/15] button style change --- style_decodificador.css | 1 - 1 file changed, 1 deletion(-) diff --git a/style_decodificador.css b/style_decodificador.css index 19bf208..394dde1 100644 --- a/style_decodificador.css +++ b/style_decodificador.css @@ -154,7 +154,6 @@ h1{ .botão:hover{ - letter-spacing: 4px; background-color: black; From abfd51a88b15ac785491cfb1e0c07cc4d5e0f404 Mon Sep 17 00:00:00 2001 From: SidneyDaniel Date: Wed, 31 Aug 2022 17:34:38 -0300 Subject: [PATCH 12/15] changes in style off the button and links --- style_decodificador.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/style_decodificador.css b/style_decodificador.css index 394dde1..befbaab 100644 --- a/style_decodificador.css +++ b/style_decodificador.css @@ -155,6 +155,7 @@ h1{ .botão:hover{ background-color: black; + transform: scale(1.1); @@ -178,8 +179,6 @@ h1{ } .links:hover{ - font-weight: bolder; - font-size: large; background-color: rgba(20, 20, 20, 0); color: rgb(0, 247, 255); padding: 10px; From 0f1de9e68538f3966a0890cddaed708309253a80 Mon Sep 17 00:00:00 2001 From: SidneyDaniel Date: Wed, 31 Aug 2022 18:05:10 -0300 Subject: [PATCH 13/15] readme --- README | 1 + 1 file changed, 1 insertion(+) diff --git a/README b/README index ea2fac1..0d69932 100644 --- a/README +++ b/README @@ -38,3 +38,4 @@ Um ótimo exemplo é quando se escreve digita "gato" que se codifica para "gaito Links: Projeto Base: +vvv \ No newline at end of file From 1427e1867275ec63591a9ac07ce50f001f9f564b Mon Sep 17 00:00:00 2001 From: "Sid. Daniel" <102486000+SidneyDaniel@users.noreply.github.com> Date: Tue, 11 Oct 2022 14:05:41 -0300 Subject: [PATCH 14/15] Att README --- README => readme | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename README => readme (99%) diff --git a/README b/readme similarity index 99% rename from README rename to readme index 0d69932..18944c7 100644 --- a/README +++ b/readme @@ -38,4 +38,4 @@ Um ótimo exemplo é quando se escreve digita "gato" que se codifica para "gaito Links: Projeto Base: -vvv \ No newline at end of file +vvv From 0c14523458fa915b24448444af0583a7f28ada1d Mon Sep 17 00:00:00 2001 From: "Sid. Daniel" <102486000+SidneyDaniel@users.noreply.github.com> Date: Tue, 11 Oct 2022 14:09:11 -0300 Subject: [PATCH 15/15] md --- readme => README.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename readme => README.md (100%) diff --git a/readme b/README.md similarity index 100% rename from readme rename to README.md