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
removed.
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.
