Note: This document is a work in progress. You can help improve it.

Score Board

For this assignment you will creating a simple interactive score board for your favorite sport.


Refer to this mockup to design your page:


  • A user should be able to update a score and the teams playing.

Explorer Mode

  • Implement the basic HTML.
  • Implement the basic formatting. Do not worry about styling colors, fonts, etc. yet.
  • Assign click events to the update buttons to update the corresponding values on the page. The score buttons should adjust the current score by a "hard coded" value.

Adventure Mode

  • Implement a Quarter/Period Tracker that would be appropriate for the sport.
  • Add some styling to make it more presentable. Have fun with it.
  • Make the layout responsive.

Epic Mode

  • Add a Timer that counts down automatically and updates the period/quarter appropriately.
  • Save/load the information to local storage.
  • Add CSS to the winning teams score to indicate who is currently winning.
  • Add anything else that your sport would have on its score board (e.g. fouls, sacks, shots on goal, etc.).
  • Improve the UX to help making score keeping by your sport easier.