Event-driven JavaScript

Part 1: Talk Like a Pirate

design and implement a better Web page for translating English text into Pirate talk. The JavaScript code for performing the translation is provided below. The PHRASES array contains English words/phrases and their pirate translations. The array is used by the Translate function, which takes a string as input, searches that string for substrings from PHRASES, and replaces the English phrases with their pirate translations. Your Web page should include a text area where the user can enter text, a button or clickable image to initiate the translation, and another text area where the translated text will appear. Feel free to be creative, adding images or embellishments to the page and expanding the English-Pirate vocabulary in PHRASES.

 PHRASES = [["hello", "ahoy"], ["hi", "yo-ho-ho"], ["pardon me", "avast"], 

 ["excuse me", "arrr"], 

 ["my", "me"], ["friend", "me bucko"], ["sir", "matey"], 

 ["madam", "proud beauty"], ["miss", "comely wench"], 

 ["stranger", "scurvy dog"], ["officer", "foul blaggart"], 

 ["where", "whar"], ["is", "be"], ["the", "th'"], ["you", "ye"],

 ["tell", "be tellin'"], ["know", "be knowin'"],

 ["how far", "how many leagues"], ["old", "barnacle-covered"],

 ["attractive", "comely"], ["happy", "grog-filled"], 

 ["nearby", "broadside"], ["restroom", "head"], ["restaurant", "galley"],

 ["hotel", "fleabag inn"], ["pub", "Skull & Scuppers"],

 ["bank", "buried trasure"]

 ];

 function Capitalize(str)

 // Returns: a copy of str with the first letter capitalized

 {

 return str.charAt(0).toUpperCase() + str.substring(1);

 }

 function Translate(text)

 // Returns: a copy of text with English phrases replaced by piratey equivalemts 

 {

 for (var i = 0; i < PHRASES.length; i++) {

 var toReplace = new RegExp("\\b"+PHRASES[i][0]+"\\b", "i");

 var index = text.search(toReplace);

 while (index != -1) {

 if (text.charAt(index) >= "A" && text.charAt(index) <= "Z") {

 text = text.replace(toReplace, Capitalize(PHRASES[i][1]));

 } 

 else {

 text = text.replace(toReplace, PHRASES[i][1]);

 }

 index = text.search(toReplace);

 }

 }

 return text;

 }

Part 2: GPA Revisited

Create an event-driven version of your gpa.html page that uses a single text area for inputting the information for all courses. As before, each course should have its name, grade, and credit hours listed on a single line, in that order. When the user clicks on a button, the courses should be read from the text area and the grades processed. Each value output by the program: total credit hours, total grade points, and grade point average, should appear in a separate text box with appropriate text label.