This is a solution to the Interactive rating component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
This project is a card rating component that allows users to rate a support request based on their experience. The component is built using HTML, CSS, and Vanilla JavaScript.
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Select and submit a number rating
- See the "Thank you" card state after submitting a rating
- Solution URL: (https://github.com/martinorue/interactive-rating-component-main.git)
- Live Site URL: (https://martinorue.github.io/interactive-rating-component-main)
I started by researching existing rating components and studying their design and functionality. I then began prototyping different designs and experimenting with different interactions.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- HTML, CSS & JS
- BEM naming convention
- How to interact with the DOM using JS to add and remove pseudo-classes
- How to know if an HTML element has a particular class
- How to add CSS classes using JS
- How to exclude an element from receiving hover when it is active
- The use of pointer-events: none
- The use of basic animations
- The use of ::before pseudo-element
- How to disabled default styles of radio-buttons
I plan to continue developing the component by adding more animations.
- Frontend Mentor - @yourusername