mbdelarosa / interactive-rating-component

Solution for the Interactive Rating Component challenge on Frontend Mentor

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
  • Useful resources
• Author
• Acknowledgments

Overview

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: GitHub
• Live Site URL: Interactive Rating Component

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Javascript

What I learned

• Use fieldset to group the radio buttons together
• How to style radio buttons with CSS
  • Use of appearance: none instead of display: none to hide the native radio buttons
• I was also able to reuse my learnings from the Intro Component with Signup Form challenge here, especially with using aria-describedby and aria-live properties for the error message and Thank-You display

Continued development

Looking forward to challenges where forms also have custom styling

Useful resources

• Pure CSS Custom Styled Radio Buttons by Stephanie Eckles - This really helped explain how to style radio buttons using CSS without breaking accessibility

Author

• Frontend Mentor - @mbdelarosa

Acknowledgments

These threads from the Discord server were a big help as I was faced with similar issues and questions:

• Radio Buttons - Style on input or label
• Responsive interactive rating component using HTML, CSS and JavaScript