diff --git a/index.html b/index.html index 59bd5fd..62a9858 100644 --- a/index.html +++ b/index.html @@ -4,28 +4,81 @@ Caesar Cipher + + + + + + -

Caesar Cipher

+
+

Caesar Cipher

+
+
+
+
+

+ +
+ +
+ + -

-

- - -

+
+
+ + +
+
+ + +
+
- - -
- - -

- + +
+
-

-

- +
+

+ +
+
diff --git a/script.js b/script.js index 23f46ff..3262705 100644 --- 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); } -} \ No newline at end of file +} + + +// 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); +}); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..a7fb6f0 --- /dev/null +++ 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; +} \ No newline at end of file