CSCI 499 Unit #5

Purpose

Continue learning React.

Preparation

Read:

• Learning React chapters 8-10

As in Unit 4, I strongly recommend that you type in the examples and try them in a browser. This program is more complex than the previous one, be sure to allow enough time to complete it.

Programming Assignment

Create a page similar to the following (example is for Valentine's Day, you can choose some other theme). Figure 1 shows a greeting card with default settings.

Figure 2 shows the same card after it has been "customized" by making selections in the Card Definition box.

Specific Requirements

• Layout should have Greeting Card and Card Definition boxes side by side, with reasonable background color and spacing. Each of these is, of course, a component (with subcomponents).
• Greeting card layout includes:
• To field, with a default (e.g., Someone)
• An Ascii art picture with its own background (mine is white). See hints below.
• A saying (e.g., Heartfelt wishes...). Choose your own.
• From field, with a default (e.g., Someone else)
• A foreground color for the card text
• A background color for the card
• Reasonable styling with borders, font choices, spacing etc.
• Card definition component includes:
• To and From fields. When user presses enter or tab, card is updated. NOTE: I had to do some googling to figure this out, post on piazza if you get stuck.
• Foreground and Background color choices (you may use different colors than the figure).
• Notice the prompt, so user knows to click.
• Colors must line up horizontally and be styled with a shadow and reasonable spacing.
• As soon as a color is clicked, update the appropriate color (text or background) on the greeting card.

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"];

Potentially helpful links for dealing with the Ascii Art:

• http://ascii.co.uk/art/heart
• ASCII art in react - read this!

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:

• The example uses the CounterParent component to contain the "state" of the application (the counter). You will need a component to maintain your program's "state" - the to/from fields and colors. I called my component CardCreator (your name may vary, but note that this is separate from GreetingCard and CardDefinition)
• The example uses the Counter component to display the "state" (the counter). In your program, the GreetingCard component will display the "state" - i.e., the updated greeting card.
• The example program has a simple button that is used to update the "state" (press the button, update the counter). We have four pieces of "state" so your program will use a component - the CardDefinition - to allow the user to update the state.
• Be sure that you understand from the example:
  1. the increase(e) method called when the button is pressed is part of CounterParent,
  2. the bind method ensures the variable updated by increase(e) is part of CounterParent, NOT the button which triggered the event,
  3. the increase(e) method is used as the onclick handler, and
  4. 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.

You should draw your component design on paper before you begin to code (maybe review the design process from chapter 5). If you have questions, post on piazza or email me.

Submit

Name your file [YourLastName].html and submit on Canvas.

Evaluation

Because this assignment is more complex, I will assign two grades:

• The first grade will be for the layout, including the Ascii Art.
• The second grade will be for correct behavior (i.e., all fields update as intended).

For each of these grades, programs that meet all requirements will receive a grade of A. Programs missing one or two minor requirements will receive A-. Programs missing more substantial requirements will be graded accordingly.

NOTE: A program that does not update at all will receive a failing grade for correct behavior - so be sure that you leave plenty of time to ensure at least some of the fields will update.