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.

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

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

Write a JavaScript program to compute the length of the hypotenuse of a right triangle from the length of the other two sides.

The formula is:

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

(Image from Wikipedia)

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

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

Paula is an accountant clown. No, really. Companies hire her to do her shtick at board meetings. You can just imagine how funny it is. You’ll have to, because I can’t bear to describe it.

Paula has a pay-by-performance policy. The more laughs she gets, the more she gets paid. She charges:

• $0.80 for each guffaw
• $1.10 for each belly laugh

For example, suppose there were 20 people at a board meeting. Paula does her act. On average, each person guffawed 8 times, and had 5 belly laughs. So:

Revenue per person = 0.80 × 8 + 1.10 × 5 = $11.90

Total revenue = $11.90 × 20 = $238

Paula has a hard time with numbers. Write a Web page to help her estimate how much she will earn for a gig.

The page starts off like this:

Figure 1. Page after loading

I made my browser narrow to get the screenshot. Your page does not have to break between Estimatronical and Numeratoid. It can all be on one line.

Notice that the cursor is in the first input field when the page loads. The color codes are #7C8B9B and #E5EBDF.

Paula fills in some numbers and clicks the button:

Figure 2. Page after computations

The output appears only after the button has been clicked.

Notice that the cursor has gone back to the first input field.

Upload your page, and enter the URL below.

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

Create a page that looks like this when it first loads:

The user clicks on the animal that is the cutest, then the one that is the next cutest, and so on. A list of animals grows, in the order they are clicked. The mouse cursor should be a hand when it’s over one of the animal names.

Here’s what the page looks like after the first click:

Here’s what it looks like at the end:

You can watch a video showing how the interaction should work.

Match the colors approximately. Use any sans serif font. Use at least two CSS classes (you can use more).

I made my browser narrow to make the screenshot above, so I could fit it in this page. You don’t need to have the same width.

Hints:

• The animal names start off with a CSS class.
• Hide the output stuff when the program loads. Show it when there’s a click.
• It’s OK if the user clicks on each animal name more than once. For an extra challenge, figure out how to prevent that. Hint: can you disable the click event?

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

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

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.

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.)

Write a JavaScript program that reports the circumference and area of a circle. The user types in the diameter, and clicks a button.

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.)

Make a page with an order form like this:

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:

Figure 2. Empty field

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

Figure 3. Bad number

Show an error message if the user enters a number that is 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:

Figure 5. Data OK

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

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

Create a page to compare the performance of two vampire fighters: KM and MS. The page starts like this:

Figure 1. Page after loading

I made my browser narrow to get the screenshot. Your page does not have to break between Compute and winner. It can all be on one line.

Notice that the cursor is in the first input field when the page loads. The color codes are #7C8B9B and #E5EBDF.

The user fills in some numbers. Here’s what it looks like after some input, but before the button is clicked:

Figure 2. Page after input

When the clicks the button, do these things:

• Change MS’s score to one less than KM’s score. So if KM had 5, the text field for MS would change to 4. It doesn’t matter what score MS has.
• Show a message that KM wins, and Buffy likes KM better.

Here’s what the display would look like after the button is clicked with the data above:

Figure 3. Page after click

Notes:

• You don’t need to validate the input. You can assume that the user always types valid numbers.
• The final output is the always the same. KM always wins.
• Use whatever sans serif typeface you like, in whatever sizes you like.
• Notice the color and size of the output messages. Match them approximately.
• After the user clicks the button, the cursor goes back to the first input field.
• Hint: $("#thing").val(13) would set the value of the form field thing to 13.

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

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

Write a page that takes an order for a cake. The user makes three choices:

• The size of the cake – small, medium, or large.
• The flavor of the cake – chocolate or vanilla.
• The flavor of the frosting – chocolate or vanilla.

The page looks like this when it opens:

Figure 1. Page when it opens

When the user puts the mouse cursor over any <li> element, the cursor changes to a hand:

Figure 2. Cursor

When the user clicks on an <li> element, the text of the element appears in the output area at the bottom of the page:

Figure 3. Selecting a cake option

The output area has one part for each category of choices: size, cake flavor, and frosting flavor. When the user clicks on a cake size, his/her choice appears in the size part of the output area. And so on.

Once the user has clicked on a choice within a category, s/he can still change his/her mind. If the user clicks on a different choice, the new choice is shown in the output area:

Figure 4. Selecting a different cake option

The user can select one option in each category. For example:

Figure 5. A complete order

Finally, the user clicks the Order button, and an alert() message appears:

Figure 6. Order button clicked

Upload your solution to your server.

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

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 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.

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:

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

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

Click again, and the policy hides.

The user fills in the values. For example:

Clicking the button shows the 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.)

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

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

Make a page that hides detailed information until the user asks for it. My page is about dogs, but you can make yours about something else.

The page starts out like this:

Figure 1. Page at start

The mouse cursor turns into a hand when it moves over a title. When the user click on a title, two things happen. First, the arrow changes. Second, some text appears below the title:

Figure 2. After a click

Click on the same title again, and (1) the arrow changes back into a down arrow, and (2) the text disappears.

Use an animated effect to show and hide the text.

Here’s some code that might help:

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    ...
    <script type="text/javascript">
      $(document).ready(function() {
          $(????).click(function() {
            //Is it already visible?
            if ( ????.is(":visible") ) {
              //Visible - hide it.
              ????.hide(????);
              ????.html("↓");
            }
            else {
              //Not visible - show it.
              ...
            }
          });
          ...
      });
    </script>
  </head>
  <body>
    ...
    <p id="????"><span id="????">↓</span> Domestication</p>
    <p id="????">
      Dogs were domesticated from gray wolves about 15,000 years ago.
      ...
    </p>
    ...
  </body>
</html>

You don’t have to use this code if you don’t want to.

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

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

Make a page for a number guessing game. The page starts out like this:

Note that the cursor is in the text field.

The user enters a guess, and clicks the button. If the value the user entered is not a number, show an error message. Otherwise, the page changes to one of these:

After each guess, the cursor goes back into the text field.

Here’s some code that might help:

<script type="text/javascript">
  //Declare variable outside ready(), so its value is kept between guesses.
  var right_answer;
  $(document).ready(function() {
    right_answer = parseInt(Math.random() * 100) + 1;
    ...
    $("#guess_button").click(function() {
      var guess = $("#guess").val();
      if ( ???? ) {
        alert('Please enter a number.');
      }
      else {
        ...
      }
      ...
    });
  });
</script>

You don’t have to use this code if you don’t want to.

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

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

Change the game in two ways:

• Add a button that starts a new game.
• Show the number of guesses the user has made in this game.

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