ratingCard

Community feedback

• 

  P

  Eli Silk•640

  @elisilkPosted about 1 month ago

  Hi 👋 @naveen-developer,

  Congrats on a great solution. 👏 I love the way you implemented it all so simply in one file. It's super concise and lean. Nice job!

  If you are up for diving in just a little further 🤿, I'd suggest a few things:

  1. Take a look at radial-gradient() as an alternative to linear-gradient for the background on your main ratingCard containers. Using the radial gradient with a circle centered near the top will help make it seem like the light is coming from a more central source rather than from the top right corner. I would also suggest increasing the lightness of your finishing color just a bit (e.g., 12% or more), so that the bottom part of the container is better distinguished from the background. For example, this could be one alternative to try out:

  .ratingCard {
      background: radial-gradient(circle at top, hsl(213, 19%, 18%), hsl(216, 12%, 12%));
  }
  

  2. In the design, it looks to me like each of the rating numbers should have an orange background if they are in the hover state (not white). When selected, then it's white, like you have it, but when the mouse hovers over any of them, I think you should turn the background color to orange.

  3. Finally, if you are up for a bit more, I'd suggest thinking about switching over the rating numbers from an unordered list to <input type="radio"> elements. The radio buttons are definitely harder to style well, which is a disadvantage. On the other hand, they come with built-in advantages of being semantically more aligned with what I think the design calls for (see First Rule of ARIA Use), which is to choose one value from a set of values. And along with that, they come with built-in interactivity features that make for a more accessible solution. So for example, someone can use the keyboard to access the ratings and select their choice. Again, the styling is not that straightforward, but it is possible if you are willing to explore a bit.

  Anyway, just some ideas to consider if you are thinking about improving on this solution. 🤔

  Happy coding. 💻

  Eli

  0