HTML and CSS Reference
3. Go to the translate.js file in your text editor. Add a command to run the setup() func-
tion when the page is initially loaded.
4. Create the setup() function. The purpose of this function is to set up the Web page to
show interactive translations of French to English. Add the following commands to
a. Create the questions variable that contains the object collection for all list items
within ordered lists. Use the querySelectorAll() function with the appropriate
b. Loop through the questions object collection. For each item in the collection, do
the following: i) add a dynamic id value containing the text string i phrase , where
i is the value of the index variable used in the loop; ii) add an onmousedown event
handler to run the showEnglish() function when the mouse pointer is pressed down
on the item; iii) add an onmouseup event handler to run the showFrench() function
when the mouse pointer is released over the item; and iv) change the style of the
mouse cursor to pointer when it hovers over the item.
5. Create the showenglish() function to translate the French phrases to English when
a user clicks and holds the mouse button on a phrase in the ordered list within the
document. Add the following commands to the function:
a. Using the id property of the list item experiencing the mousedown event, extract
the index number with the parseInt() function and store that value in the
b. Set the HTML text of the current list item to the corresponding item in the english
array. Use the phraseNumber variable to indicate the index number of the phrase
in the english array.
c. Set the font style of the current list item to italic .
d. Set the color of the current list item to the value rgb(191, 22, 31) .
6. Create the showFrench() function. The purpose of this function is to redisplay the
French phrase when the user releases the mouse button, initiating the mouseup
event. Add the following commands to the function:
a. As you did with the showEnglish() function, determine the index number of the
phrase and then store that value in the phrasenumber variable.
b. Change the text of the current list item to the text of the corresponding item in the
french array, using the phraseNumber variable to indicate the index number.
c. Remove the inline styles for both the font-style property and the color property.
7. Document your code with comments throughout the file and then close the file, sav-
ing your changes.
8. Open french.htm in your Web browser. Verify that when you press and hold the
mouse button on each of the 10 French phrases, the text of the phrase is replaced by
the English translation in a red italic font. Further verify that when you release the
mouse button, the text returns to the original French phrase in the standard font style.
9. Submit your completed files to your instructor, in either printed or electronic form,