Exercise Wednesday

Goal: Continue to practice implementing jQuery and developing good organizational habits of separating front and back-end code by adding additional features to our ongoing calculator project, and completing the additional exercises detailed below.

Warm Up

  • How do the user interface and business logic 'communicate'?
  • What does $(document).ready() do? What can occur if we forget to add it?
  • Is the following code user interface or business logic? Why? How can you tell?
$("form#some-form").submit(function(event) {
  var someInput = $("input#some-input").val();


Calculator User Interface

In the calculator user interface lesson, we built a site that collected two numbers from a form and then added them together by calling our pre-existing business logic add() function. Now it's your turn. Follow along with the lesson to build out user interface logic for your calculator's addition capacity.

Subtracting, Multiplying and Dividing

Continuing to work on your calculator application, build the user interface for subtraction, multiplication and division. You already have the business logic done. For now just include four separate forms - one for addition, one for subtraction, one for multiplication and one for division. In your JavaScript code you'll need a form submit event handler for each form. (Soon, when we learn about branching, you'll be able to use a single form and allow the user to choose whether they're trying to add, subtract, multiply or divide.)


Create a website for booking appointments with you. Users should be able to enter their name, a description of the appointment, the appointment date, and start/end times.

After they submit the form, tell them the booking was successful. You might try using a modal to do this, or redirect to a different page that contains the text "Booking Successful"! (Note that you won't be able to move data you got from your user from page to page just yet.)

Cooking Conversions

Create a website with forms to convert between various cooking units. Each form should have its own form submit event handler that calls a corresponding business logic function and then displays the return value of that function in a logical place on the page.

If you previously wrote the business logic (back-end) functions for converting between cooking units, feel free to build on that rather than starting from scratch.