Due Date: Sunday, 28 February
- separation of concerns between content, visual styles, and executable code
- divs, tables and CSS layers (not to be confused with the deprecated, nonstandard layer element)
- user interface elements and forms
- DOM (document object model)
- client-side scripting and DOM event handling
- usability (also have a look here and here)
DescriptionIn 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
- for each project, daily, weekly, monthly, yearly breakdown or breakdown since a custom date
- 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.
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.
- All content must be valid documents. You are advised to use a validating editor or the 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 style sheet. There must not be any rendering styles in the documents themselves. You are advised to use a validating editor or the to verify that your style sheet is valid.
- Your application must work on a cross-platform, standards-compliant browser such as Firefox or Chromium.
GradingTotal: 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
- 1 - reuse of existing date/time picker
- 2 - time tracking
- 1 - dashboard
- 3 - report generation