Skip to content
Submitted over 1 year ago

Responsive page made with vanilla CSS and JS

Amy Spencer•300
@amyspencerproject
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

During this challenge, I learned so much about forms, radio buttons, accessibility, and customizing CSS.

I am not sure how to create the dark gradient background used for the form. I know how to make a linear-gradient but I am unsure of the colors to use. I have the Figma file and it shows a radial background with the same color for the gradient points.

The "hide" class with a display:none will not override the display:flex for the form after a user successfully submits a rating. Not sure if I should write everything in JSX and not use the trick of removing the "hide" class.

I could still do a bit more customizing on the :focus-visibility as it still has the primary blue color showing through.

I appreciate any and all feedback. Let me know what you think.

Community feedback

  • markus•2,160
    @markuslewinPosted over 1 year ago

    I managed find the color by clicking on the color name, "edit style", then the square that shows the color preview. I was 3 dialogs deep at that point, but it's there! It might be easier to find in the new dev mode.

    .hide {
display: none;
}

.thankyou-wrapper {
display: flex;
}

    .hide and .thankyou-wrapper both have the same specificity, so the order of the rules determines which declaration will be used. In this case, display: flex overrides display: none. It should work as expected if you move .hide below .thankyou-wrapper!

    Marked as helpful
    1
    Amy Spencer•300
    @amyspencerprojectPosted over 1 year ago

    @markuslewin Thank you so much! Found the colors in Figma and moved the .hide. Really appreciate your review!!

    1

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