HTML and CSS Reference
In-Depth Information
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
the function:
a. Create the
questions
variable that contains the object collection for all list items
within ordered lists. Use the
querySelectorAll()
function with the appropriate
CSS selector.
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
phrasenumber
variable.
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,
as requested.
