Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Rating Component Card w/ SCSS and JS -transform on submit

#sass/scss
Andy 520

@AndyAshley

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


How did you all go about doing the cards background colors? No matter what I tried I couldn't make it match the design image with the colors they gave.

Community feedback

CyrusKabir 1,885

@CyrusKabir

Posted

Hello my dear friend ♥ everything is good but only problem here is accessibility issue with keyboard, I mean If I do not have a mouse, I can not work with your component

Marked as helpful

0

@solvedbiscuit71

Posted

Hi Andy, I used radial-gradient() for the background which looks close to the design

.card {
    background-image: radial-gradient(circle at top,hsl(210, 19%, 18%) 0%,hsl(215, 23%, 14%) 50%, hsl(215, 27%, 12%) 100%);
}

Check: https://www.frontendmentor.io/solutions/interactive-rating-component-with-vanilla-js-sass-3UZIEGY9H

Hopefully, that solves your query.

Marked as helpful

0

Andy 520

@AndyAshley

Posted

@solvedbiscuit71 Man, I didn't even think of that haha! Thanks for the tip!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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