Modify index.html, Create script.js

Fixed typos and modified contents in index.html. Created script.js
thesrhari · Aug 4, 2024 · 877f609 · 877f609
1 parent 1c55903
commit 877f609
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -7,29 +7,26 @@
   </head>
   <body>
     <h1>Caesar Cipher</h1>
+
     <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 />
 
-    <input
-      type="radio"
-      id="encode"
-      name="direction_type"
-      value="encode"
-      checked
-    />
+    <input type="radio" name="direction_type" id="encode" value="encode" />
     <label for="encode">Encode</label>
     <br />
-    <input type="radio" id="decode" name="direction_type" value="decode" />
+    <input type="radio" name="direction_type" id="decode" value="decode" />
     <label for="decode">Decode</label>
     <br /><br />
-    <button type="submit">Submit</button>
+    <button type="submit" onclick="getValue()">Submit</button>
 
     <br /><br />
     <p><label for="output">Output:</label></p>
-    <textarea name="output" id="ouput" rows="20" cols="60"></textarea>
+    <textarea name="output" id="output" rows="20" cols="60"></textarea>
+
+    <script src="script.js"></script>
   </body>
 </html>
diff --git a/script.js b/script.js
@@ -0,0 +1,50 @@
+const alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p',
+    'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
+
+
+function caesar(text, shift, direction){
+    let caesar_text = "";
+    shift = Number(shift);
+    if (direction == "decode"){
+        shift *= -1;
+    }
+    for (const letter of text){
+        if (alphabet.includes(letter)){
+            const position = alphabet.indexOf(letter);
+            const shifted_position = position + shift;
+            const alphabet_length = alphabet.length;
+            const new_position = mod(shifted_position, alphabet_length);
+            caesar_text += alphabet[new_position];
+            console.log(position + shift);
+        }
+        else{
+            caesar_text += letter
+        }
+    }
+    let output = document.getElementById("output");
+    output.value = caesar_text;
+}
+
+function mod(a, b){
+    return ((a % b) + b) % b;
+}
+
+
+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;
+    }
+    else if (document.getElementById("decode").checked){
+        direction_type = document.getElementById("decode").value;
+    }
+
+    if ((plain_text == "") || (shift_amount == "") || (direction_type == undefined)){
+        alert("Please enter all fields!");
+    }
+    else{
+        caesar(plain_text, shift_amount, direction_type);
+    }
+}