Caesar Cipher

caesar-cipher.markdown

Caesar Cipher

A Pen by Zakaria aourzag on CodePen.

License.

index.html

<div class="container">
  <h1 class="text-center">Caesar Cipher</h1>
  <h2 class="subheader color-red">Encoding</h2>
  <p>Enter a phrase and a key between 0-25 to cipher your message.</p>
  <input id="userEncodeInput" class="user-input" type="text"/>
  <input id="cipherEncodeKey" type="number" min="0" max="25" value="0" />
  <h1 class="cipher-output color-red" id="cipherEncodeOutput"></h1>
  <hr>
  <h2 class="subheader color-blue">Decoding</h2>
  <p>Enter an encoded phrase and the key used to decipher your message.</p>
  <input id="userDecodeInput" class="user-input" type="text"/>
  <input id="cipherDecodeKey" type="number" min="0" max="25" value="0" />
  <h1 class="cipher-output color-blue" id="cipherDecodeOutput"></h1>
</div>

script.js

const userEncodeInput = document.getElementById('userEncodeInput');
const cipherEncodeKey = document.getElementById('cipherEncodeKey');
const cipherEncodeOutput = document.getElementById('cipherEncodeOutput');
const userDecodeInput = document.getElementById('userDecodeInput');
const cipherDecodeKey = document.getElementById('cipherDecodeKey');
const cipherDecodeOutput = document.getElementById('cipherDecodeOutput');
const alphabet = ['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'];

const caesarCipherEncode = (input, key = 0) => {
	if (input.length === 0) {
  	cipherEncodeOutput.innerText = '';
  	return;
  }
	const splitInput = input.split('');
  const testMap = splitInput.map(x => {

    if (alphabet.indexOf(x.toLowerCase()) === -1) {

    	return ' ';
    }
    
    
    let y = parseInt(alphabet.indexOf(x.toLowerCase())) + parseInt(key);

  	if (y > 25) {
      if(x === x.toUpperCase()) {
        let output = alphabet[y-26];
        output = output.toUpperCase();
        return output;
      } else {
        return alphabet[y-26];
      }
    } else {
      if(x === x.toUpperCase()) {
        let output = alphabet[y];
        output = output.toUpperCase();
        return output;
      } else {
        return alphabet[y];
      }
    }
   });
  cipherEncodeOutput.innerText = testMap.join('');
}

userEncodeInput.oninput = () => {
	caesarCipherEncode(userEncodeInput.value, cipherEncodeKey.value);
}

cipherEncodeKey.oninput = () => {
	caesarCipherEncode(userEncodeInput.value, cipherEncodeKey.value);
}

const caesarCipherDecode = (input, key = 0) => {
	if (input.length === 0) {
  	cipherDecodeOutput.innerText = '';
  	return;
  }
	const splitInput = input.split('');
  const testMap = splitInput.map(x => {
    if (alphabet.indexOf(x.toLowerCase()) === -1) {
    	return ' ';
    }
  	let y = parseInt(alphabet.indexOf(x.toLowerCase())) - parseInt(key);
  	if (y < 0) {
      if (x === x.toUpperCase()) {
        let output = alphabet[26+y];
        output = output.toUpperCase();
        return output;
      } else {
        return alphabet[26+y];
      }
      
    } else {
      if (x === x.toUpperCase()) {
        let output = alphabet[y];
        output = output.toUpperCase();
        return output;
      } else {
        return alphabet[y];
      }
    }
   });
  cipherDecodeOutput.innerText = testMap.join('');
}

userDecodeInput.oninput = () => {
	caesarCipherDecode(userDecodeInput.value, cipherDecodeKey.value);
}

cipherDecodeKey.oninput = () => {
	caesarCipherDecode(userDecodeInput.value, cipherDecodeKey.value);
}

style.css

body {
  padding: 50px 0;
  margin: 0;
  background-color: #eee;
  font-family: consolas, monospace;
}

.container {
  background: white;
  max-width: 75%;
  margin: 0 auto;
  padding: 15px;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.12), 3px 3px 6px rgba(0,0,0,0.24);
}

.text-center {
  text-align: center;
}

.subheader {
  text-transform: uppercase;
  font-size: 14px;
}

.color-red {
  color: red;
}

.color-blue {
  color: blue;
}

input {
  padding: 0.5rem;
  font-size: 16px;
  border: 2px solid #ccc;
  border-radius: 4px;
}

.user-input {
  min-width: 50%;
}

.cipher-output {
  min-height: 38px;
  border-left: 10px solid;
  padding-left: 15px;
}