Modify the engfr.js file as follows:
Add a command to have the browser run the setUp() function when the page is loaded.
Create the setUp() function. The purpose of this function is to insert an ordered list of French phrases taken from the french array in the french5.js file and to add event handlers to switch these phrases to their English counterparts. Add the following commands to the setUp() function:
Declare a variable named transDoc that references the element with the ID doc. It is within this element that you'll place the list of French phrases.
Create an element node named olElem containing the ol element.
Loop through all of the items in the french array. For each item in the array, create an element node named newLI containing a list item element. Set the text contained within newLI to the text of the current item in the french array. Set the ID of the newLI element to iphrase, where i is the value of the index number in the array. Set the cursor style of the list item to the pointer. Have the browser run the swapFE() function when the user presses the mouse button down on the list item, and run the swapEF() function when the mouse button is released. Finally, append the newLI element as a child of the olElem object.
After the loop has finished, append the olElem object to the transDoc object.
Create the swapFE() function. The purpose of this function is to display the English phrase in place of the French phrase selected by the user. Add the following commands to the swapFE() function:
The swapFE() function is only run in response to the mousedown event. Store the object in which the mousedown event occurred in a variable named phrase.
If the node name of the phrase object indicates that the phrase object is a text node, point the phrase object to the parent of that text node. This is done to ensure that the object being examined is the list item element containing the phrase, and not simply the text of the phrase itself.
Declare a variable named phraseNum that returns the index number of the phrase being selected. You can extract the index number by applying the parseInt() method to the contents of the ID attribute of the phrase object.
Change the inner HTML of the phrase object to the item in the english array with an index equal to the phraseNum variable.
Change the font style of the phrase object to italic and the font color to the color value (155, 102, 102).
Create the swapEF() function. The purpose of this function is to display the French translation of the phrase selected by the user. The code of this function should be identical to that used in the swapFE() function, except that it should use the french array rather than the english array and the phrase text should be displayed in a normal black font.