CSS Project - Option 1
Simple Customizable Page

Create a simple customizable page similar to the one below using JavaScript and cookies.


When the page loads, the first thing it should do is check for its cookie on the client system.  The cookie will contain the chosen name, picture url, and background color.  It it is found, use those values for the page and do not display the form.  If no cookie is found, display the form.  When the user clicks the update button, save the data in a cookie, update the page to reflect the customization, and remove the form from the page.

When the form is removed or not displayed because the cookie was found, display a "Change" button in its place. When the "Change" button is clicked, display the original form with the values entered previously in the various fields. This permits the user to modify the customization choices.

The solution accomplishes effects similar to the example in the text but without having to reload the page to change the customization.

You may simply implement this pattern or use your own content with the same customizations.

Hints

• Use id's to make components directly accessible with document.getElementById().
• Use a <span> to make the name a separate item on the page so you can easily modify it.
• You can make content appear and disappear by using the style 'display' attribute.  When it has the value "hidden" the item and everything within it is not displayed.  When it has the value "block" the item is displayed as a block with a blank line before and after.  (There are other values if you want to be fancier.)