Frontend Mentor - Interactive rating component solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

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.

The challenge

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

Screenshot

Links

• Solution URL: (https://github.com/martinorue/interactive-rating-component-main.git)
• Live Site URL: (https://martinorue.github.io/interactive-rating-component-main)

My process

I started by researching existing rating components and studying their design and functionality. I then began prototyping different designs and experimenting with different interactions.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• HTML, CSS & JS
• BEM naming convention

What I learned

• 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

Continued development

I plan to continue developing the component by adding more animations.

Author

• Frontend Mentor - @yourusername