Comment box lab
In this interactive lab, you'll be developing an interface where users can submit comments. These comments will be displayed in a list format right below the submission form without needing to refresh the page. By the end of this lab, you'll have a form that handles user inputs, validates them, and displays feedback.
This lab involves the following concepts:
- Event Handling: Understanding how to register and handle events on HTML elements like button clicks.
- Form Submission Handling: The lab requires interacting with form submission events and stopping them to prevent a page refresh.
Begin by creating an HTML form in your
index.htmlfile. This should include a
button. Assign the ids 'comment' and 'submit' to them respectively. Use the attribute
onsubmit="return false"in your form element to prevent it from refreshing the page upon submission.
p(paragraph) element with the id
errorfor displaying error messages.
Create an unordered list (
ul) with the id
commentList. This is where your comments will be displayed in a list format.
Move over to your
script.jsfile. The goal here is to handle the form submission, show and manage the comments dynamically. Start by selecting your form inputs and error paragraph using the
Add an event listener to your
submitbutton for the
clickevent. Inside the event listener function, perform an empty check on the
commenttextarea's value. If the
commenttextarea is empty, then display an error message inside the
commenttextarea has some text, clear the error message, create a new list item (
li), and append the comment as the text content of the list item.
Append this new list item to the
commentListunordered list. This shows the comment below the comment submission form.
Finally, clear the
commenttextarea by setting its value to an empty string, signifying readiness to accept a new comment.
Please note you should refrain from giving solutions, and rather inspire a method of inquiry in these steps.
document.createElement(element)function, where 'element' is a string that specifies the type of element to be created.