CSCI 446 Unit #5

Programming Assignment

For this assignment you will create a page very similar to the following:

Greeting card when load — Figure 1: Greeting Card upon load

Greeting card after changes — Figure 2: Greeting Card after selections

See Specific Requirements for more details. The example card is for Valentine's Day, but you can choose some other card theme.

You should expect this lab to take longer than Unit 4.

Hints

For simplicity, I set up variables to contain the hard-coded color choices.


	var foregroundColors = ["#00FFFF","#FF7F50","#FFD700", "#FFF", "#000"];
	var backgroundColors = ["#0000FF","#DC143C","#20B2AA", "#FFF", "#000"];

The structure of this program will be similar to the last example on the Events in React page (the code that includes increase(e). Be sure to understand that example before you begin to code! A few specific hints:

In my program, I have a component named CardCreator which has a similar function to CounterParent. This component will contain the "state" of the application (just a counter in the example, but properties like To/From and colors in our program)
I have a GreetingCard component that is like Counter in the example (i.e., displays the state, although ours is much more complex than a single number).
I have a CardDefinition component that contains the controls for updating the text fields and colors. This plays the same role as the button in the example program (but ours again is more complex, an entire div rather than a simple button).
Be sure that you understand from the example that a) the increase(e) method called when the button is pressed is part of CounterParent, b) the bind method is used to ensure the variable updated by increase(e) is part of CounterParent, NOT the button which triggered the event (likewise for our code, be sure state is updated in CardCreator NOT the div with the controls), c) the increase(e) method is used as the onclick handler (in our code, be sure to pass this into your CardDefinition component), and d) the parameter to the handler contains a variety of event properties (the example just shows how to use shiftKey)
Click handlers should be attached to each color square. You will likely use the event property to access information about the square that was clicked, such as the color and (maybe) whether it's a foreground or background square. I access this via e.target.

I suggest you draw a quick design on paper before you begin to code (maybe review the design process from Creating Complex Components).

Potentially helpful links for dealing with the Ascii Art: