Frontend Mentor - Interactive rating component solution

This is a solution to the Interactive rating component challenge on Frontend Mentor.

I only used the design images for reference, I didn't have access to the figma/sketch/xd files.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Live Demo
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

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

Screenshots

More screenshots can be found in screenshots/

Live demo

Link demo URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• BEM naming convention
• Vue.js framework

What I learned

• Performant color animations using opacity and pseudo elements
• Centering using display: grid; and place-items: center;
• Styling radio inputs
• Frontend Mentor worflow and GitHub pages
• Vue form input binding with v-model

Continued development

• Rating buttons might be a good candidate for their own component.
• Mobile-first design - adding complexity for desktop rather than removing it for mobile

Useful resources

• Create more peformant color animations using the CSS opacity property - More performance background-color animations using ::after and opacity.
• Kevin Powell on YouTube - Various tips, tricks and guides.
• Andy Bell's Modern CSS Reset - Used some snippets

Author

• Frontend Mentor - @MangoMarcus
• GitHub - @MangoMarcus