CSE 154

Overview of HTML Page

The slides below describe some of the different HTML elements in the starter HTML, which you may find helpful for following the JS requirements (and learn a bit more about common types of UI elements)!

Overview of HTML Page: Grouping UI Elements

The 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

Note that we've also seen the form used to group UI elements, but since we're not submitting anything here, we choose to use a fieldset.

Overview of HTML Page: User input with textarea

In the first fieldset we have a textarea for users to enter large (multi-line) amounts of text. This will be used for the input to generate output ciphers.

Overview of HTML Page: Customization Controls

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

• An Encrypt-It! button and a Reset button
• A select dropdown menu with the options for Shift Cipher and Randomized.
• Two radio button elements with output font size options: 12pt and 24pt.
• A checkbox element for customizing the upper-case option of the output message.

Note: Wrapping the radio buttons and checkbox elements with their labeled text in a label makes it so that a user can click on the text to check/uncheck.

Part III: Implementing 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.
• 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 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 #result paragraph.

Part III: 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 III: Hints

Part III: 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 IV: Implement UI Functionality

Part IV: 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 IV: Reset Functionality

When the Reset button is clicked, the textarea and the output paragraph should both be cleared (using innerText).

Part IV: Checkbox Elements

Part V: Radio Button Elements

Implement a feature to such that the text in the output paragraph should have the font size of whatever is currently selected in the radio button group.

To minimize changing styles in JavaScript, you can add CSS classes to accomplish font size changes (similar to the previous step).

Part V: 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 other words, 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 V: 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 V: 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 V: 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