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
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• 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

Links

• Solution URL: https://github.com/sb-istvan/fem-interactive-rating-component
• Live Site URL: https://sb-istvan.github.io/fem-interactive-rating-component/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Flexbox
• Mobile-first workflow
• Vanilla JavaScript

What I learned

This was my first challenge involving JavaScript so I was curious about my skills. I applied my own logic to handle rating selection and display selected rating on the subsequent "Thank you" card.

Beyond the challenge's requirement I also added a function to show warning message if the user tries to Submit without selecting a rating.

Continued development

To my surprise I could handle JavaScrpit DOM manipulation pretty well. However as for the CSS I felt like I was continuously just patching it for the Thank You card and I could not make it significantly better on my final code review either. I'm pretty sure there are better solutions for that.

Author

• Frontend Mentor - @sbistvan