Challenge: Events and Event Listeners

Task

You're building a form where users can submit their details. Your goal is to validate user input, provide real-time feedback as they type, and prevent form submission if the input is invalid.

1. Real-Time Input Feedback:
   • Listen for changes as the user types;
   • Inside the event handler, check the length of the input value;
   • If it's less than 3 characters, set the content of the <p> with ID feedback to "Name is too short.";
   • If it's 3 characters or more, set feedback to "Name looks good!".
2. Prevent Default Form Submission:
   • Listen for form submissions;
   • Stop the form from the default submitting behavior;
   • Check the input value;
   • If it's less than 3 characters, display "Please enter a longer name" in the <p> with ID form-message;
   • If it's 3 characters or more, display "Form submitted successfully!" in form-message.

• Use the input event to listen for changes as the user types;
• Use event.target.value.length < 3 to check the length of the input value;
• Use the submit event to listen for form submissions;
• Use event.preventDefault() to stop the form from the default submitting behavior;
• Use nameInput.value.length < 3 to check the input value.