├── README.md ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Carser-Cipher 2 | Protect Your Massages With This Encryption & Decryption System 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 |26 | CAESAR 28 | CIPHER 29 |
30 | 31 |32 | Enter 33 | your message for encryption: 34 |
35 | 36 |37 |
38 | 39 | 40 | 48 | 49 | 50 | 51 | 52 | 53 |54 | 55 | Enter 56 | your encrypted message for decryption: 57 |
58 | 59 | 60 | 61 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | var alphabet = "abcdefghijklmnopqrstuvwxyz"; 2 | var newalpha = ""; 3 | 4 | function shift() { 5 | for (let i = 0; i < alphabet.length; i++) { 6 | let offset = (i + 4) % alphabet.length; 7 | newalpha += alphabet[offset]; 8 | } 9 | } 10 | 11 | 12 | function encode() { 13 | 14 | shift(); 15 | var res = ""; 16 | let message = document.getElementById("EncryptMessage").value; 17 | let result = ""; 18 | message = message.toLowerCase(); 19 | for (let i = 0; i < message.length; i++) { 20 | let index = alphabet.indexOf(message[i]); 21 | result += newalpha[index]; 22 | } 23 | res = ("Your Encrypted Message: ").concat(result); 24 | window.alert(res); 25 | } 26 | 27 | 28 | function decode() { 29 | 30 | shift(); 31 | var res2 = ""; 32 | let message2 = document.getElementById("DecryptMessage").value; 33 | let result = ""; 34 | message2 = message2.toLowerCase(); 35 | for (let i = 0; i < message2.length; i++) { 36 | let index = newalpha.indexOf(message2[i]); 37 | result += alphabet[index]; 38 | } 39 | res2 = ("Your Decrypted Message: ").concat(result); 40 | window.alert(res2); 41 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | 5 | } 6 | .button:hover { 7 | color: lightsalmon; 8 | } 9 | 10 | p { 11 | font-family: 'Montserrat', sans-serif; 12 | /* font-family: 'Roboto', sans-serif; */ 13 | 14 | } --------------------------------------------------------------------------------