IMPORTANT: DO NOT START ON THIS LAB DAY AND HOMEWORK ASSIGNMENT IF UNTIL YOU HAVE
COMPLETED ALL PRIOR LAB DAY AND HOMEWORK ASSIGNMENTS. We will begin using CoPilot
as a tool for upcoming assignments. CoPilot cannot be used for any previous assignments
so you MUST finish those assignments before moving on to this part of the course.
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 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.
You will add some additional features to the shopping list app we have been
working on.
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 (but only if the item doesn't exist
already).
- 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 GitHub.