History lesson!
One of the earliest effective uses of cryptography was the Caesar cipher, wherein the writer of a message rotated each of the characters forward by a certain number of positions, and the reader rotated them back to decrypt the original meaning.
So if the reader and writer had agreed on rotating by 3 places, then At The Iron Yard would become Dw Wkh Lurq Bdug.
For most Caesar ciphers, the reader has to know which direction to rotate the message's content agreed-upon number of positions, but: if you use a 13-place system (13 being half of a 26-character alphabet), encoding and decoding work in the same way. This system is referred to as ROT13 and is commonly used on the internet to trivially disguise information like movie plot spoilers.
We're going to make a tiny webpage that implements ROT13 -- it'll take in plaintext (either plaintext or encoded), perform the ROT13 operation, and display the ciphertext to the use.
After completing this assignment, you should...
- Understand how to use JS to manipulate a webpage
- Understand how to use TDD to work with a webpage
- Be able to understand and talk about cryptography intelligently
After completing this assignment, you should be able to effectively use:
- jQuery - listeners, getters, and setters
- JavaScript in the browser
- Iteration over arrays
The provided site has two important files: index.html and index.js.
Modify index.js so that the code
- listens for users clicking the "Encrypt" button on
index.html - gets the user's input from the
<textarea> - leverages the included
translateCharacterfunction to translate all of the text with ROT13 - sets the
<div id='displayText'>content to the translated string
Normal Mode, but use CSS to make index.html look pretty.