JavaScript / HTML

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. Use the specified method as the button label.
   1. `getElementbtById()`: Get the element with id="computers" and set the text color to #00f (blue)
   2. `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)
   3. `getElementsByClassName()`: Get the elements with a class="favorite" and set the text color to #0f0 (green)
   4. `getElementsByTagName()`: Get the elements with a tag name of h2 and set the background color to #0f0 (green)
   5. `querySelectorAll()`: Get all of the elements with a class="favorite" and set the text color to #0ff (turqoise)
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. Use the specified property as the button label:
   1. `parentNode`: Change the textContent property of the parent of the element with id="networking" to Show me the money!
   2. `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 ★
   3. `nextSibling`: Change the textContent property of the next sibling of the element with id="web" to Data Science
   4. `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). Use the specified method(s) as the button label.
   1. `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.
   2. `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.
   3. `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.