Background material
For this lab, you'll be working with forms and various event listeners.
As an example, consider the following form:
<form id="my-form">
<input type="text" name="data">
<input type="hidden" name="hidden-data" value="here I am">
...
</form>
You can retrieve and set values for this field as follows:
let form = document.querySelector('#my-form');
// prints the text field's value:
console.log(form.data.value);
// sets the hidden-data's value:
form['hidden-data'].value = 42;
You'll also need to add some event listeners to various elements. We're also
going to make use of an HTML feature that lets you specify your own cutoms attributes.
Consider the following element:
<p id="para" data-custom="something">Lorum ipsem</p>
The data-custom isn't a real HTML attribute. Rather, any attribute
that begins with data- is defined by the specific application. You
can access the value of this attribute when the paragraph is clicked as follows:
let p = document.querySelector('#para');
p.addEventListener('click', ev => {
console.log(ev.target.attributes['data-custom']);
});
Lastly, this lab involves using a lightweight version of modals based on
Bootstrap's implementation. You can show or hide the modal by adding or removing
the show class to the modal's classList.
Requirements
Step 1: Update the card preview
The createcard.js file contains stub code for a few functions.
Start with updateField. When one of the text fields in the form
shown changes, this function will be called to update the corresponding field
in the preview area. For instance, updating the form's host field
will update the preview-host field.
Next, add event listeners to each of the fields within the preview-form.
The text fields will use a keyup event while the date field will
use a change event. When these events occur, call updateField
with the field name as an argument.
Now, add an event listener to the reset-btn to call
defaultPreview when clicked. This function should restore the
original values in the preview-form as defined in the HTML file.
Step 2: Update the guest name
The HTML page includes a list of guests that have been invited. When one
of these list item's is clicked, call previewCard to update the
name in the preview. For each of the list items' click event listener, use
the event target's id to find the user from the userList array.
Step 3: Using the modal
Each of the invited guest list items has an Edit button.
When this button is clicked, launch the modal by adding the show
class to its classList.
Once the modal is shown, create the two text fields and one hidden field
in the form. Add the <div> for invalid feedback below the
short-name input. Also create a submit button with no ID.
Now complete the edit button event listener to update the modal form based
on the user whose button was clicked. Specifically, the button contains a
data-user attribute with the guest's name. Use this to find
the user in the userList array. Update the modal's form so that
the current fullName and shortName are put into
the text boxes. Also store the shortName in the form's hidden field.
Be sure to use stopPropagation to prevent the click event from also
firing for the list item.
When the button is clicked or the user presses enter, get the information from
the modal's form and update the user in the userList. Then hide
the modal.
Going further
Currently, updating the user's name doesn't update their name in the
invitation list. Extend the form submit event listener to update
this value.
There's also a button to add a user to the invitation list. Add an event
listener to this button to bring up the modal. Once the save-user
button is clicked, add this person to the userList array and
add a new item to the invitation list.
