Description

The purpose of this project is to learn to debug a broken website using the browser’s built-in debugger.  You may use whatever browser you like.  You will find that these browsers are your best two choices:

1. Chrome
2. Firefox with the FireBug extension.

1         Application walk-through

I will present you with a description of a simple application for keeping contact info.  The goal of this assignment is to get the app working, and to find / fix all bugs, typos, and minor glitches.

Attention to detail is important.

1.1         Main screen

When you start the app, it will pre-load four contacts, and you’ll see them displayed in a list:

If you click the New Contact button, that’ll allow you to create a contact.

If you click the Edit button, that’ll allow you to edit a contact.

If you click the delete button, it should display a confirmation dialog like so:

If you click cancel, it should not delete the contact.  If you click OK, it will delete the contact.

1.2         New Contact

When you click the New Contact button:

1. The main table should become hidden.
2. The edit contact form should appear.
3. The title should say New Contact
4. All input controls should be reset as shown in the image.
5. All validation messages should be hidden.

Screenshot:

Only name, phone number, and age are required fields.  The default phone number type is Mobile.  The default Ringtone is None.

When validating age:

1. If the user enters a random string, give them an error message that the age is not a number.
2. If the user enters a negative number, or a number greater than 120, tell them the range.

1.3         Edit a contact

When you click an edit button on the main form, the contact list will hide, and the edit window will appear.  The form should populate with all the info for the contact.

Validation should work just like when creating a new contact.

Screenshot:

2         Grading for this assignment

Most students find all the bugs in the process of getting things to work.  This is not an exhaustive list.  I may find other bugs elsewhere:

1. Bring up the console window and keep it up to check for errors.
2. Click New Contact.
   1. The page should switch to the input form
   2. The title should be set to “New Contact”
   3. Click Save. Validation messages should appear for the name, number, and age.
   4. Click Cancel
3. Edit Sarah Jensen
   1. The title should be set to “Edit Contact”
   2. Fields should be set as follows
      1. Name: Sarah Jensen
      2. Number: (801) 439-9214 / Home

• Age: 21

1. Ringtone: Table for Two

1. All validation messages should be cleared.
2. Make the following changes:
   1. Name: (anything random)
   2. Number type: Work

• Ringtone: Ritmo Latino

4. Edit Sarah Jensen again
   1. Make sure the changes saved
   2. Click Cancel.
5. Click New Contact
   1. Create a new contact
   2. Save
6. Edit the contact you just added. Make sure all settings are what you just entered
7. Delete Sarah Jensen
   1. You should get a confirmation window.
   2. Click cancel.
   3. Delete again, then click Yes
   4. Make sure Sarah got deleted.
8. Look in the console window and make sure there are no errors
   1. Note: you may see a 404 error that Chrome could not load favicon.ico. You can ignore that error.

I will take off points depending on the severity of bugs that I find:

1. Crash / loss or corruption of data: -15 points
2. Major glitch, but there is a workaround: -10 points
3. Cosmetic issues: -5 points

3         Submitting your assignment

Upload to netlify, or find some way to host it.

In Canvas, I want to see:

• A URL to where your page is hosted (do not share this URL with friends)
• A list of the items that you did for additional study. If you don’t provide a list then I get to guess and make my own judgement calls.