Two Handy Shortcut Functions

Two methods we will use a LOT are document.getElementById and document.querySelectorAll. It's handy to declare a shortcut to help us out. You may use the following in your JS programs (these are exceptions to the rule of having description function names):

function $(id) {
  return document.getElementById(id);
}

function qsa(query) {
  return document.querySelectorAll(query);
}

JS

Example:

<button id="encrypt-it">Encrypt-It!<button>

HTML

	let button  = document.getElementById("encrypt-it");
	let button2 = $("encrypt-it");               // returns the same as above.

JS

Part I: Create the UI Elements

The first task is to extend encrypt-it.html by adding UI controls. This starter HTML introduces two new elements that are useful for grouping UI controls:

• <fieldset>: A container to group UI elements
• <legend>: A legend for a fieldset which appears by default as the text within the top-left border

When you open the HTML file, you should see two empty bordered fieldsets, each with a legend.

Move through the slides below to finish the starter HTML and add UI elements to these two fieldsets.

Adding UI Elements: Details

In the first <fieldset> add:

• A field for users to enter large (multi-line) amounts of text - the HTML tag for this element is the <textarea>. It should be 10 rows by 60 columns.

The second <fieldset> represents options for the cipher your program will generate from the input text. In this <fieldset>, add:

• A button labeled: "Encrypt-It!"
• A dropdown menu with the options, "Shift Cipher" and "Randomized", preceded by the boldly-emphasized <label>: "Cipher Type:"

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 input text area will be encrypted using a basic shift-cipher, and output into the page's paragraph element with the id of output.

Details:

• To get text from the textarea, you'll need to make sure you can access it from JS. Remember you can use document.getElementById or document.querySelector to access a DOM element in JS.
• Referring to this example, what attribute do you see used to access the text input from a textarea DOM element?
• Modify (and appropriately rename) your handleClick function so that when called, it now retrieves the textarea's text value and generates a shift cipher (algorithm strategy discussed on the slide below; a solution for this cipher function is provided at the very bottom if you'd like to skip the algorithm part). This generated cipher will be output as text in the #output paragraph.

Part IV: The Shift-Cipher Algorithm

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
            

Part IV: Hints

Part IV: Algorithm Solution

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();
  let result = "";
  for (let i = 0; i < text.length; i++) {
    if (text[i] < 'a' || text[i] > 'z') {
      result += text[i];
    } else if (text[i] == 'z') {
      result += 'a';
    } else { // letter is between 'a' and 'y'
      let letter = text.charCodeAt(i); 
      let resultLetter = String.fromCharCode(letter + 1);
      result += resultLetter;
    }
  }
  return result;
}

JS

Part V: Implement UI Functionality

Part V: Expected Output

Below is the expected output after all of the UI elements in this Part have been added:

Part V: Dropdown UI

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.

For dropdown menus, you can get the value of the current option using el.value, where el is the DOM element for the <select> dropdown.

Part V: Reset Functionality

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

Part V: Checkbox Elements

Part VI: Radio Button Elements

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

To minimize changing styles in JavaScript, you can add CSS classes to accomplish font size changes.

Part VI: Implementing the Randomized Cipher

Note: This part is a more challenging feature we have provided if you'd like to explore a more advanced cipher algorithm and and add a few more UI features. We have also suggested other features to try on the next slide!

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").

Part VI: Details

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) {
  let alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
  let cipher = [];
  // it's poor style to hardcode a magic number like 26
  let alphabetLength = alphabet.length;
  for (let i = 0; i < alphabetLength; i++) {
    let randomIndex = Math.floor(Math.random() * alphabet.length);
    cipher.push(alphabet.splice(
      [Math.floor(Math.random() * alphabet.length)], 1));
  }
  document.getElementById("output").innerText = cipher;
  let result = "";
  for (let i = 0; i < outputText.length; i++) {
    if (text[i] >= 'a' && text[i] <= 'z') {
      let letterCode = text.charCodeAt(i) - 'a'.charCodeAt(0);
      result += cipher[letterCode];
    } else {
      result += text[i];
    }
  }
  document.getElementById("output").innerText = result.replace(",", "");
}

JS