Don't like this style? Click here to change it! blue.css

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:

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

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

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

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:

Then there are the engineering choices:

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:

JS Bin on jsbin.com

Select/option from all angles:

JS Bin on jsbin.com

Also for your consideration:

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