DOM Manipulation Olympics!

The Qualifier and Bronze Medal are required, the rest is an optional challenge

DOM manipulation is it's own beast. Fairly soon, you'll be doing a lot of it along side of other things that are conceptually difficult if you're not yet familiar with DOM manipulation.

This exercise is designed to help use repetition to become comfortable with syntax that is commonly used throughout the industry. Each step should be a stretch, but feel free to use what you learned from the last step to be able to complete the next.

Please take your time, and really understand why you're using the code you are using.

Setup

Clone down this repo. You will use it work your way through the Olympic medals.

Follow the instructions in the README.

You will complete the requirements of this assignment using JavaScript only.

This is a simple messaging app. You're job is to make it interactive.

Feel free to change the CSS not mentioned in the assignment if you feel so inclined.

Qualifier

Your first task is to use pure JavaScript to insert a header to the top of this page. It should look like this:

The HTML for the header's container exists but the header and the name don't exist yet.

Feel free to change .style or use .name or .header classes from the CSS file.

Notice that your name needs to be a different color. Wrapping text in a span tag is a great way to do this.

Bronze

There's some sub par conversation going on in this messaging app. You have two tasks to help give it either a clean slate, or a positive start.

• Write some custom JavaScript to automatically change the words of the conversation to something fun and good.
• Write some JavaScript that will wait until the user clicks the "clear" button, and then clears out all conversation.

Silver

Themes!

• Use the drop down to write some JavaScript that will notice when the drop down has changed and then changes the background colors of the messages accordingly.

• Feel free to edit the HTML <select> tag to make it more usable or elaborate. Mo themes, mo fun.

Gold

• Be able to add more messages using the form at the bottom.

EXTRA CREDIT

• Every other messaged will be posted on the right in one color, and the next on the left the other color.