Price and Discount Web Page

Let’s put together the things you have learned about collections to present a web page where people can give a list of prices (separated by blanks), and a discount. The page will then show a bulleted list of the prices after discount:

Enter prices, separated by blanks:

Enter discount: %

Discounted prices:

The input elements have id attribute prices and discounts, and the output area (currently empty) has an id attribute result. The calculate button has the id attribute calculate.

Again, planning is the key here. So let’s think about the tasks you will need to do to transform the input data to the desired output.

Each of these tasks is function-sized; your program might well end up with lots of little functions that get chained together like a conveyor belt in an assembly line. Here are the things you will need to know in JavaScript to accomplish these tasks.

You might be thinking “wow! that’s a lot of stuff to handle!” Yes, this is true. Don’t be discouraged; this is perfectly normal. There is no one part of this program that is particularly hard, but there are a lot of parts to put together.

You may want to start by writing the sub-parts and testing them one at a time, then link them all together. This is called the “bottom up” approach. Or, you might want to start with the big picture and write the functions as mere placeholders that return a known result. Once that works, you start replacing the subparts with the real functions, one by one. This is called the “top down” approach. You might even want to combine the approaches, writing the subparts and linking them together into the big picture as you go along. I don’t know a formal name for that approach, so let’s call it the “meet in the middle” approach. Whichever approach you use, don’t try to write everything all at once. Write a little, test, and then add more, and test.

You can see my proposed solution on the next page.

Next Section - Price and Discount Solution