Scribd
Upload
13 views1 page

Assignment 3

Uploaded by

Grace Anyanwu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views1 page

Assignment 3

Uploaded by

Grace Anyanwu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 1

ASSIGNMENT 3: Building an Interactive User Feedback Form with HTML

and JavaScript

Objective: Create a user feedback form on a website that allows users to submit their
opinions and provides interactive responses using JavaScript. This form should incorporate
JavaScript validation, interactive feedback, and the use of loops and conditions to
dynamically handle form responses.

Task Instructions:

1. Create the Feedback Form (HTML and CSS)


Design an HTML form for users to submit their feedback on a service or product. Include
the following fields:
 Name (text input)
 Email (text input)
 Age (number input)
 Rating (radio buttons with options from 1 to 5)
 Favorite Features (checkboxes for options like “Ease of Use,” “Performance,”
“Customer Support,” etc.)
 Comments (textarea for detailed feedback)
 Submit and Reset buttons
2. JavaScript Validation and Interactivity
o Validation: Use JavaScript to check that all required fields (Name, Email, and
Rating) are filled out before submission. Ensure that the Email is formatted correctly.
o Confirmation: After clicking "Submit," prompt a confirmation box asking if they’re
sure they want to submit.
o Dynamic Feedback: If a user selects a high rating (4 or 5), display a thank-you alert
after submission. If the rating is low (1 or 2), display a message asking how the
service can improve.
o Form Reset: Use JavaScript to reset specific fields (e.g., uncheck all checkboxes and
clear the comments) when the "Reset" button is clicked.
3. Advanced Interaction with JavaScript Loops and Conditions
o Display Summary: Use a loop to gather all selected “Favorite Features” and display
them in a popup when the form is submitted.
o Age-Based Feedback: Use a conditional statement to display an additional message
based on the user’s age. For example:
 Under 18: Display a message saying, “Thanks for your feedback, young user!”
 18-50: Display a message saying, “Thanks for your valuable feedback!”
 Over 50: Display a message saying, “Thank you for your seasoned insights!”
4. Code Documentation
o Add comments throughout your JavaScript code explaining the purpose of each
section. This will be helpful for other developers and for future maintenance.

Bonus Challenge:

Enhance your form by using a JavaScript function to calculate and display the average rating
from all submissions. For now, simulate the process by using a list of sample ratings (stored
in an array).

You might also like