Project 2

Due Date: Sunday, 28 February

Individual Project

Objectives

Familiarity with

• separation of concerns between content, visual styles, and executable code
• XHTML
• divs, tables and CSS layers (not to be confused with the deprecated, nonstandard layer element)
• user interface elements and forms
• CSS
• JavaScript
• DOM (document object model)
• client-side scripting and DOM event handling
• usability (also have a look here and here)

Description

In this project, you will develop a simple, non-persistent browser-based time tracker. Specifically, your application should provide the following functionality. (Details will be clarified in class and on the mailing list.)

• Manage projects (categories) for which to track time.
  
• Start/stop tracking time spent on a project.
• If tracking for one project is in progress and the user starts tracking time on another one, the app should allow this only after confirmation.
• Real-time dashboard displaying simultaneously
• the total time worked today, this week, this month, and this year
• the time worked today, this week, this month, and this year on the currently active project
• Report generation.
• Per project
• Summary: time worked on this project today, this week, this month, this year, or since a custom date
• Details: list of daily, weekly, monthly, yearly breakdown or breakdown since a custom date
• Overall
• for each project, daily, weekly, monthly, yearly breakdown or breakdown since a custom date

The visual design requirements for this application is as follows:

• All pages must have the same, consistent layout.
• All pages must have the same, consistent text styles, using some cool fonts and colors other than the default.
• Use divs to divide each page into (common) navigation and (page-specific) content.
• Use layers to place a cool logo somewhere (consistent) on each page.
• Use forms wherever the user needs to be prompted to submit some information.
• Reuse an existing date picker component to allow the user to enter dates.

This application does not (yet) support persistence: if you reload it in the browser, all internal data will be lost.

Your application must also satisfy the nonfunctional requirements stated below. It is recommended to use Eclipse to author the documents, style sheets, and code for this application; you can then browse the documents locally or remotely using different web browsers.

Nonfunctional Requirements

• All content must be valid XHTML 1.1 documents. You are advised to use a validating editor or the W3C Validation Service to ensure that your content is valid. For convenience, you may want to place a link on each document that runs the validation service on this document. Your document should state the correct document type at the top.
• All rendering styles must be provided using a single shared valid CSS2 style sheet. There must not be any rendering styles in the documents themselves. You are advised to use a validating editor or the W3C CSS Validation Service to verify that your style sheet is valid.
• Your application must work on a cross-platform, standards-compliant browser such as Firefox or Chromium.

Grading

Total: 10 points

• 0.5 - valid XHTML 1.1 (browser shows standards compliance mode)
  
• 0.5 - external CSS, no style attributes in content documents
• 0.5 - correct use of divs and tables
• 0.5 - overall visual design
  
• 0.5  - consistent layout and navigation
• 0.5 - external JavaScript, no embedded code
• 1 - reuse of existing date/time picker
• 2 - time tracking
• 1 - dashboard
• 3 - report generation

Submission

Please send the instructor email as soon as your project is ready to be reviewed. The date your message is received counts as the submission date. Be sure to include your project URL in your email message.