In this assignment you will:
- begin writing a list-making application.
- continue practice with DOM manipulations using Javascript.
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/
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 (Copilot is one example).
- 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 you will begin creating a simple list-making web application.
We will continue to add features to this application as we move through the
semester. The basic idea is that a user will be able to create a list, mark
items off the list, etc.
IMPORTANT: Make sure you have completed all steps from the lab day exercise before
starting on this assignment.
In your hw09 directory you should see shoppinglist.html and
normalize.min.css.
Take time to look at the HTML code provided. Notice there are two side-by-side
panels. The left panel holds a text box and an Add button and the right panel
has an empty unordered list (ul). When the Add button is clicked we want the
contents of the text box to be added to the ul as a list-item.
By the end of the assignment your list should allow adding of editable items to
the list and each item should have its own `X' button that will work as a toggle
to mark out the item if it has been completed (or unmark it if clicked again).
You will also provide buttons for deleting/marking/unmarking all items.
IMPORTANT: Remember, the goal is for you to practice/learn these concepts. Only
use the resources specifically allowed!
Here is a suggested set of steps:
- Take a look at the image showing what this working assignment should look like:
https://josephus.sergeantservices.com/classes/w1/source/hw09screen.png.
- Create a new document called shoppinglist.js and link to it right after
the close body tag near the bottom of your HTML document.
- Write code so that when the Add button is clicked the contents of the text box
will be placed at the bottom of the list in the right panel.
- Modify the code so that when the element is added to the list the text box
is automatically cleared to make way for the next list item.
- Modify the code you just wrote so that the text placed in the list is embedded
in a text box so it can be edited. NOTE: The styling provided in the document
makes a text box blend in with the background so you won't see the box unless
you have clicked in it.
- Modify the code further so that in addition to putting the text box in the
list we put beside the text box a button labeled with an X.
- Add a single event handler that will react when an X button is clicked. We
want this action to apply to all the X buttons so this is a good place to
take advantage of event propagation. Initially, just write something to the
console log when a button is clicked. NOTE: Clicking in text boxes should not
cause a write to the console log.
- When an X button is clicked we want the text box to display its text
with a line through it. (HINT: Set the text box's text-decoration property
to 'line-through'). Something else that will help is that you can reach
a previous element in the DOM using the .previousElementSibling property.
In this case, the user clicks on an X button and we need to work with
the X button's previousElementSibling (i.e., the text box right in front
of it).
- Now modify the behavior of the X button so it acts as a toggle. If the
button is clicked on and the text box beside has a line through it then
remove the line (i.e., set text-decoration to none). Otherwise, put a line
through it.
- In the left panel create a button called “Delete List” that will
delete all items in the list when clicked on.
- Add two more buttons (called “Mark All” and “Unmark All”) and write
handlers for them that will strike through all list items and unstrike
them, respectively.
Your final solution should be placed in your hw09 directory in your webspace
and should be committed and pushed to GitHub.
