Codes and ciphers

Codes and ciphers have always fascinated me. Growing up I loved reading books about spies, with secret codes and hidden invisible pens. As I grew up, this fed in to my logical mind and although most of the knowledge has ebbed away, a passion still remains.

The most famous cipher, code, or at least encrypted message is undoubtedly that produced by the infamous Enigma machine; especially thanks to the great film ‘The Imitation Game’..

Enigma machine
Enigma machine keys

However, even though modern technology has moved on since the 1940s, I figure it would probably best to start with a little project not quite as advanced. Purely for modesty’s sake; obviously.

The first cipher that is taught in cryptography clubs, is one known as either the Caesar, or shift cipher. Basically the alphabet is shifted along by an amount of letters, and a message is encrypted from there:

Example of the shift cipher

In the above example, the letter E would become B, and so on.

The Challenge

Create a page on which the user can enter a code in either plain text, or encrypted text, and so long as the appropriate shift is selected, the page will either encrypt, or decrypt their message.

So, with a shift of 13: ‘GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT’ becomes ‘The quick brown fox jumps over the lazy dog’.

The Result

Check out:

  • the current version of the project here;
  • the GitHub repository here.

The code

 
const ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

// User inputs
// var cipher = "AOL XBPJR IYVDU MVE QBTWZ VCLY AOL SHGF KVN"; // <-- Test cipher

let unEncrypted = "";
let isEncrypted = "";
let shift = 0;

/* #############
# ENCRYPT #
############# */

function encrypt() {
// Get plain text to encrypt
unEncrypted = document.getElementById("plainText").value;
shift = document.getElementById("keyShift").value;

// Reset variable value for isEncrypted in case of using function multiple times
isEncrypted = "";

shift = parseInt(shift);

let str = unEncrypted.toUpperCase();

// Determine whether a letter or not
for (let i = 0; i<str.length;i++) {
if (ALPHABET.includes(str[i])) {
// Find letter location in 'alphabet'
let j = ALPHABET.indexOf(str[i]);

// Manipulate letter by shift amount
j += shift; // <-- FOR ENCRYPTING
// j += (26-shift); // <-- FOR DECRYPTING

// Test if j is too large, and send back to start of the alphabet
if (j>25) {
j = j-26;
}

// Compile encryption
isEncrypted += ALPHABET[j];

} else {
isEncrypted += str[i]; // <-- Maintains spaces
}
}

//console.log(isEncrypted);

// Display encrypted message
document.getElementById("encryptedText").value = isEncrypted;

}

/* #############
# DECRYPT #
############# */

function decrypt() {
// Get plain text to encrypt
isEncrypted = document.getElementById("encryptedText").value;
shift = document.getElementById("keyShift").value;

// Reset variable value for unEncrypted in case of using function multiple times
unEncrypted = "";

shift = parseInt(shift);

let str = isEncrypted.toUpperCase();

// Determine whether a letter or not
for (let i = 0; i<str.length;i++) {
if (ALPHABET.includes(str[i])) {
// Find letter location in 'alphabet'
let j = ALPHABET.indexOf(str[i]);

// Manipulate letter by shift amount
// j += shift; // <-- FOR ENCRYPTING
j += (26-shift); // <-- FOR DECRYPTING

// Test if j is too large, and send back to start of the alphabet
if (j>25) {
j = j-26;
}

// Compile encryption
unEncrypted += ALPHABET[j];

} else {
unEncrypted += str[i]; // <-- Maintains spaces
}
}

//console.log(isEncrypted);

// Display encrypted message
document.getElementById("plainText").value = unEncrypted;

}

What’s next?

This page will continue to be updates with more cipher and code encryption and decryption tools. Check out the README on the GitHub for changes coming soon.

Leave a Reply

Your email address will not be published. Required fields are marked *