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.
In all you do please remember that being a part of CSCI@HSU means DOING THE RIGHT THING.
- Doing the right thing matters.
- Doing the right thing means developing competence.
- Doing the right thing means living in community.
- Doing the right thing means finding moral, effective, and correct solutions.
- Doing the right thing means honoring God in all we do.
So, do this assignment in a way that demonstrates integrity, develops
competence, is correct, and honors God ... because what we do matters!
In completing this assignment you MAY use/access the following resources:
- The quick reference guides below (which include the printed guides
handed out in class):
- VSCode Editor in its configuration as provided in the course repo. You may use the
extensions that were suggested when you first launched VS Code in the repo directory.
- The instructor-provided notes for this course: https://docs.google.com/presentation/d/1NvzTydQUHc8_-bX2oH1hyzSbFMYByCsp/edit?usp=sharing&ouid=102845346193600525432&rtpof=true&sd=true
- Your own course notes
- Your instructor
- Discussions about the assignment with other students as long as you
never look at the working code of another student. Another student should
never tell you what to type and you should never tell another student what
to type.
- Websites that provide general instruction on HTML and CSS as long as they are
not targeted specifically to the assignment on which you are working. As an
example, if you want to learn about techniques for applying a color scheme
to a web site, this is a good thing to look up. If you are looking for a
solution to a specific Javascript programming exercise given in a homework
assignment, that is NOT something you should look up. REMEMBER: The goal is
for you to become proficient, so you need to figure some things out.
- Examples provided at: https://josephus.sergeantservices.com/classes/w1/source/
- For this assignment you can also make use of the Copilot extension in VSCode
to help you complete the work in this assignment.
You may NOT use/access any resource that exists in the universe that is not listed above.
Examples of resources you may NOT use include, but are not limited to:
- Code-producing extensions to VSCode that are not listed above.
- Code produced by code-generating tools of any kind (ChatGPT as one example).
- Code produced by other people (including classmates) that is targeted
to solve the specific assignment you are working on.
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.
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 we want
modified entries to 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 to match a different entry in the list then
in addition to removing the modified element in the list you also
need to make sure the existing item in the list is unmarked (if it
was marked).
- 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!
In our current version of this application, the user is limited to using only
a single list. Suppose we wanted to allow 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 initial 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. However, there should be 4 lists that have been manually added and
the user should be able to switch among the lists and the changes and state of each
list should be saved in a single variable in localstorage so that each list can be
tracked properly.
IMPORTANT: When testing your code, be sure to do a final test in which you delete
the masterlist variable from your browser's localStorage and then run from scratch.
In that class the four lists should be created as empty lists. (Keep in mind, that will
be the state of my browser when I test your code. That is, there will be nothing in
localStorage).
Your final solution should be place in your hw11 directory in your work space and
should be pushed to GitHub.