Skip to content
Submitted over 2 years ago

Interactive Rating Component Main

Karlygash Yakiyayeva•50
@karlakz
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi everyone! According to design, in an active state of the main question card, when hovering over rate numbers, the previous number changes its background color, for example hovering over rate 5 changes the background color of rate 4, How is it possible? Personally, I could handle changes on the following number rate, but not the previous one. Thank you in advance!

Community feedback

  • David•8,000
    @DavidMorgadePosted over 2 years ago

    Hey nice work on the challenge, I think I can have the answer to your question.

    In the design files, they show two states at the same time, the background-color: orange, is for the hovering state, and the background-color: lightgrey is for the clicked status.

    You can archive this just using javascript, adding the lightgrey color to the button in your for loop, or adding a class that has that background style with js too.

    You should remove this code before doing it tho, cause if not it will clash with your selected button:

    .flex-child-1:hover ~ .flex-child-2,
.flex-child-2:hover ~ .flex-child-3,
.flex-child-3:hover ~ .flex-child-4,
.flex-child-4:hover ~ .flex-child-5 {
  background-color: var(--light-grey-color);
  color: var(--white-color);
  opacity: 1;
}

    Hope my answer helps you!

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord