Description

In this project, we will build upon part A and add two features:

1. 75 points: Edit an item in the list.
2. 25 points: Delete an item from the list.

 

1         Project Walkthrough

For your project, everything should function as described in part A, with the following features added.

Each row in the list of items should have an edit button and a delete button.

To edit an item, click the edit button for that row.  Your page should:

1. Load that row into the input form.
2. The title at the top of the page should change to say that you’re editing an item and not creating a new item.
3. The button on the left should say “Save” or “Ok”

Here are some screenshots:

 

 

You can change any of the fields, then click Save

1. The form should perform validation on all required fields (again, you only need to make 3 fields required, but you should check the user’s data where it makes sense).
2. The input form will hide
3. The list of items will re-appear
4. The row that you edited will have updated items. The position of the row should not change.

 

 

When you click one of the delete buttons, your page should:

1. Pop up a confirmation of some sort. You can use an alert dialog if you like.  The message should display the name of the item that the user is about to delete.  The dialog should have Ok and Cancel buttons (or something equivalent).
2. Clicking Cancel will take the user back to the list, and will do nothing.
3. Clicking OK will remove the record from the page and delete it from the model.

 

Clicking the Create button should work as before.

1. The title of the form should indicate that user is creating a new record.
2. The accept button should say “Save” or “Create”, or something that makes it clear what will happen when the user clicks it. Do not use “OK”.  OK is used to say, “Yeah, I understand.”  It should not be used to say, “I’m done now.”

 

And as before, your form should perform validation where it makes sense.  Don’t just make everything required, and don’t make your validation rules arbitrary.

In my case, it made sense to make all fields required, but I also make sure the user can’t enter bad data:

 

 

2         Project-specific requirements

 

2.1         RPG Character Generator

Two additional requirements:

• Make sure when you edit a character that the stats are the same as what got created, and do not get re-rolled.
• You should hide the re-roll button.

 

2.2         Student Registration

Again, because you’re merely copying my code, I’ll only give 75% for this assignment.

 

3         Required modifications

How you implement this is up to you.  That said, I will provide some sample code that shows how I got it to work for my student registration app.

You may not use jQuery in this assignment.  I want you to get familiar with working with the DOM directly.

 

3.1         Modifications to model.js

We need the following function in our model.

1. GetItemById: this function will be called when the user clicks the edit button. This function should:
   1. Take a single parameter which is the id of the record being fetched.
   2. Search through the list until a match is found.
   3. If a match is found, return it. If no match is found, return undefined.
2. UpdateItem: this function should get called when the user clicks the save button.
   1. Search through the list until a record with a matching id is found.
   2. Copy the data that was passed in to the updated record.
3. DeleteItem: this function gets called when the user clicks the Delete button and then confirms.
   1. Take a single parameter, with is the id of the record to delete.
   2. Search the list for a match.
   3. Remove the match from the list.

Note: the model only cares about the array of items in memory.  It should not be in charge of changing the rows that are displayed on the page.  That’s the controller’s job.

 

3.2         Modifications to the view

My view hasn’t been significantly altered for this project.  The one important change is that my input form has three buttons:

1. An Update button: used when updating an existing record.
2. A Create button: used when creating a new record.
3. A Cancel button: same as before.

Here’s my HTML:

 

 

3.3         Modifications to controller.js

This is where you’ll need to add most of your changes.

 

3.3.1        The onPageLoad() function

Do not wire up the handler for the Update button.  Save that task for when the user clicks to edit an item.  You’ll see why in a bit.

You shouldn’t need to make any changes to this function.

 

3.3.2        The onNewBtnClicked function

This function works pretty much as before.  The only change you’ll need to do is to hide the Update button and show the Create button.  This is fairly straightforward:

 

3.3.3        The onEditBtnClicked function

This function is new.  It gets called when the user clicks the edit button on a row, and its job is to do the following:

1. This function takes a single parameter, which is the id of the record that the user wants to update (see the description of the addTableRow() function, below).
2. Using the id, call the getItemById method in the model to fetch the correct record. If there is no matching id then print a debug message to console.log, and return.
3. Populate all the controls on the input form using values from the record.
4. Wire up the click handler for the Update button.
5. Hide the list of items.
6. Show the input form.
7. Hide the Create button and show the Update button.

 

Most of this code is straightforward.  I’ve given you code in the slide decks on how to find form controls and set their values, so you pretty much have what you need.

The one trick you need to know is how to correctly wire up the update/save button.  It takes two functions to let the user change an existing record:

1. onEditBtnClicked: this function
2. onUpdateBtnClicked: which gets the data from the form, validates it, saves it to the model, and then updates the list.

You’ll fetch the button from the DOM using getElementById, then you’ll set its onclick event using an anonymous function, like so:

Do this at the very end of onEditBtnClicked.

You don’t want to call onSaveBtnClicked directly, because there is no way to pass in the record’s id.  This is what the anonymous function’s job is.  The anonymous function captures the id in a closure, so that when the user clicks the button, your page still has the id.

The following will not work.  When onUpdateBtnClicked is finally called, there is no way for JavaScript to know the value of the record id:

You can’t do this, either.  This will call onUpdateBtnClicked immediately, and set the onclick handler to whatever your function returned (which in this case is void).

 

3.3.4        The onUpdateBtnClicked () function

The onUpdateBtnClicked() method works a lot like the onCreateBtnClicked() method from part A.  Here is the algorithm:

1. This method takes a single id, which is for the record that the user has updated.
2. Validate input from all the controls.
3. Copy the data from the form controls.
4. Call into the model to update the record, using the id that was passed in.
5. Make necessary changes to the row in the table.
6. Hide the input form.
7. Show the list of items.

You already know how to get data from controls on a form, so I don’t need to walk you through that.

You do need to know the trick I used to update the row in the table.  Remember how in addTableRow() we gave each row an id?  We’ll call getElementById, and fetch the <tr> from the DOM.  Then we can set the innerHTML of each element directly.  Here is the code that I used:

That’s it.  You should be able to figure out the rest.  That’s what programming is about, figuring it out.

 

3.3.5        The onDeleteBtnClicked() function

This function takes a single parameter, which is the id of the record to be deleted.  It’s job is straightforward:

1. Call into the model to get the record that matches the id. If the record does not exist then print an error to console.log, and return.
2. Prompt the user for confirmation. If the user clicks the cancel button then return.
3. Call into the model to delete the record.
4. Fetch the row that needs to be deleted from the DOM and remove it.

Again, we make use of the id that we set on the row in the addTableRow() function.  To remove a row from a table, just call its remove() method.

 

3.3.6        The addTableItem() function

Let’s look at your addTableItem() function from last assignment and make two modifications.

First, when adding a new row we also add two buttons, one for edit and one for delete.  I’ve given both buttons an id in the format of “btnEdit0000” and “btnDelete0000”.

Second, after creating the row I use getElementById to fetch the new buttons from the DOM and wire up an anonymous function.  Again, it’s important that you use an anonymous function instead of using the button handler directly.  The anonymous function lets us pass in the record id when calling onEditBtnClicked() and onDeleteBtnClicked().

 

4         Troubleshooting

Troubleshooting this assignment will be tricky.  If you have bugs, they’ll likely be in these areas:

1. The addTableItem() function. Make sure you set the onclick handler correctly.
2. The onEditBtnClicked() function: Make sure you properly set the handler to the Save button
3. The onUpdateBtnClicked() function: Make sure you correctly write your changes back to the model.

Please get started early on this assignment.  This is one of those that can take a lot of extra time to troubleshoot.

 

5         Submitting your work

Upload your project to netlify, as with your other class projects.