swapnilsparsh · swapnilsparsh · Oct 21, 2021 · Oct 19, 2021 · Oct 21, 2021
diff --git a/30DaysOfJavaScript/assets/47.jpg b/30DaysOfJavaScript/assets/47.jpg
diff --git a/30DaysOfJavaScript/assets/47.png b/30DaysOfJavaScript/assets/47.png
diff --git a/47 - Caesar Cipher/1_caesar_cipher.css b/47 - Caesar Cipher/1_caesar_cipher.css
@@ -0,0 +1,71 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+html{
+    display: table;
+    margin: auto;
+}
+body{
+    width: 80vw;
+    display: flex;
+    flex-direction: column;
+    background-color: #18172F;
+}
+h1{
+    color: #fff;
+    font-size: 2.5rem;
+    margin:10px 0px;
+}
+form{
+    color: #fff;
+}
+#entry{
+    width: 100%;
+    margin: 10px 0px;
+    background-color: #dacce6;
+    border: 3px solid #fff;
+    border-radius: 10px;
+    padding: 10px;
+    font-size: 1rem;
+}
+#key{
+    margin: 10px 10px;
+    background-color: #dacce6;
+    border: 3px solid #fff;
+    border-radius: 10px;
+    font-size: 1rem;
+    padding: 5px;
+}
+form label{
+    font-size: 1.3rem;
+}
+button{
+    margin: 10px 0px;
+    padding: 12px 15px;
+    color: #000000;
+    background-color: #BB87FD;
+    border: none;
+    border-radius: 10px;
+    font-size: 1rem;
+    cursor: pointer;
+}
+button:hover{
+    background-color: #754aad;
+
+}
+#decrypt{
+    margin-left: 5px;
+}
+output{
+    width: 100%;
+    margin: 10px 0px;
+    background-color: #dacce6;
+    border: 3px solid #fff;
+    border-radius: 10px;
+    padding: 10px;
+    font-size: 1rem;
+    display: none;
+}
diff --git a/47 - Caesar Cipher/2_caesar_cipher.html b/47 - Caesar Cipher/2_caesar_cipher.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="1_caesar_cipher.css">
+    <title>Document</title>
+</head>
+<body>
+    <h1>Caesar Cipher</h1>
+    <form id="fid1">
+        <label for="entry">Enter Text/Code:</label><br>
+        <textarea name="entry" id="entry" rows="10" placeholder="Enter Text/Code" value=""></textarea><br>
+        <label for="key">Key Value:</label>
+        <input type="number" id="key" name="key" value=""></input><br>
+    </form>
+    <span>
+        <button type="button" form="fid1" id="encrypt" name="encrypt" onClick="main(1)">Encrypt</button>
+        <button type="button" form="fid1" id="decrypt" name="decrypt" onClick="main(2)">Decrypt</button>
+    </span>
+    <output id="output"></output>
+    <script type="text/javascript" src="3_caesar_cipher.js"></script>
+</body>
+</html>
diff --git a/47 - Caesar Cipher/3_caesar_cipher.js b/47 - Caesar Cipher/3_caesar_cipher.js
@@ -0,0 +1,45 @@
+
+function main(x) { // x identifies from which button call is being made: Encrypt or Decrypt
+    var entry_text = document.getElementById('entry').value
+    var key_val = parseInt(document.getElementById('key').value) // Reading and storing both the inputs
+    key_val = key_val % 26
+    if(x===2){
+        key_val = (-1) * key_val  // If call is for Decrypt then key value entered becomes negative
+    }
+    var final_string = ""
+    for (var i = 0; i < entry_text.length; i++) {
+        final_string = final_string + change(entry_text.charAt(i), key_val)
+      }
+    out_ele = document.getElementById('output')
+    out_ele.style.display = final_string === "" ? "none":"flex"
+    out_ele.innerHTML = final_string  
+}
+
+function isUpperCase(str) { // function to check if letter/word is uppercase or not
+    return str === str.toUpperCase()
+}
+
+function change(ch, key){  // function to shift alphabets according to the key value
+    if (!(/[a-zA-Z]/).test(ch)){ // checks for symbol and returns without any change if found
+        return ch
+    }
+    if(isUpperCase(ch)){
+        let no =  (ch.charCodeAt(0) + key - 65) % 26 + 65
+        if(no < 65){
+            return (String.fromCharCode(no+26))
+        }
+        else{
+            return (String.fromCharCode(no))
+        }
+    }
+    else{
+        let no = (ch.charCodeAt(0) + key - 97) % 26 + 97
+        if(no < 97){
+            return (String.fromCharCode(no+26))
+        }
+        else{
+            return (String.fromCharCode(no))
+        }
+    }
+
+}
diff --git a/index.html b/index.html
@@ -345,6 +345,13 @@ <h4>Chatting App</h4>
         <h4>Image Slider</h4>
       </a>
     </div>
+
+    <div class="item">
+      <a target="_blank" href="47 - Caesar Cipher/index.html">
+        <img src="30DaysOfJavaScript/assets/47.png" alt="Caesar Cipher" />
+        <h4>Caesar Cipher</h4>
+      </a>
+    </div>
   </div>
   <footer>
     <p>&#x3c; &#47; &#x3e; with ❤️ by