HTML and CSS Reference
In-Depth Information
Complete the following:
1. Using your text editor, open the searchtxt.js and wordtxt.htm files from the
tutorial.13\case4 folder. Enter your name and the date in the comment section of
both files, and then save them as wordsearch.js and wordsearch.htm , respectively.
Styles for the Web site already have been created for you in the kgstyles.css and
wordsearch.css files.
2. Link the wordsearch.htm file to the JavaScript files words.js and wordsearch.js .
3. Write the code to insert the contents of the word search puzzle. The exact coding is
left up to you, but it should include the following features:
a. Insert the puzzle title in the h1 heading found in the aside element on the
Web page.
b. Insert the HTML code for the word search table within the wordTable figure box.
c. Create a function that returns the HTML code for an unordered list containing the
contents of the wordList array. The ul element should have the id wordsearchlist .
Use this function to write the HTML code to the figure box with the id wordList .
4. Write the code for the user interface with the puzzle. The code should support the
following features:
a. When a user clicks any of the cells in the word search table, the table cell should
be highlighted; the style design is left up to you. If the user clicks the cell a sec-
ond time, the highlighting should disappear.
b. When a user clicks any of the words in the word list, the word should be struck
through. (Hint: Use the text-decoration style property with the line-through
value.) When the user clicks a word a second time, the line-through should be
c. When the user clicks the Show Solution button, all of the hidden words in the
word search table should be highlighted.
5. Document your program with comments throughout.
6. Test your file in your Web browser.
7. Submit your completed files to your instructor, in either printed or electronic form,
as requested.
Search WWH ::

Custom Search