In this assignment you will:
- Continue utilizing object oriented features in Javascript
- 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 default configuration, including the Prettify extension and the
GitHub Copilot extension.
- The instructor-provided notes for this course: https://docs.google.com/presentation/d/1NbiLvs4ceGnmTtuY1ymz3H136u4N2tjPgD9_g9QT6iE/edit?usp=sharing
- 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.hsutx.edu/classes/w1/source/
You may NOT use/access:
- Resources not expressly listed above, including, but not limited to,
the following ...
- Code produced by code-generating tools (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.
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.
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:
- Replace the Delete List button with a Delete Marked button and
modify the behavior so that elements that have been marked out are
removed from the list.
- Add a Toggle Marked button, which when clicked, will cause all
marked items to be unmarked and vice-versa.
- Modify the behavior when adding a new entry to the list the value
entered by the user is trimmed to remove leading and trailing whitespace.
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:
- toggleMark(str)—find the list value matching str and update
toggle its marked value in list
- markAll(mark)—set or clear the mark value for all elements in
list according to the provided parameter
Add code in your Javascript file to test the behavior of these methods to verify
they are working.
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:
- Start with the declaration of the ListItem class.
- Then give the declaration of the List class.
- Next declare a variable of type List (perhaps call it list) which
will be an initially empty list.
- 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.
- Likewise, if the user clicks an X button to toggle an entry then you
should toggle the exact same entry in the List object.
- You should systematically make changes so that no matter what what
the user does, the List object and the screen are in sync.
Your final solution should be place in your hw10 directory in your work space and
should be pushed to BitBucket.