Exercise Tuesday

Reminder: You must be signed up for a group project by the end of the day on Wednesday. See details here for more information.

Goal: The goal for today is to practice creating objects using constructors and prototypes. Practice adding properties and methods to objects and calling out those properties and methods in your webpage.

Warm Up


  • What is the difference between a Constructor and Prototype?
  • When would you use a Constructor, and when would you use a Prototype?
  • What functionality do they offer?

Code


Address Book

Follow along with the Address Book lessons to add Address objects and support for multiple addresses. Complete these items for it too:

  • Add address type to the addresses entered
  • Remove any additional address fields when the form is submitted. (One way to do this would be to use the .not() and .remove() functions.)

If you wish, work on these too:

  • Refactor some of the other sections of the jQuery into functions as we did with resetFields()
  • Try a jQuery method from either the CSS or Effects options in the documentation (e.g. fadeIn() or .css())
  • Try a jQuery method from the Events options (e.g. hover() or .keypress())

Movie Tickets

Create a webpage where a user can select the name of a movie, the time of day that they would like to see the movie and their age. The webpage should let them know how much their movie ticket will cost, based on those three factors. Consider that non-"first-release" movies, matinee and senior tickets tend to be cheaper than the regular priced ticket.

Your constructor and prototype could be called Ticket and you can come up with the formula for determining how the price is calculated depending on the input from the user.

Bank Account

Use constructor functions and prototypes to create a webpage where a user can create a single bank account with an initial deposit amount. Then allow the user to make withdrawals, deposits and see the balance of the account.

Remember to create a BankAccount constructor and a prototype that includes methods for deposit and withdrawal and any other properties needed. Here is an example wireframe to help you visualize the app:

A mock up of the bank account webpage

Your project is not required to look like this; this is only an example.

Peer Code Review


  • Does the web app work as expected?
  • Is business logic and user interface logic kept separate?
  • Were constructors and prototypes used to create new objects?