cferdinandi/caesar-cipher.html

## caesar-cipher.html
<!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>
	<!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>