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
  • 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

Links

• Solution URL: https://github.com/omerome83/Interactive-Rating-Component
• Live Site URL: https://omerome83.github.io/Interactive-Rating-Component

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid

What I learned

This was a nice challenging project. One of which I hope to tackle again in the future and make some adjustments. Especially the responsive portion. The design of laying out the ratings buttons was figuring out how. I first used unordered lists, but then realized I had to figure out to have a button actually select when "clicked". Then it made more sense to use radio buttons. The second biggest challenge was figuring out which of the buttons was selected.

const selectedButton = document.querySelector("input[name='rating']:checked");
selectedRating.innerHTML = `You selected ${selectedButton.id} out of ${radioButtons.length}`;

This snippet shows which one of the rating buttons is checked and then I could use that value for a span element from the HTML document.

Useful resources

• Stackoverflow - This source gave me exactly what I was looking for in determine which of the radio buttons is checked.

Author

• Website - Romel Williams
• Frontend Mentor - @omerome83