Exercise Thursday

Goal: Continue to practice implementing jQuery and developing good organizational habits of separating user interface and busiess logic 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) {
  const someInput = $("input#some-input").val();


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

Then, meet the goal by completing one of the projects below.

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. 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, the page should tell users the booking was successful. You can also redirect users 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 to a new 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 functions for converting between cooking units, feel free to build on that rather than starting from scratch.

Lesson 52 of 65
Last updated May 23, 2022