Project 5 - WEB 124

1. Read Chapter 5 Document Object Model
2. Key the code exercises throughout Chapter 5.
3. Watch applicable youtubes.
4. Complete the following exercises by building a single semantic, validated, spell-checked web page with both the questions and the answers. Apply a linked, validated, flexible, and visually pleasing style sheet. Post your files to the student web server and put the corresponding URL in the Project 5 drop box.
5. Note color coding: keyword, blue: HTML, pink: CSS, green: JavaScript, black: general instructions)

As always, spell check all content and identify your name and the current date in all files using comments. In html files you may use the html meta tag, e.g. <meta name="author" content="John Doe">.

---

Chapter Debrief

• Create three thoughtful questions about the code exercises in Chapter 5 to discuss in class. Code them as <p> elements with id="q1", id="q2", and id="q3" respectively.
• The subjects should cover these topics: node vs. element, nodelist vs. array, defending against cross-site scripting attacks (XSS)

---

Write some JavaScript!

In this project you'll be writing 12 short functions and attaching them to 12 buttons in order to demonstrate the use of 11 methods and 4 properties introduced in Chapter 5 that allow you to traverse and manipulate the html DOM.

1. Create an unordered list of the following general college majors.
   • Computers (add id="computers" to this element)
   • Business
   • Auto Technology
   • Healthcare
2. Within each general college major, code at least 3 specific subareas within the major using unordered list elements. For example, within Computers list the following:
   • Networking (add id="networking" to this element)
   • Web Development (add id="web" to this element)
   • Data Analytics (add id="data" to this element)
3. Validate your html. The JavaScript will not work correctly unless your html lists are coded correctly.
4. Below your html lists, add an h2 element with the text: Methods to traverse the DOM tree
5. Below the heading, create one button element for each of the following methods. The button should run a function that completes the task described to the right of the button.
   getElementById()

   Get the element with id="computers" and set the text color to #f00 (blue)

   querySelector()

   Get the first element with class="favorite" (code the first list item in each of the four major categories (Computers, Business, Auto Technology, Healthcare) with the class="favorite") and set the text color to #f00 (red)

   getElementsByClassName()

   Get the elements with a class="favorite" and set the text color to #0f0 (green)

   getElementsByTagName()

   Get the elements with a tag name of h2 and set the background color to #0f0 (green)

   querySelectorAll()

   Get all of the elements with a class="favorite" and set the text color to #0ff (turquoise)

6. Below the list of DOM tree methods, add an h2 element with the text: Properties to modify the DOM tree
7. Below the heading, create one button element for each of the following properties:
   parentNode

   Change the textContent property of the parent of the element with id="networking" to Show me the money!

   previousSibling

   Change the innerHTML property of the previous sibling of the element with id="web" to ★ ★ ★ Information Technology ★ ★ ★
   Note: The escape code for a solid star is ★

   nextSibling

   Change the textContent property of the next sibling of the element with id="web" to Data Science

   className

   Change the className property of the element with id="data" to favorite (Then click the querySelectorAll button to change the text color of all elements with class="favorite" to turqoise to see if id="data" also turns turqoise.)

8. Below the list of DOM tree methods, add an h2 element with the text: Methods to modify the DOM tree
9. Below the heading, create one button element for each of the following methods (or combination of methods).
   createElement() createTextNode() appendChild()

   Create a new li element. Create a new text node for the element with the text Science. Append the node as a child below Computers, above the Business list item.

   removeChild()

   In the html, add id="autolist"to the opening unordered list tag in the Auto Technology area and id="engines" to the Engines list item. Use those references to remove the Engines list item from the Auto Technology list.

   hasAttribute() removeAttribute()

   Use the getElementsByTagName() method to select the second li element (Networking). If that element has class="favorite", remove the attribute. (Test this by using the querySelectorAll button to change the text color of all elements with class="favorite".)

10. Write a JavaScript function, one per button, given the instructions beside the button.
11. Run all functions using event listeners.