In this assignment you will:
- Continue utilizing object oriented features in Javascript
- Work with localStorage commands to enhance a site
- Continue working with events, handlers and DOM manipulation
to build an interactive application.
The requirements with regards to allowed and disallowed resources for this
assignment are the same as for homework #10.
In this assignment we will finish the list app for the semester and will
leave the door open for future enhancements. This assignment requires
some good thought on your part.
You may remember that each item in the list is stored in an editable text box
which allows the ability to modify an entry in the list after it has been added.
Rules regarding modifying an entry can be tricky. Here is how will will
have modified entries behave:
- When an entry is modified we first need to trim it.
- Then we check to see if it is now blank or if it has been
changed to match an item already in the list. If either is
true then we want to simply remove that entry from the
list. If someone just adds whitespace so the item matches
itself, it should not be removed.
- If an entry is modified then we should make sure it is not
marked as done anymore.
- As with other behaviors, what shows up on the page, what is stored
in the List object, and what is stored in localStorage should be in
sync at all times.
- You may find it helpful to be able to figure how the position
of the textbox in the unordered lists got changed. Here is a site that
offers some ideas:
https://stackoverflow.com/questions/18295673/javascript-find-li-index-within-ul
Some advise before you start this section: Commit and push your current
work just in case you make a mess and want a fresh start!
It our current version of this application the user is limited to using only
a single list. Suppose we wanted to all usage of multiple lists. In this way
the user would select which list they want to work with and could manage
multiple lists by switching among them.
To make this concept a full-fledged implementation we would need to provide
ways to create multiple lists, remove lists, select a list for current use,
etc. For this assignment we will only do the last part as follows:
- Modify localStorage so that instead of keeping a single list you have
a variable (perhaps called masterlist) that keeps a list of lists! As
I've been working on this assignment I've called my list “Grocercies”.
Suppose now we create three other lists: “ToDo”, “Bucket”, and
“Christmas”. Now just put all four lists inside of the masterlist
variable in localStorage and you are ready for the next step.
- At the top of the control panel, create a drop-down box that contains
the names of the lists. Whatever list the user selects from the dropdown
box should trigger that list to be loaded. And the h2 tag in the right panel
that currently says “The List” should be replaced with the name of
the currently selected list.
Modifying the app to allow multiple lists will require some good thinking. NOTE:
You do NOT need to implement the ability to add new lists and delete lists from
the interface (we will just add/remove the lists by writing custom code in
the Javascript file for testing purposes.
Your final solution should be place in your hw11 directory in your work space and
should be pushed to BitBucket.