https://github.com/lana-20/feedback-ui-design
https://github.com/lana-20/feedback-ui-design
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/lana-20/feedback-ui-design
- Owner: lana-20
- Created: 2021-08-15T23:59:33.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-08-16T00:07:03.000Z (about 4 years ago)
- Last Synced: 2024-12-30T09:47:49.131Z (9 months ago)
- Language: CSS
- Size: 2.93 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
| [Feedback UI Design](https://github.com/lana-20/50Projects50Days/tree/main/FeedbackUIDesign) | [Live Demo](https://lana-20.github.io/feedback-ui-design/) |
|----|----|
In this project, I am building a survey or feedback UI design.
I have a panel saying "How satisfied are you with our customer support performance?".
I have three choices of smiley faces with Unhappy, Neutral, Satisfied.
You can click on one, it highlights it with a box, basically changing the class to active.
You can submit the feedback by clicking "Send Review".
And it shows a thank you message with whatever you chose for the feedback, i.e. Satisfied.
And it says "We'll use your feedback to improve our customer performance".
In JavaScript, instead of just looping through the ratings boxes and adding an event listener
on each one, I am taking advantage of event bubbling and adding an event listener to one of
the parent nodes and then target the specific rating node.
I am looking at some different properties for dealing with the DOM,
moving to different elements, and of course the CSS to create this interface.