AI‐12

On the index.html file:

1. Above the <footer> element, add an empty <section> element that contains: A <h2> header that says Leave a Message.
2. After the previous h2 element, create an HTML <form> element with a name attribute that equals leave_message. Inside this form element:
   • Add an <input> element with attributes: type set to text, name set to usersName, and required set to true.
   • Add an <input> element with attributes: type set to email, name set to usersEmail, and required set to true.
   • Add a <textarea> element with attributes: name set to usersMessage, and required set to true.
   • Each of the previous form field should also have a corresponding <label> element.
   • As a stretch goal (optional): Use <br> elements to stack the form fields
   • Add a <button> element with attributes: type set to submit. This button should have a Submit text.
3. After the previous Leave a Message section, create a new <section> element that contains: A <h2> header that says Messages. The section should have an id attribute equal to "Messages". After the heading, add an empty unordered list <ul> element
4. Add a link in your <nav> section that takes the user to the 'Leave a Message' section when clicked.

On the index.css file:

1. Style your leave a message form fields and buttons keeping in mind: adequate specing and appropriate sizing.
2. Remember appropriate sizing in media queries too for the Leave a Message form fields and buttons.

On the index.js file:

1. On the bottom of your file, create a variable named messageForm that uses DOM Selection to select the "leave_message" form by name attribute.
2. Add an event listener to the messageForm element that handles the submit event.
3. Inside the callback function:
   • Add a new line to prevent the default refreshing behavior of the "submit" event.
   • Create three new variables (one for each of the three form fields) and retrieve the value from the event.
   • Add a console.log statement to log the three variables you created in the previous step.
   • Add a new line of code to clear the form.
   • Create a variable named messageSection and use DOM Selection to select the messages section by id.
   • Create a variable named messageList and use DOM Selection to query the messageSection (instead of the entire document) to find the <ul> element.
   • Create a variable named newMessage that makes a new list item <li> element.
   • Set the inner HTML of your newMessage element with the following information: An <a> element that displays the usersName and is a clickable link to the usersEmail (hint: use the mailto: prefix). A <span> element that displays the usersMessage.
   • Create a variable named removeButton that makes a new <button> element: This button should have an inner text set to remove, a type attribute set to button.
   • Add an event listener to the removeButton button that handles the click event.
   • Inside the removeButton callback function: Create a variable named entry that finds the button's parent element using DOM Traversal and remove the entry element from the DOM.
   • Append the removeButton to the newMessage element.
   • Append the newMessage to the messageList element
4. As a stretch goal (optional):
   • Hide the Messages section, including the Messages header, when the list is empty.
   • Create an edit button for each message entry that allows the user to input a new/modified message