Correccion section

coxmau77 · Feb 1, 2024 · fce9930 · fce9930
1 parent aa21e3b
commit fce9930
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 13 deletions.
diff --git a/css/style.css b/css/style.css
@@ -197,7 +197,7 @@ section > div {
   border-radius: 8px;
 }
 
-.content-a > div {
+.empty-message > div {
   display: grid;
   place-content: center;
   text-align: center;
@@ -215,8 +215,8 @@ section > div {
   }
 }
 
-.content-b > div {
-  .mensaje-encriptado-content {
+.display-message > div {
+  .emcrypted-message {
     background-color: var(--border-color);
     padding: 1rem;
     border-radius: 8px;
@@ -225,7 +225,7 @@ section > div {
 
   .copy-btn-content {
     display: flex;
-    justify-content: end;
+    justify-content: flex-end;
   }
 }
 /* </SECTION */

diff --git a/index.html b/index.html
@@ -10,8 +10,8 @@
     <link rel="shortcut icon" href="#" type="image/x-icon">
 </head>
 
-<!-- <body class="dark-theme"> -->
-<body>
+<body class="dark-theme">
+<!-- <body> -->
     <header>
         <div class="logo">
             <h1>txt</h1>
@@ -32,32 +32,32 @@ <h2>Encypt txt challenge</h2>
             <textarea wrap="off" id="input_txt" class="input-txt" placeholder="Ingresar texto" autofocus></textarea>
         </div>
         <div class="btn-group">
-            <button>
+            <button id="btn_decrypt">
                 <i class="bi bi-file-earmark-code"></i>
                 Desencriptar
             </button>
-            <button>
+            <button id="btn_encript">
                 <i class="bi bi-file-earmark-code-fill"></i>
                 Encriptar
             </button>
         </div>
     </main>
-    <section class="content-a hide-content">
+    <section class="empty-message">
         <div>
             <!-- <img src="./img/no-message-img.svg" alt="No message image"> -->
             <i class="bi bi-exclamation-octagon-fill"></i>
             <h2>Ningún mensaje fue encontrado</h2>
             <p>Ingresa el texto que desees encriptar o desencriptar.</p>
         </div>
     </section>
-    <section class="content-b">
+    <section class="display-message">
         <div>
             <div>
                 <h2>content B section</h2>
-                <div class="mensaje-encriptado-content">### #### #### #### ####</div>
+                <div id="encrypted_message" class="emcrypted-message">### #### #### #### ####</div>
             </div>
             <div class="copy-btn-content">
-                <button title="Copiar mensaje">
+                <button id="btn_copy" title="Copiar mensaje">
                     <i class="bi bi-floppy-fill"></i>
                     Copiar
                 </button>

diff --git a/js/script.js b/js/script.js
@@ -1,8 +1,20 @@
+// <Darkmode
 const themeButton = document.getElementById('theme_button');
 const darkTheme = 'dark-theme';
 const selectedTheme = localStorage.getItem('selected-theme');
 const userHasDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
 const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light';
+// </Darkmode
+
+let inputTxt = document.getElementById('input_txt');
+let btnEncript = document.getElementById('btn_encript');
+let btnDecript = document.getElementById('btn_decrypt');
+let encryptedMessage = document.getElementById('encrypted_message');
+let btnCopy = document.getElementById('btn_copy');
+let emptyMessage = document.querySelector('.empty-message');
+let displayMessage = document.querySelector('.display-message');
+
+// <Darkmode
 if (selectedTheme) {
     document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme);
 } else {
@@ -12,4 +24,5 @@ if (selectedTheme) {
 themeButton.addEventListener('click', () => {
     document.body.classList.toggle(darkTheme);
     localStorage.setItem('selected-theme', getCurrentTheme());
-});
+});
+// </Darkmode