Part I: Create the UI Elements

The first task is to expand encrypt-it.html by adding UI controls. Add HTML code for the following:

• A field for users to enter large (multi-line) amounts of text. It should be 10 rows by 60 columns in side and wrapped in a bordered field set box with the label "Text to Encrypt".
• Add a second bordered field set box labeled "Encrypt Options" that contains:
  • A button labeled: "Encrypt-It!"
  • A dropdown menu with the options, "Shift Cipher" and "Randomized", preceded by the boldly-emphasized label: "Cipher Type:"
• Note: Controls are sometimes used in forms, but you must not use the form tag on your page.
• Expected output is provided on the slide below.

Part I: Expected Output

Part IV: Implement a Basic Shift-Cipher

Modify your JS code so that when the user clicks "Encrypt-It!", the text in the inptu text area will be encrypted using a basic shift-cipher, and output into the page's div with the ID output.

• Make sure that your text area has an ID attribute so your JS code can talk to it
• Modify your JS function so that it now takes the text area's text and generates a shift cipher (algorithm discussed on the slide below)

Part IV: The Shift-Cipher Algorithm

The rules of a shift cipher are fairly straightforward. Let the English alphabet we all know and love(?) be called A. Let the shift-encrypted alphabet be called C. For simplicity, we will shift letters in our encryption function by 1 letter. Then C is defined as mapping each letters in A to the letter alphabetically next. For example, 'a' is mapped to 'b', 'b' is mapped to 'c', ... and 'z' is mapped to 'a' (creating a cycle of 26 letters). In this exercise, we will consider uppercase letters and lowercase letters equivalent to one another (ie, 'a' is considered equal to 'A').

Your task in this part is to convert the text in the input text area from alphabet A to alphabet C. This is all you need to know to implement the cipher in this lab, but if you would like additional hints, there are some provided in the slide below.

You may find charCodeAt(index) and fromCharCode(asciiNum) helpful for this problem.

Part IV: Hints

Note that the value you get from the text area is just a long string. So your goal is to build up a new string that is the result of applying the cipher to each letter in the input text, in order, and adding it to your result string.

Visually, the cipher can be represented as the following:

input letter     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
                 | | | | | | | | | | | | | | | | | | | | | | | | | |
                 v v v v v v v v v v v v v v v v v v v v v v v v v v
output letter    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 a
            

There are a few ways to go about this, but note that one of the most intuitive approaches would be to use a for loop through the input string and add 1 to each letter (letters are actually represented by numerical values, so this is a natural operation). To handle the z -> a shift, you can add a special case for each letter, or use mod arithmetic to avoid this extra case.

If you get stuck on this function, you may refer to a sample solution on the slide below. But it's strongly recommended you implement it on your own.

Part IV: Algorithm Solution

If you're having trouble with the algorithm, one function solution is given below (you can also solve this with arrays):

              
              /**
               * Returns an encrypted version of the given text, where
               * each letter is shifted alphabetically ahead by 1 letter,
               * and 'z' is shifted to 'a' (creating an alphabetical cycle).
               */
              function shiftCipher(text) {
                text = text.toLowerCase();
                var result = "";
                for (var i = 0; i < text.length; i++) {
                  if (text[i] == ' ') { // keep original spaces
                    result += ' ';
                  } else if (text[i] == 'z') {
                    result += 'a';
                  } else { // letter is between 'a' and 'y'
                    var letter = text.charCodeAt(i); 
                    var resultLetter = String.fromCharCode(letter + 1);
                    result += resultLetter;
                  }
                }
                return result;
              }
              
            

Part V: Implement UI Functionality

Now that you have a cool encryption feature implemented, let's add some features for the user to decorate their encrypted message.

First, we want to restrict the shift cipher functionality to only work when "Shift Cipher" is selected in the drop down menu. Only when this is the currently-selected option and then the "Encrypt-It" button is clicked should the input text be encrypted.

Add a "Reset" button to your HTML with an id of reset. When the button is clicked, the text area and the output div should both be cleared.

Add a checkbox element following the boldy-emphasized label "All Caps:" that when checked, makes all of the text in the output div appear only in uppercase (recall the text-transform CSS style). If not checked, it should use whatever casing used in the original input text.

Add a radio button element to the fieldset with two font size options: 12pt and 24pt. The text in the output div should have the fontsize of whatever is currently selected in the radio button group. The radio buttons should follow a boldly-emphasized label, "Font Size:"

Expected output after all of the UI elements are added is provided on the slide below.

Part V: Expected Output

Part VI: Implementing the Randomized Cipher

In this part, you will implement the "Randomized" cipher option. This is similar to the Shift Cipher, only "result alphabet" C is randomly-generated. In otherwords, each letter in the English alphabet is mapped to one of the 25 other letters, but no two letters may have the same mapping (e.g., "a" and "c" can not both map to "d").

First, you should modify your button event handler to determine whether the "Shift Cipher" or "Randomized Cipher" option is selected in the dropdown menu. If the "Randomized Cipher" option is selected, it should call a new function which outputs a randomized encrypted version of the input text area to the output div.

If you would like some hints for writing this algorithm, there are some in the slides below.

Part VI: Hints

Because we aren't simply adding 1 to each letter (or mapping 'a' to 'z'), you might find an array helpful when creating a random cipher alphabet. One way to randomly-generate the cipher is to keep track of unchosen letters in the English alphabet using a string or array. Then, randomly choose one of the unchosen letters (you may find Math.floor() and Math.random() useful here).

Next, push this randomly-chosen letter to the end of the cipher array. Continue this process until you have removed all letters from your English alphabet and have 26 letters in your cipher array (where the first index is the letter randomly-chosen first, and the last index is the letter that was chosen last).

If you get stuck on this function, you may refer to a sample solution on the slide below. But it's strongly recommended you implement it on your own.

Part VI: Algorithm Solution

One possible solution is given below:

              
function generateCipher(text) {
  var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
  var cipher = [];
  // it's poor style to hardcode a magic number like 26
  var alphabetLength = alphabet.length;
  for (var i = 0; i < alphabetLength; i++) {
    var randomIndex = Math.floor(Math.random() * alphabet.length);
    cipher.push(alphabet.splice(
      [Math.floor(Math.random() * alphabet.length)], 1));
  }
  $("output").innerText = cipher;
  var result = "";
  for (var i = 0; i < outputText.length; i++) {
    if (text[i] != ' ') {
      var letterCode = text.charCodeAt(i) - 'a'.charCodeAt(0);
      result += cipher[letterCode];
    } else {
      result += ' ';
    }
  }
  $("output").innerText = result.replace(",", "");
}