From 9a71bd82ab7dc8f04d6bade40f5925b19ea01450 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vict=C3=B3ria=20Barbosa?= Date: Thu, 26 Sep 2024 13:46:10 -0300 Subject: [PATCH] fix --- index.html | 132 ++++++++++++++++++--------- src/index.js | 86 +++++++++--------- style.css | 247 +++++++++++++++++++++++++++++++-------------------- 3 files changed, 284 insertions(+), 181 deletions(-) diff --git a/index.html b/index.html index 673fa9f..bcb3c85 100644 --- a/index.html +++ b/index.html @@ -1,51 +1,95 @@ - - - - - Text Decoder - - - - - - - + + + + + Text Decoder + + + + + + +
-
-
- +
+
+ +
+
+
+ +
+ +

Nenhuma mensagem encontrada

+
+ Digite um texto que você deseja criptografar ou + descriptografar. +
+
-
-
- - -
-

Nenhuma mensagem encontrada

-
Digite um texto que você deseja criptografar ou descriptografar.
-
-
-
-
-
-
- - -
-
- - -
-
-
- github - codepen - Linkedin -
+
+ +
+
+
+ + +
+
+ + +
+
+
- - \ No newline at end of file + + diff --git a/src/index.js b/src/index.js index 70cd273..0099361 100644 --- a/src/index.js +++ b/src/index.js @@ -1,49 +1,55 @@ - -//Variaveis pegando a entrada inserida para ser criptografada e descriptografada const textCriptografar = document.getElementById("textCriptografar"); const buttonCriptografar = document.getElementById("buttonCriptografar"); const buttonDescriptografar = document.getElementById("buttonDescriptografar"); - -function criptografar(textCriptografar) { - let tetx - if (textCriptografar === e) { - } +const resultado = document.getElementById("resultado"); +const divToHide = document.querySelector(".image-display"); + +//funçao para criptografia +function criptografar(texto) { + let textoCriptografado = texto + .replace(/e/g, "enter") + .replace(/i/g, "imes") + .replace(/a/g, "ai") + .replace(/o/g, "ober") + .replace(/u/g, "ufat"); + return textoCriptografado; } -// Recurso de Consulta - -/*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" - -// Recurso de ajuda -/* -function criptografar(texto, chave) { - let criptografado = ""; - for (let index = 0; index < texto.length; index++) { - let letra = texto[index]; - if (letra.match(/[a-z]/i)) { - let codigo = texto.charCodeAt(index); - if (codigo >= 65 && codigo <= 90) { - letra = String.fromCharCode(((codigo - 65 + chave) % 26) + 65); - } else if (codigo >= 97 && codigo <= 122) { - letra = String.fromCharCode(((codigo - 97 + chave) % 26) + 97); - } - } - criptografado += letralll; - } - return criptografado; +//funçao de descriptografia +function descriptografar(texto) { + let textoDescriptografado = texto + .replace(/enter/g, "e") + .replace(/imes/g, "i") + .replace(/ai/g, "a") + .replace(/ober/g, "o") + .replace(/ufat/g, "u"); + return textoDescriptografado; } -function descriptografar(texto, chave) { - return criptografar(texto, 26 - chave); -} +//botao de criptografar +buttonCriptografar.addEventListener("click", () => { + const texto = textCriptografar.value; + +//verificando se o campo de texto nao esta vazio + if (texto.trim() !== "") { + const textoCriptografado = criptografar(texto); + //atualizando a div com o resultado + resultado.textContent = `Texto Criptografado: ${textoCriptografado}`; + //propriedades de estilo para o resultado + resultado.style.textAlign = "center"; + resultado.style.fontSize = "1.2rem"; + resultado.style.color = "#0A3871"; + resultado.style.backgroundColor = "#F1F1F1"; + resultado.style.boxShadow = "0 2px 8px rgba(0, 0, 0, 0.1)"; + //escondendo a div de 'mensagem não encontrada' + divToHide.style.display = "none"; + } +}); -let textoOriginal = "exemplo de texto para criptografar"; -let textoCriptografado = criptografar(textoOriginal, 3); -console.log(textoCriptografado); -let textoDescriptografado = descriptografar(textoCriptografado, 3); -console.log(textoDescriptografado); +//botão de descriptografar +buttonDescriptografar.addEventListener("click", () => { + const texto = textCriptografar.value; + const textoDescriptografado = descriptografar(texto); + resultado.textContent = `Texto Descriptografado: ${textoDescriptografado}`; +}); diff --git a/style.css b/style.css index 4cc6773..8dbfeec 100644 --- a/style.css +++ b/style.css @@ -1,26 +1,30 @@ -.bg-light-blue{ - background-color: #E5E5E5; -} - -.icon { - width: 30px; +/* Reset básico */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; } -.icon:hover{ - width: 40px; +body { + font-family: 'Arial', sans-serif; + background-color: #E5E5E5; + color: #333; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 20px; } -.rotate-logo { - display: inline-block; - position: relative; - font-size: 50px; - font-weight: bold; - font-family: Arial, Helvetica, sans-serif; +/* Cabeçalho e Logo */ +header { + text-align: center; + margin-bottom: 2rem; } .rotate-logo img { - display: block; - position: absolute; + max-width: 100px; animation: rotate 2s linear infinite; } @@ -34,105 +38,154 @@ } } -.btn-criptografar{ - background-color: #0A3871; - color: white; - height: 50px; - width: 270px; - left: 352px; - top: 0px; - border-radius: 20px; - border: none; - text-align: center; -} - -.btn-descriptografar{ - background-color: #D8DFE8; - color: #0A3871; - height: 50px; - width: 270px; - left: 352px; - top: 0px; - border-radius: 20px; - border: 1px solid #0A3871; - -} - -.box-shaddow{ - position: absolute; - width: 350px; - height: 525px; - left: 1000px; - top: 40px; - box-shadow: 0px 24px 32px -8px rgba(0, 0, 0, 0.08); - border-radius: 29px; +/* Container e Formulário */ +main { + width: 100%; + max-width: 600px; + background: white; + padding: 2rem; + border-radius: 15px; + box-shadow: 0px 24px 32px -8px rgba(0, 0, 0, 0.1); } -.input-position{ - position: relative; +.input-position { + width: 100%; + height: 150px; + padding: 15px; border: none; - background-color: #E5E5E5; - width: 680px; - height: 350px; - left: 240px; - font-style: normal; - font-weight: 400; - font-size: 32px; - line-height: 150%; - color: #0a387193; - /*retiranto resize do texterea*/ + background-color: #F1F1F1; + font-size: 1.2rem; + border-radius: 10px; resize: none; - + margin-bottom: 1.5rem; + color: #0A3871; } -.input-position:focus{ +.input-position:focus { outline: none; + border: 2px solid #0A3871; } -.massage-not-found{ - width: 336px; - height: 58px; - font-style: normal; - font-weight: 700; - font-size: 24px; - line-height: 120%; +.box-shaddow { + margin-bottom: 1.5rem; + padding: 20px; + background-color: #fff; + box-shadow: 0px 24px 32px -8px rgba(0, 0, 0, 0.08); + border-radius: 15px; text-align: center; +} + +/* Mensagem de resultado */ +.massage-not-found { + font-size: 1.5rem; color: #343A40; - flex: none; - order: 0; - align-self: stretch; - flex-grow: 0; -} - -.enter-text{ - width: 336px; - height: 48px; - font-style: normal; - font-weight: 400; - font-size: 16px; - line-height: 150%; - text-align: center; + margin-bottom: 0.5rem; +} + +.enter-text { + font-size: 1rem; color: #495057; - flex: none; - order: 1; - align-self: stretch; - flex-grow: 0; } -.left-position{ - left: 5rem; +/* Botões */ +.btn-group { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + gap: 15px; } -.bg-footer-blue{ - background-color: ; +.btn-criptografar, +.btn-descriptografar { + width: 48%; + padding: 12px; + font-size: 1.1rem; + border-radius: 10px; + cursor: pointer; + border: none; + transition: background-color 0.3s ease; } -footer{ - padding: 15px; +.btn-criptografar { + background-color: #0A3871; + color: white; +} + +.btn-criptografar:hover { + background-color: #08325b; +} + +.btn-descriptografar { + background-color: #D8DFE8; + color: #0A3871; + border: 2px solid #0A3871; +} + +.btn-descriptografar:hover { + background-color: #b0bdd1; +} + +/* Ícones do rodapé */ +footer { width: 100%; text-align: center; - height: 5em; - margin: auto; - bottom: 0; - position: fixed; + padding: 1rem 0; + margin-top: 2rem; +} + +footer a { + margin: 0 10px; + transition: transform 0.2s ease; +} + +footer a:hover { + transform: scale(1.1); +} + +.icon { + width: 30px; +} + +.icon:hover { + width: 35px; } + +/* Responsividade */ +@media (max-width: 768px) { + main { + padding: 1.5rem; + } + + .btn-group { + flex-direction: column; + gap: 10px; + } + + .btn-criptografar, + .btn-descriptografar { + width: 100%; + } + + .input-position { + height: 120px; + } +} + +@media (max-width: 480px) { + header img { + max-width: 80px; + } + + .input-position { + height: 100px; + } + + footer img { + width: 25px; + } + + .btn-criptografar, + .btn-descriptografar { + font-size: 1rem; + } +} \ No newline at end of file