The goal of this project is to complete scripts which enable all of the desired features of the buttons on the HTML webpage; there are 5 challenges in total. Here is the general strategy you should use to approach each problem:

• Examine the project in the browser. Get a feel for the space before concerning yourself with the code.
• Examine the CSS file and see what classes and ids already exist. Hint: you may want to add your own in the future to solve a challenge.
• Add a function to each buttons "onclick" attribute. You are responsible for naming the function.
• Scroll to the bottom of the HTML page, name your 5 functions first with proper syntax and attack each one at a time.
• Don't forget to save code in atom before running in the browser and make sure to refresh the page before trying to click the button you are working on.

Consult the notes we took last week for tips on vocabulary and proper syntax.

When you click this button the color of the h3 heading and the p-tag should change to white. Also to help with the contract of the picture you should change the background color to black. You will want to perform at least 3 separate queries to complete the overall task. Consider adding some utility classes to the css file to help.

Take it to the next level of user experience; create another class which houses the old default settings and toggle a "daymode" and "nightmode" mode to switch between color settings.

This challenge represents an internal family Gaussian Diagram...not a Venn Diagram.

• gp stands for grand parent (rgb: #550000)
• p stands for parent (rbg: #991100)
• c stands for child (rgb: #dd1111)

To show that the genes get passed on down through the generations we will change the background color from a dark red to lighter shades of red. Use three different query selectors to alter the diagram. Again, you may find adding some classes to the css file helpful.

Dr. Suess would like his list of character to be appropriately colored. Out of the list select the red fish and the blue fish and change their text colors to be congruent with their names. You will want to use a query selector to grab the characters. At this point you should have an array of answers, more than you need in fact. Use your knowledge of array notation to change the css of only two fish we care about.

• let firstfish = array[0];
• let somefish = array[some number];

Just like the Fake Twitter examples where I added 1 to the like count, activate these two buttons to add to the span element with an initial value of 20 in this challenge.