Class 14: An Engineering Dry Run

So I want to test what you have learned so far and prepare your mind for what is coming soon. Today we will work in groups to create a toy-building website which is modular, extensible, and done in 4 Pomodoros. If you don't succeed that's OK just be ready to think about what went wrong so that the design patterns we talk about will land on fertile soil.

Your Mission

As a team (if you are solo see if someone will brainstorm a bit with you) you are going to create either:

• a Build-a-bear store
• or a Build-a-soldier store

For a bear store you must have the ability to choose:

• A single Base Type from a list of several base types
• A single outfit from several types of outfits
• Any combination of accessories (yes/no to each accessory)

For an action-figure/soldier store the user must have the ability to choose:

• A single gender
• A single size
• A single combat environment (e.g. Ice/Desert)
• Any combination of accessories/weapons (yes/no to each accessory)

Every choice the user makes will have an impact on two things about their toy:

• The description
• The price

Display (dynamically) the current description and price of the toy based on the choices of the user.

If you get all of that done in text only then make a visual adjustment based on the choices of the user (Extra props if you can generate a picture of the toy).

A plan of action

I encourage you to first brain-storm (for no more than 1.5 pomodoros) the choices of your group. There are "domain" decisions like:

• What are the base choices?
• What are the accessories?
• Is there any interaction?
• What is the cost of each component?

Then there are the engineering choices:

• How do we manage the state of the things?
• What are our classes? Is there a brain which holds everything?
• How do we let the user interact with our classes? What are the right types of input?
• How do we dynamically display the current state of the toy?
• If the user changes their mind on a choice do we re-build our class or roll back the class?

Finally divy up the tasks and workflow as well as you can. If you make clear classes and functions with well-documented contracts then you can code as if your partner has finished their part and it should just work when you put them together. (It is also very viable for you to brainstorm together then code completely different projects from the same choices just to maximize your learning.)

An awesome trick I never knew about!

Instead of document.getElementById('theId').innerHTML = "blah"; you can just use theId.innerHTML = "blah";. AMAZING!!! It's actually worse for code maintainability but faster for quick examples. https://www.w3.org/TR/html5/browsers.html#named-access-on-the-window-object

Simple samples of various inputs

These examples will help you handle user input. I expect that you would be capable of this on your own but sometimes it's nice to see some worked samples of the functionality you need when you need it.

Checkboxes from all angles:

Select/option from all angles:

Also for your consideration:

Radio selections might be appropriate (and have very similar interfaces).