AI‐12 - Code-the-Dream-School/intro-to-programming-2025 GitHub Wiki

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
⚠️ **GitHub.com Fallback** ⚠️