If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

How would I start this problem?

User should be able to:
• add any number of ice cream cones to the order
• remove ice cream cones
• change the type of cone
• add and remove scoops of ice cream to each cone
• change the flavor of any scoop
• see total cost of the order (prices are listed below)
• see the updated total cost immediately after making a change

Requirements:
• Use only HTML, CSS, and JavaScript (no server-side technologies).
• Third-party libraries or frameworks may be used, but make sure to include them with your submission.
• Solution must run from a single HTML page (you may include JavaScript and CSS as separate files).
• Solution must work in the latest versions of Firefox, Chrome, and Internet Explorer (don't worry about old browsers).
• The user interface/layout is up to you. The UI should be easy to use, but does not need to be a highly polished product.

Start it like any other software engineering problem: analyze the requirements, group related things together, break down general requirements into smaller pieces, and so forth. Then review those requirements and decide which ones are the most important, both in terms of what other parts of the system will depend on them, and how risky they are in terms of technical issues, unknown factors, etc. Then start working on what you consider to be the most important functionality, breaking it down into smaller pieces as needed. Keep things as modular as possible, to make it easier to "glue" the separate parts together as you develop them.

When you have specific technical questions about a particular area that you're working on, post that specific question here in the relevant sub-form, and one of the many smart, experienced people here will help you out, or at least point you to the appropriate documentation so that you can help yourself.

I've done a couple of analogous projects and one thing I found helpful was a flowchart. Even if it's crudely drawn on a piece of notebook paper (you should see mine ) it helps identify what you want to happen when, all the way from when a user enters the page until the submit button is clicked. As NogDog stated, keep things as modular as possible. A subroutine that updates the grand total every time a cone is added or deleted from the order is one example. Another bit of advice is to comment everything. That will keep you from forgetting what "function cone()" does 3-4 days from now, or at least remind you that it has certain capabilities you can use.

That would be where I would start. You can always modify it if you find that something's missing or needs, ahem, "adjustment" . Your JS will be for form behavior, i.e. when a user changes from vanilla to chocolate the price per cone as well as the total are adjusted accordingly and, hopefully, in real time.

Anyway, that's how I see the "requirements". I'm serious about the flowchart though. That will help not only with your javascript but what inputs your form will need. It will also show you NogDog's "modules": where there's a user decision to be made, there's a module.

Basically you're creating an online icecream store. For the moment let's not consider the problem of the icecream melting in the back of a UPS truck during delivery . Think about the e-commerce sites you've bought from. You pick a product, choose color etc., then put in your "cart". You are asked if you want to order something else. If "yes" you make that order. When "no" you are taken to your cart where you are given a last chance to modify your order -- delete an item, go back and change a shirt size or whatever. When done you "check out", pay, etc. That's what you are building in this project. And that's the flowchart you will be using.

That was an event registration/permission process I did for a Boy Scout Troop. A very long story shortened, the BSA has a form for each event a Troop has outside normal meetings. That form requires a huge amount of information which I was only able to gather with 4 different forms. This flowchart allowed me to figure out the flow between forms, all the way from the "Event information" page to the "Thank You" page. Original was on a sheet of notebook paper and what I actually used for development.