HW10: OOP and the List App due Tue 14 Nov 13:20


In this assignment you will:


In all you do please remember that being a part of CSCI@HSU means DOING THE RIGHT THING.

So, do this assignment in a way that demonstrates integrity, develops competence, is correct, and honors God ... because what we do matters!

Allowed and Disallowed Resources

In completing this assignment you MAY use/access the following resources:

You may NOT use/access:

Failure to abide by these guidelines will result in a zero for the assignment and the incident will be reported to the university provost as a violation of the university academic integrity policy. A second incident of academic dishonesty (whether from this course or another computer science course) will result in an F in the course.


Modify the shopping list app from the previous homework assignment to utilize localStorage so that if the page is opened from the same browser later the list will appear as it was when the page was closed.

Part 1: Add Additional App Features (8 pts)

In this part you will need to create some additional event handlers. This time, however, you will have Copilot helping you! Here are some additional app features to add:

Part 2: Continue Writing the List Class (8 pts)

In lab day we started creating the List class, but there were some methods we didn't complete. For this assignment write and test these methods: Add code in your Javascript file to test the behavior of these methods to verify they are working.

Part 3: Integrate the List Class and the Event Handlers (8 pts)

Our goal is that we want the array of objects in the list class to always match the contents of the list in the application. To make this happen you should comment out the code that you have to test the ListItem and List classes.

Your Javascript document should be structured in the following order:

  1. Start with the declaration of the ListItem class.
  2. Then give the declaration of the List class.
  3. Next declare a variable of type List (perhaps call it list) which will be an initially empty list.
  4. Now systematically modify your event handlers to call appropriate methods in the List class when something changes. For example, when the user tries to add a value you should first trim it, and then look for the value in the List. If it is not found then you will add it to the list and you will also add it to the webpage as your originally.
  5. Likewise, if the user clicks an X button to toggle an entry then you should toggle the exact same entry in the List object.
  6. You should systematically make changes so that no matter what what the user does, the List object and the screen are in sync.

Grading and Submission

Your final solution should be place in your hw10 directory in your work space and should be pushed to BitBucket.