Interactive Feedback Card
HTML
CSS
JavaScript
About the project
This project was from Frontend Mentor and I chose it to test my current front end skills. The site provided the desktop and mobile designs but I coded the project from scratch Unfortunately, I didn't have access to the image files used in the design. I modified the design to accomodate for this.
The project is a simple feedback card where the user selects a score. When submitted, the score is displayed in a different card along with a thank you message.
Although not declared in the task, I challenged myself to implement client-side validation to make sure the element could fail securely if user input was not completed.
Update to the project
This project originally started in May 2023. However I didn't have much knowledge in responsive web development. After taking Kevin Powell's Conquering Responsive Layouts course, I updated the project to support both mobile and desktop views. Starting from mobile design first before moving to desktop made it much easier to develop.
I initially added a locked (disabled) button feature. However I learnt that buttons shouldn't be disabled visually because it reduces accessibility. Screen readers would miss reading them entirely. The disabled attribute was removed from the button and an alterative way was used to allow the button to be read but prevent submitting no value.
The image on the left is the non-responsive version of the project. The image on the right is the updated version.
Unique features
Client-side validation was implemented by checking if a value has been selected by the user. If the user clicks the submit button without selecting a value first, then a message is displayed. When the user finally chooses a value (before submitting), the message is removed.
To prevent submitting no value, the user can't click the value again to unhighlight their selection. If they want to change their decision, the user can select a new value. The previous selection is no longer active and the new selection will become active. By doing this, one value will definitely remain selected.
Problems and Challenges
The hardest parts of the project was implementing divider switching instead of creating two different webpages. I hadn't come across divider switching before. The previous version of the project used inline styling and CSS to switch the cards. However in this version, one-line JavaScript functions were used. The display property was used as it stops chosen elements from being rendered to screen. Stack Overflow was used to find the solution.
What the project taught me
The project taught me that starting with mobile design first and transitioning to larger screens is much easier when developing projects.
I learnt how JavaScript event listeners can be used so only one value can be selected though the uses of adding and removing classes (changing which elements were active).
As mentioned, I learned how to switch dividers by creating one-line JavaScript functions and using the display property. This was in comparision to using inline CSS.