THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

How to Create a User Feedback Form Using HTML, CSS, and JavaScript


The HTML Code explained Step by step

HTML boilerplate: The first few lines of code include the HTML5 doctype declaration and the opening and closing tags for the HTML element. The lang attribute is set to "en" to indicate that the document is in English.


Head section: The head section contains the meta charset tag, which specifies the character encoding of the document. The title element sets the title of the page that appears in the browser tab. The link element is used to link the CSS file to the HTML document.


Body section: The body section contains the main content of the page. A section element with a class of "feedback-section" is used to contain the user feedback form.


Heading: The h2 element is used to display the main heading for the user feedback form, "How satisfied are you with our services?". The br element is used to create a line break between the two lines of text.


Rating section: The div element with a class of "rating" contains three child div elements with classes of "unhappy", "happy", and "satisfied". Each child div contains an emoji representing a different level of satisfaction, as well as a heading that describes the satisfaction level.


Feedback button: The div element with a class of "feedback-btn" contains a button element with an ID of "btn" and a type attribute of "button". The text displayed on the button is "Send Review".


JavaScript: The script tag includes a link to an external JavaScript file called "index.js". This file likely contains the JavaScript code necessary to handle user interactions with the form, such as sending the feedback data to a server.


Here's a step-by-step explanation of the JavaScript code:


Selecting elements from the DOM: The code begins by selecting several elements from the HTML document using the querySelector and querySelectorAll methods. Specifically, it selects the div element with a class of "rating", all of the child div elements with a class of "child", the section element with a class of "feedback-section", and the button element with an ID of "btn". It also declares a variable called "icon", which will be used to store the user's selected satisfaction level.


Adding an event listener to the rating section: The code adds an event listener to the rating section using the addEventListener method. Specifically, it listens for a "click" event on the rating section and runs a callback function when the event occurs.


Updating the user's satisfaction level selection: When a user clicks on one of the satisfaction level icons, the callback function uses the parentNode property to identify the parent div element that contains both the icon and its accompanying heading. It then iterates through all of the child div elements and removes the "active" class from their class lists. Finally, it adds the "active" class to the div element that contains the selected satisfaction level icon and heading.


Adding an event listener to the feedback button: The code adds another event listener, this time to the feedback button. When the user clicks the button, the callback function logs the "icon" variable to the console to confirm that the user's satisfaction level selection has been stored correctly.


Getting the user's feedback data: The callback function then declares two new variables, "user_feedback" and "user_feedback_icon", which will be used to store the text of the user's feedback and the icon they selected, respectively. It checks whether the "icon" variable is undefined (i.e., whether the user has selected a satisfaction level yet) and sets the "user_feedback" variable to an empty string if so. Otherwise, it sets "user_feedback" to the text content of the heading within the selected satisfaction level div element and sets "user_feedback_icon" to the text content of the icon within that div element.


Updating the feedback section with the user's response: If the "user_feedback" variable is not an empty string, the callback function uses the innerHTML property to replace the contents of the "feedback_section" div element with a new div element that displays the user's feedback data. This new div element contains the selected satisfaction level icon, the user's feedback text, a message thanking the user for their response, and a link to return to the original feedback form.


Get the Source Code Here: https://github.com/thapatechnical/userFeedback