Breakout Game

Game where you control a paddle with the arrow keys to bounce a ball up to break bricks. This app uses the HTML5 canvas element and API.

  • Draw elements on canvas.
  • Use canvas paths to draw shapes.
  • Add animation with requestAnimationFrame().
  • Move paddle on arrow key press.
  • Add collision detection.
  • Keep score.
  • Add rules button with slider.

Validation Form

Simple client side form validation. Check required, length, email and password match.

  • Show error messages under specific inputs.
  • checkRequired() to accept array of inputs.
  • checkLength() to check min and max length.
  • checkEmail() to validate email with regex.
  • checkPasswordsMatch() to match confirm password.

Seats Booking

Display movie choices and seats in a theater to select from in order to purchase tickets.

  • Display UI with movie select, screen, seats, legend & seat info.
  • User can select a movie/price.
  • User can select/deselect seats.
  • User can not select occupied seats.
  • Number of seats and price will update.
  • Save seats, movie and price to local storage so that UI is still populated on refresh.

Expense Tracker

Keep track of income and expenses. Add and remove items and save to local storage.

  • Create UI for project.
  • Display transaction items in DOM.
  • Show balance, expense and income totals.
  • Add new transaction and reflect in total.
  • Delete items from DOM.
  • Persist to local storage.