LD09: Intro to DOM Manipulation due Thu 02 Nov 13:20
Preparation for Lab Day
In preparation for lab day, do these actions:
- In your webspace create a directory named hw09 and copy
https://josephus.hsutx.edu/classes/w1/source/dom_manipulation/manip6.html
into it. Verify that the document works as expected.
- Let's turn our attention to the bottom section of the document that contains
two side-by-side panels, a text box, a check box and two button. The panels
are found in the code in a section with an id of “panels” and the form
elements are in a nav element. Find those sections in the code.
- Create an event handler that will add whatever text is entered in the text box
to the bottom of the left panel when the “Add Text to Left Panel” button
is clicked. If you are having trouble getting started you should review
the progression of documents (manip1.html, manip2.html, etc.) taking care
to read and understand the comments and code.
- Once you have it working, commit your work and push it to bitbucket.
On Lab Day
- Begin by showing the instructor your pre-lab work.
- You will continue to practice working with event handlers in the
manip6.html document you worked with in the prelab assignment. Start
by adding functionality from the checkbox. If the checkbox is checked
and the user clicks the “Add Left” button then the text in the box
should be added to the left panel but the text should be enclosed in
an editable text box.
- Once you get the code working for the left panel, duplicate it
for the right panel making careful note of changes that were necessary
to make it work.
- Now try to combine the code that handles the left and right buttons
so that they work as a single function. Use the concept of event
propagation to listen for a click on the nav element and then make
sure that one of the buttons was clicked. Try to make the code as
short as you can by eliminating multiple lines that match each other
except for a small difference.
- Once you have both buttons being handled efficiently in a single
handler you are ready to commit and push your work.
- Show your work to the instructor. If you finish early you can start work on the homework assignment.