estilos

index.html

@@ -30,10 +30,10 @@
                 <h2 class="codificador__resultado__subtitulo">Nenhuma mensagem encontrada</h2>
                 <p class="codificador__resultado__texto">Digite um texto que você deseja criptografar ou descriptografar.</p>
             </div>
-            <div id="output_default_txt" class="desactive">
-                <p id="text_output"></p>
-                <button id="copiar" class="codificador__resultado__copiar">Copiar</button>
+            <div id="output_default_txt" class="output_default_txt desactive">
+                <p id="text_output" class="text_output"></p>
             </div>
+            <button id="copiar" class="codificador__resultado__copiar desactive">Copiar</button>
         </section>
     </main>
     <footer class="rodape">

scripts/main.js

@@ -31,16 +31,17 @@ getInputText = () => {
 
     console.log(testRegex(textArea.value));
     if (!textArea) {
-      return false;
+        return false;
     }
     return textArea.value;
 };
 setOutputText = (text) => {
     if (!text) {
-      return false;
+        return false;
     }
     document.getElementById("output_default").classList.add("desactive");
     document.getElementById("output_default_txt").classList.remove("desactive");
+    document.getElementById("copiar").classList.remove("desactive");
     document.getElementById("text_output").innerText = `${text}`;
 
 }
@@ -92,18 +93,14 @@ btnCripto.addEventListener("click", () => {
     if(!valid){
         return false; 
     } else {
+        let p = document.getElementById("text_output");
+
+        p.style.fontFamily = "Inter";
+        p.style.fontSize = "24px";
+        p.style.fontWeight = "400";
+        p.style.color = "#495057";
+        p.style.wordBreak = "break-all";        
         console.log(criptografia(textInput));
         criptografia(textInput);
     }
-});
-
-
-
-
-
-
-// msgCriptografada = mensagem.replace(/e/g, 'enter');
-// msgCriptografada = msgCriptografada.replace(/i/g, 'imes');
-// msgCriptografada = msgCriptografada.replace(/a/g, 'ai');
-// msgCriptografada = msgCriptografada.replace(/o/g, 'ober');
-// msgCriptografada = msgCriptografada.replace(/u/g, 'ufat');
+});

style.css

@@ -16,7 +16,8 @@
 body{
     background-color: var(--branco_claro);
     font-weight: 400;
-    width: 100%;
+    box-sizing: border-box;
+    height: 100vh;
     font-family: 'Inter', sans-serif;
 }
 
@@ -46,7 +47,7 @@ textarea::placeholder {
 }
 
 .codificador__digitar{
-    padding: 5% 10%;
+    padding: 0% 10%;
     display: flex;
     flex-direction: column;
     gap: 16px;
@@ -91,20 +92,40 @@ textarea::placeholder {
 }
 
 .codificador__resultado{
+    width: 40%;
     background-color: var(--white);
     box-shadow: 0px 24px 32px -8px #00000014;
     border-radius: 32px;
-    padding: 10% 0% 8%;
+    padding: 5% 0%;
+    box-sizing: border-box;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 32px;
+    justify-content: space-between;
 }
 
 .desactive{
     display: none !important;
 }
 
+.output_default_txt{
+    display: flex;
+    flex-direction: column;
+    gap: 150px;
+    width: 50%;
+    align-items: center;
+    text-align: center;
+}
+
+.text_output{
+    font-family: "Inter";
+    font-size: 24px;
+    font-weight: 400;
+    color: #495057;
+    word-break: break-all;
+}
+
 .codificador__resultado__conteudo {
     text-align: center;
     align-items: center;
@@ -144,21 +165,37 @@ textarea::placeholder {
     flex-direction: column;
     align-items: center;
     width: 100%;
-    margin-top: 5%;
+    margin-top: 3%;
     background-color: var(--azul_escuro);
     color: var(--white);
 }
 
 @media (max-width: 1200px) {
-
-
     main {
         flex-direction: column;
+        align-items: center;
     }
 
     textarea {
         height: 300px;
     }
+
+    .codificador__resultado{
+        align-items: center;
+        width: 70%;
+    }
+
+    .codificador__resultado__img{
+        display: none;
+    }
+
+    .codificador__resultado__copiar {
+        width: 50%;
+    }
+
+    .output_default_txt p{
+        width: 90%;
+    }
 }
 
 .cursor_drop{