Create styles.css, update index.html & script.js

- Added `styles.css` for site styling and responsiveness - Updated `index.html` to work with styles.css - Modified `script.js` to remove unnecessary code. Added function to clear output field when clearing input field
thesrhari · Aug 5, 2024 · 6a0d322 · 6a0d322
1 parent 877f609
commit 6a0d322
Show file tree

Hide file tree

Showing 3 changed files with 187 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -4,28 +4,81 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Caesar Cipher</title>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      rel="stylesheet"
+    />
+
+    <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <h1>Caesar Cipher</h1>
+    <div class="title">
+      <h1>Caesar Cipher</h1>
+    </div>
+    <div class="container">
+      <div>
+        <div class="input_field">
+          <p><label for="plain_text">Enter text to encode/decode:</label></p>
+          <textarea
+            name="plain_text"
+            id="plain_text"
+            rows="20"
+            cols="60"
+          ></textarea>
+        </div>
+
+        <div>
+          <label for="shift_amount">Shift amount:</label>
+          <input
+            type="number"
+            name="shift_amount"
+            id="shift_amount"
+            class="shift_amount"
+          />
 
-    <p><label for="plain_text">Enter text to encode/decode:</label></p>
-    <textarea name="plain_text" id="plain_text" rows="20" cols="60"></textarea
-    ><br /><br />
-    <label for="shift_amount">Shift amount:</label>
-    <input type="text" name="shift_amount" id="shift_amount" />
-    <br /><br />
+          <div class="radio_buttons">
+            <div>
+              <input
+                type="radio"
+                name="direction_type"
+                class="direction_type"
+                id="encode"
+                value="encode"
+              />
+              <label for="encode">Encode</label>
+            </div>
+            <div>
+              <input
+                type="radio"
+                name="direction_type"
+                class="direction_type"
+                id="decode"
+                value="decode"
+              />
+              <label for="decode">Decode</label>
+            </div>
+          </div>
 
-    <input type="radio" name="direction_type" id="encode" value="encode" />
-    <label for="encode">Encode</label>
-    <br />
-    <input type="radio" name="direction_type" id="decode" value="decode" />
-    <label for="decode">Decode</label>
-    <br /><br />
-    <button type="submit" onclick="getValue()">Submit</button>
+          <button type="submit" class="submit_button" onclick="getValue()">
+            Submit
+          </button>
+        </div>
+      </div>
 
-    <br /><br />
-    <p><label for="output">Output:</label></p>
-    <textarea name="output" id="output" rows="20" cols="60"></textarea>
+      <div>
+        <p><label for="output">Output:</label></p>
+        <textarea
+          name="output"
+          id="output"
+          rows="20"
+          cols="60"
+          readonly
+        ></textarea>
+      </div>
+    </div>
 
     <script src="script.js"></script>
   </body>

diff --git a/script.js b/script.js
@@ -2,9 +2,11 @@ const alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm
     'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
 
 
+// Encoding and decoding happens here
 function caesar(text, shift, direction){
     let caesar_text = "";
     shift = Number(shift);
+
     if (direction == "decode"){
         shift *= -1;
     }
@@ -13,9 +15,11 @@ function caesar(text, shift, direction){
             const position = alphabet.indexOf(letter);
             const shifted_position = position + shift;
             const alphabet_length = alphabet.length;
+
+            // Calling mod() func
             const new_position = mod(shifted_position, alphabet_length);
+
             caesar_text += alphabet[new_position];
-            console.log(position + shift);
         }
         else{
             caesar_text += letter
@@ -25,15 +29,17 @@ function caesar(text, shift, direction){
     output.value = caesar_text;
 }
 
+// Returns remainder (Also works with negative numbers)
 function mod(a, b){
     return ((a % b) + b) % b;
 }
 
-
+// Collects input and calls caesar() function
 function getValue(){
     let plain_text = document.getElementById("plain_text").value;
     let shift_amount = document.getElementById("shift_amount").value;
     let direction_type;
+
     if (document.getElementById("encode").checked){
         direction_type = document.getElementById("encode").value;
     }
@@ -47,4 +53,19 @@ function getValue(){
     else{
         caesar(plain_text, shift_amount, direction_type);
     }
-}
+}
+
+
+// Checking and clearing output field if input field is empty
+function checkIfEmpty() {
+    const textarea = document.getElementById('plain_text');
+    if (textarea.value == "") {
+        const output_field = document.getElementById("output");
+        output_field.value = "";
+    }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    const textarea = document.getElementById('plain_text');
+    textarea.addEventListener('input', checkIfEmpty);
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1,93 @@
+*{
+    padding: 0;
+    margin: 0;
+}
+
+body{
+    background-color: #151515;
+    color: #EEEEEE;
+    font-family: 'Poppins', Arial;
+}
+
+.title{
+    background-color: #C73659;
+    color: #eeeeee;
+    padding: 15px 0;
+    padding-left: 25px;
+    margin-bottom: 50px;
+}
+
+.container{
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+    padding: 0 20px;
+}
+
+textarea{
+    field-sizing: content;
+    resize: none;
+    min-height: 20lh;
+    min-width: 30lh;
+    background-color: #dddddd;
+    border-radius: 10px;
+    border: 2px solid transparent;
+    outline: none;
+    padding: 1em;
+    margin-top: 5px;
+    margin-bottom: 20px;
+}
+
+@media (max-width: 480px){
+    textarea{
+        min-height: 10lh;
+        min-width: 15lh;
+    }
+}
+
+.shift_amount{
+    margin-bottom: 20px;
+    border-radius: 5px;
+    width: 100px;
+    border: 2px solid transparent;
+    background-color: #dddddd;
+    outline: none;
+    padding: 0.3em;
+}
+
+.radio_buttons{
+    display: flex;
+    gap: 10px;
+}
+
+.direction_type{
+    margin-bottom: 10px;
+    accent-color: #A91D3A;
+}
+
+.submit_button{
+    margin-top: 10px;
+    margin-bottom: 20px;
+    padding: 5px 15px;
+    border-radius: 10px;
+    border: 2px solid transparent;
+    color: white;
+    background-color: #C73659;
+    font-size: 1em;
+}
+
+.submit_button:hover{
+    cursor: pointer;
+}
+
+/* Removing arrows from number input field */
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}