Exercises: A Web page that interacts

The only way to learn to create Web pages that can ask questions is: make some Web pages that ask questions.

Remember, Webers need to be able to do things. Not just talk about them.

If you get stuck, ask for help in your study group.

Exercise: Inversion 1

The invert of a number is 1 divided by that number. So the invert of 2 is 1/2 = 0.5. The invert of 3 is 1/3 = 0.333. The invert of 82.8 is, er, something or other.

Write a program that inverts a number that the user enters. You can try it here, but don’t look at the source code.

Upload the solution to your server, and put the URL below.

(Log in to enter your solution to this exercise.)

Exercise: Circumference 1

Write a JavaScript program to compute the circumference of a circle from the diameter. The user types in the diameter, clicks a button, and the program shows the circumference. You can try it here, but don’t peak at the source code!

The formula is:

circumference = diameter * pi

pi is around 3.14159.

JavaScript has the value of pi built-in. If you want to try it, use Math.PI instead of 3.14159.

Upload your solution to your server, and paste the URL below.

(Log in to enter your solution to this exercise.)

Exercise: Circumference and area 1

Write a JavaScript program that reports the circumference and area of a circle. The user types in the diameter, and clicks a button. You can try it here, but don’t look at the source code!.

The formula is:

area = pi * diameter/2 * diameter/2

Upload your solution to your server, and past the URL below.

(Log in to enter your solution to this exercise.)

Exercise: Hypotenuse

Write a JavaScript program to compute the length of the hypotenuse of a right triangle from the length of the other two sides. You can try it here, but don’t peak at the source code!

The formula is:

hyp = Math.sqrt(c1*c1 + c2*c2);

Hypotenuse

(Image from Wikipedia)

Upload your solution to your server, and paste the URL below.

(Log in to enter your solution to this exercise.)

Exercise: Estimating order quantity

This exercise is fairly complex. You should consider working on it with someone else.

You work for Dog Brews, Inc., a distributor of fine dog beers and wines. Dog Brews buys from breweries and vineyards, and distributes to retail outlets.

There’s an order cycle for each product. Dog Brews places an order to, say, a brewery. The brewery delivers what was ordered a few days later. As Dog Brews sells the product, its inventory goes down. Before inventory gets to zero, Dog Brews places another order, and the cycle continues.

Here’s the situation over time:

Inventory over time

Inventory jumps when an order is delivered. It goes down as products are sold. It suddenly jumps when another order is delivered. And so on.

When Dog Brews places an order, it isn’t delivered immediately. There’s a time delay. It’s called the lead time. So if an order placed on Monday is delivered on Wednesday, that’s a two day lead time.

Because of the lead time, Dog Brews doesn’t wait until inventory gets to zero before placing an order. If the lead time for a product is two days, then Dog Brews should reorder when it gets down to a two day supply of the product. If Dog Brews sells, say, 40 units a day, it would reorder when inventory gets down to 80 units. That’s called the reorder point.

Inventory over time

Also on the graph you can see the reorder quantity, that is, the quantity ordered each time. There’s also the reorder period, also called the cycle time. That’s the time between each order.

This model makes lots of assumptions about the business, e.g., that demand is constant. The assumptions are usually not met in reality, but it’s close enough in many cases.

It costs money to place an order, with shipping, insurance, and such. The bigger the orders, the lower the ordering costs will be. But it also costs money to keep inventory. There’s storage, spoilage, theft, and so on. How to balance out ordering and storage costs?

There are some mathematical formulas that will work out the best order quantity, reorder point, and reorder period. Plug in numbers for demand, lead time, order cost, and some other things, and the formula will tell you what to do.

Your job is to write a Web page to help the mammals working in Dog Brews’ purchasing department. Here’s what the page will look like when it starts out:

Fields without data

The confidentiality policy label shows a hand when the mouse cursor hovers over it:

Policy hidden

When the user clicks on the label, the policy shows up:

Policy shown

Click again, and the policy hides.

The user fills in the values. For example:

Fields with data

Clicking the button shows the results:

Results

Here’s some JavaScript you can use to compute the output:

var optimal_order_quantity = Math.sqrt(2*demand*order_cost/(unit_cost*holding_cost/100));
var reorder_point = demand/250*lead_time;
var cycle_time = 250*optimal_order_quantity/demand;

For extra Dog Points:

  • When the page first loads, put the cursor into the product name field.
  • Make the output look nicer. For example, round the order quantity to the nearest whole number. (You’ll need to do some Googling to find out how to do this.)
  • Output the date of the analysis. (You’ll need to do some Googling to find out how to do this.)

You can try my solution.

Upload your solution to your server. Enter the URL below.

(Log in to enter your solution to this exercise.)

Exercise: Order beans and things

Make a page with an order form like this:

Empty order form

Figure 1. Empty order form

Note that the input focus is in the first field.

The user completes the fields and clicks the button. Show an error message if a field is empty:

Empty field

Figure 2. Empty field

Show an error message is a field has an invalid number:

Bad number

Figure 3. Bad number

Show an error message if the user enters a number that is less than zero:

Number less than zero

Figure 4. Number less than zero

If there is an error in both fields, you can just show the one for the beans field.

Once you show an error and the user clicks the OK button on the alert() box, the input focus should be in the field the error message was about. For example, after hitting OK in Figure 4, the cursor should be in the things field.

If the input data is valid, show the total price:

Data OK

Figure 5. Data OK

You can try my solution, but don’t look at the code yet!

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)


Lessons

User login


Dogs