You may work in pairs on this assignment.

Part 1: Client-side Error Checking

Add client-side error checking to your either the Bugs or Authors page of your bug tracking app (both "new" and "edit").

1. Add input and/or change listeners to the fields and report errors as soon as they are made.
2. The submit button should be disabled whenever a form field is in an invalid state.

Make sure the error messages are nicely formatted. (Don't just throw a string up on the screen.)

You must write your own JavaScript. Don't use the built-in client-side form validation for this assignment.

Part 2: Client-side Table Sorting

Add Javascript to your bugs listing (the "index" route) that will respond to a click on a table headding by sorting the table according to that column. Here is one possible approach:

1. Add a click listener to each th element.
2. When a header is clicked
   1. Get the tbody element and save it in a variable named tbody
   2. Call tbody.getElementsByTagName('tr') on the tbody element to get all the tr elements inside the tbody. (Notice that calling document.getElementsByTagName('tr') will return all tr elements in the document, which is not what you want.)
   3. Use a loop to copy all tr elements to a different array.
   4. Use a separate loop to remove all the tr elements from the tbody
      • It is important to use two separate loops. (Bad things may happen if you remove elements from a loop while iterating through it.)
      • You can use the method tbody.removeChild to remove elements from the DOM.
   5. Use the Array sort method to sort the tr objects according to the desired column. (Use the comparison callback to compare the rows by column.)
   6. Re-insert the sorted elements into the tbody element. (Use the appendChild method.)

Deliverables:

Updated Thursday, 20 February 2020, 4:48 PM