Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
<title>Caesar Cipher</title>
<style type="text/css">
body {
margin: 0 auto;
max-width: 40em;
width: 88%;
}
label,
input {
display: block;
width: 100%;
}
label {
font-weight: bold;
}
input {
margin-bottom: 1em;
}
</style>
</head>
<body>
<h1>Caesar Cipher</h1>
<div>
<label for="msg">Message</label>
<input type="text" class="encrypt" shift="msg">
</div>
<div>
<label for="shift">Shift</label>
<input type="number" class="encrypt" step="1" max="36" min="-36" id="shift" value="2">
</div>
<div>
<label for="passes">Number of Passes</label>
<input type="number" class="encrypt" step="1" id="passes" value="5">
</div>
<div>
<label for="cipher">Encrypted Message</label>
<input type="text" id="cipher" readonly>
</div>
<script>
//
// Variables
//
// Our base cipher
var letters = ['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', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', ' '];
var cipherLen = letters.length;
var cipherMaxIndex = cipherLen - 1;
// Get encryption fields
var fields = document.querySelectorAll('.encrypt');
var cipher = document.querySelector('#cipher');
//
// Methods
//
/**
* Shift a character by an integer
* @param {String} char The character to shift
* @param {Integer} shiftBy The amount to shift the letter by
* @return {String} The shifted character
*/
var shiftMessage = function (char, shiftBy) {
// Get the index of the character in the cipher
var index = letters.indexOf(char.toLowerCase());
// If it's not a cipher character, return it as-is
if (index < 0) return char;
// Get the shifted index
var shiftedIndex = shiftBy + index;
// If shifted index is greater than cipher length, start at the beginning
if (shiftedIndex > cipherMaxIndex) {
shiftedIndex = shiftedIndex - cipherLen;
}
// If shifted index is lower than cipher length, start at the end
if (shiftedIndex < 0) {
shiftedIndex = shiftedIndex + cipherLen;
}
// Return the shifted letter
return letters[shiftedIndex];
};
/**
* Run the encryption algorithm
* @param {String} message The message to encrypt
* @param {Integer} shiftBy Number of characters to offset by
* @return {String} The encrypted message
*/
var runEncryption = function (message, shiftBy) {
return message.split('').map(function (char) {
return shiftMessage(char, shiftBy);
}).join('');
};
/**
* Encrypt the message
*/
var encrypt = function () {
// Get the number of characters to shift by
var shiftBy = parseInt(fields[1].value, 10);
// Get the number of passes to run encryption
var passes = parseInt(fields[2].value, 10);
// Encrypt the message
var encrypted = fields[0].value;
for (var i = 0; i < passes; i++) {
encrypted = runEncryption(encrypted, shiftBy)
}
// Show the encrypted message
cipher.value = encrypted;
};
/**
* Handle input change events
* @param {Event} event The event object
*/
var inputHandler = function (event) {
// Only run on .encrypt fields
if (!event.target.matches('.encrypt')) return;
// Otherwise, encrypt the message
encrypt();
};
//
// Event Listeners
//
document.addEventListener('input', inputHandler);
</script>
</body>
</html>
@hajimurtaza
Copy link

decipher?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment