Exercise : Order-It

Write a page that lets us perform various manipulations on the text in a text area. Here is the page (click the image to run our sample solution, written by TAs Sylvia Tashev and Stefanie Hatcher):

Exercise : Order-It

The HTML and CSS are already written, but we must add JavaScript code to make the UI respond when the user clicks the buttons. Start from the skeleton orderit.html.

Add the following behavior to the buttons:

• Clear All: Deletes all text from the text area.
• Capitalize: Converts the text to upper case.
• Sort: Rearranges the lines into sorted alphabetical order.
• Reverse: Reverses the order of the lines.

Exercise : Order-It Hints

• You can retrieve the JavaScript "DOM" object for a given HTML element with the document.getElementById function.
• A string has a split method to break it into an array of smaller strings.
• An array has a length field and methods such as: concat, join, pop, push, reverse, shift, slice, sort, splice, and unshift.

Exercise : Order-It

More Behavior to add:

• Add Line Numbers: Places a number in front of each line, such as "1. " (Don't worry about the possibility that the lines might already have numbers in front of them.)
• Strip Blank Lines: Removes any blank/empty lines from the text area.
• Shuffle: Rearranges the lines into a random order. JavaScript doesn't have a shuffle method for arrays, but you can write one using the following algorithm:

  
  	for each index i:
  	  randomly choose an index j >= i.
  	  swap lines i and j.
  

If you finish all of that behavior, consider adding a button to change the capitalization of lines, such as capitalizing/lowercasing entire lines or converting lines to AlTeRnAtInG cAsE.

Exercise Solution

Solution files:

• orderit.html
• orderit.js