Create a web page (index.html) containing the following sections:

  1. Header: contains your name and student number
  2. Student Data Input Form
    • contains the following input fields:
      • First Name
      • Last Name
      • Carleton University Student Number
      • Canadian Postal Code
    • contains a submit button that implements the following functionality:
      • when the user presses the button the data must be validated using regular expressions
      • think about reasonable rules for names, student number and postal code
    • If the data is valid according to your rules:
      • the data should appear in the top row of the data table regardless of the filter or order.For example, if the table is currently being filtered to display students whose student number contains 567, and you add a person with a student number of 1000000 the new person’s data should appear in the top row of the data table.
      • if the table already contains the student number being added replace the data in the table with the data in the form.
        • the labels for the input textboxes goes to “no error” color
        • no error message appears in the form validation div, and it cleared of previous error messages
    • if the data is not valid:
      • highlight, in red color, the labels of the input textboxes containing invalid data
      • display an appropriate error message in the form validation div
      • do not add the data to the table until all the errors have been fixed and the user resubmits the form
  3. Table containing the data
    • contains any number of rows
    • contains four (4) columns:
      • First Name
      • Last Name
      • Carleton University Student Number
      • Canadian Postal Code
    • when the user clicks on a column header the rows of the table should be sorted according to that field – no need to implement sort in lexicographic order on multiple fields.For example, clicking on the “Carleton University Student Number” should sort the students based on their student number (highest to lowest or lowest to highest).
    • when the mouse goes over a row in the table, the background color of the row is changed (hover effect) This should be done with javascript (not css pseudostyles).
  4. Table data filter form
    • contains:
      • dropdown list containing column names
      • textbox for text entry
      • filter  button, reset button
    • functionality:
      • the user must be able to select the column where the filter will be applied using the dropdown list
      • the user must be able to enter text into the textbox
      • after selecting the column and entering text when the user presses the filter  button the data table must display those rows where row content match the regular expression.
      • Once reset button is pressed, all students previously added and not deleted are displayed again.
      • Bonus: reset button is disabled if filter is not active; filter button is disabled when filter text is empty, or currently entered filter is already applied.
  5. Data statistics section
    • shows the number of students currently displayed in the data table out of the out of the total number of students.For example, if the total number of students is 10 and after applying the filter only 2 rows are shown in the table the stats section should display: 2/10. When there is no filtering being done, it should display: 10/10.
  6. Recycle bin image
    • when the user drags and drops a row (from the data table) over the recycle bin, the row is deleted from the table.


The assignment is to be submitted as zip file using WebCT.


Functionality will be tested using the Firefox browser.

Given for correctly submitting the assignment in WebCT
45% or 0
Given to the overall functionality: forms, validation, adding, sorting, drag and drop, and filter have to be implemented, even in glitchy fashion.
Given for particular tests and fulfillment of particular requirements

Скачать архив

    9 Авг 2009 by freetonik

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

Comment Form