merge pull request #3 from bracamontesman/frontend-v2

add missing styles and a js function to reset the app
bracamontesman · Aug 19, 2024 · 9f20b43 · 9f20b43
2 parents 6a8b20a + 6860f7e
commit 9f20b43
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 15 deletions.
diff --git a/cipher.js b/cipher.js
@@ -18,6 +18,14 @@ document.getElementById('copyText').addEventListener('click', function() {
     copyToClipboard(resultText);
 });
 
+document.getElementById('logoReset').addEventListener('click', function() {
+    // clear the content of the textarea
+    document.getElementById('inputText').value = '';
+
+    // reload the page
+    location.reload();
+});
+
 // Validate and convert input to lowercase
 function validateAndConvert(text) {
     let warningMessage = document.getElementById('warningMessage');
@@ -53,7 +61,7 @@ function displayOutput(text) {
     // Hide the default message and show the result container
     defaultMessage.style.display = 'none';
     resultTextDiv.innerText = text;
-    resultContainer.style.display = 'block';
+    resultContainer.style.display = 'flex';
 }
 
 // Copy the result text to the clipboard when the user clicks the "copy" button

diff --git a/index.html b/index.html
@@ -16,15 +16,15 @@
 
         <!-- Left side: Upper logo -->
         <div class="logo">
-            <img src="img/logo.png" alt="Alura logo" class="logo__image">
+            <img src="img/logo.png" alt="Alura logo" class="logo__image" id="logoReset">
         </div>
 
         <!-- Center: Text input and buttons -->
         <div class="input">
             <textarea id="inputText" placeholder="enter text here"></textarea>
-            <p class="input__requirement"><i class="fa-solid fa-circle-info"></i> a-z only, no specials</p>
+            <p class="input__requirement"><i class="fa-solid fa-circle-info"></i> a-z only, no caps nor specials. hit the logo on the left to reset.</p>
             <div class="buttons">
-                <button id="encrypt">lock</button>
+                <button id="encrypt" class="background">lock</button>
                 <button id="decrypt">unlock</button>
             </div>
             <p id="warningMessage" class="input__warning"></p>
@@ -34,8 +34,8 @@
         <div class="results" id="cipherOutput">
             <div id="defaultMessage">
                 <img src="img/muñeco.png" id="defaultImage" alt="Default Image">
-                <p>no message processed</p>
-                <p>please, enter a message to encrypt/decrypt</p>
+                <p class="default__text">no message processed</p>
+                <p>enter a message to encrypt/decrypt</p>
             </div>
             <div id="resultContainer" style="display: none;">
                 <div id="resultText"></div>

diff --git a/style.css b/style.css
@@ -5,10 +5,10 @@
     --primary-color: #0a3871;
     --secondary-color: #495057;
     --button-padding: 0.8rem;
-    --button-border-radius: 1.5rem;
+    --button-border-radius: 1rem;
     --button-border-width: 0.063rem;
     --button-border-color: #0a3871;
-    --button-background: transparent;
+    --button-background-color: #0a3871;
     --button-cursor: pointer;
     --results-background: #ffffff;
     --results-border-radius: 2rem;
@@ -56,7 +56,7 @@ body, html {
 /* Center side: Text input area */
 textarea {
     width: auto;
-    height: 70%;
+    height: 83%;
     background: transparent;
     border: none;
     box-shadow: none;
@@ -72,6 +72,7 @@ textarea {
     flex: 2;
     flex-direction: column;
     justify-content: center;
+    margin-right: 1.7rem;
 }
 
 .input__requirement {
@@ -101,14 +102,18 @@ textarea {
     padding: var(--button-padding);
     border-radius: var(--button-border-radius);
     border: var(--button-border-width) solid var(--button-border-color);
-    background: var(--button-background);
     outline: none;
     text-decoration: none;
     margin: 0;
     font: inherit;
     cursor: var(--button-cursor);
 }
 
+.background {
+    background-color: var(--button-background-color);
+    color: #ffffff;
+}
+
 /* Right side: Default image and Results */
 .results {
     display: flex;
@@ -133,11 +138,23 @@ textarea {
     height: var(--image-height);
 }
 
+.default__text {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin: 1rem 0 1rem 0;
+}
+
 #resultContainer {
     display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%;
 }
 
 #resultText {
+    flex-grow: 1;
+    margin-bottom: 1rem;
     overflow-wrap: break-word;
     word-break: break-word;
     white-space: pre-wrap;
@@ -146,21 +163,34 @@ textarea {
 
 #copyText {
     margin-top: auto;
-    border-radius: var(--button-border-radius); /* Consistent button styling */
-    border: var(--button-border-width) solid var(--button-border-color); /* Consistent button styling */
-    background: var(--button-background); /* Consistent button styling */
-    cursor: var(--button-cursor); /* Pointer cursor on hover */
+    padding: var(--button-padding);
+    border-radius: var(--button-border-radius);
+    border: var(--button-border-width) solid var(--button-border-color);
+    background: var(--button-background);
+    cursor: var(--button-cursor);
 }
 
-
 /* Responsiveness */
 @media (max-width: 1200px), (max-width: 450px) {
     .container {
         flex-direction: column;
     }
 
+    .logo {
+        max-height: 5rem;
+    }
+
+    .input {
+        margin: 0;
+    }
+
     .results {
         max-width: 100%;
+        max-height: 25%;
+    }
+
+    .default__text {
+        margin: 0;
     }
 
     #defaultImage {