Submitted 11 months ago

Responsive page made with vanilla CSS and JS

Amy Spencer• 300

@amyspencerproject

Preview site View code

This is a solution for...

Interactive rating component

HTML
CSS
JS

1newbie

View challenge

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• 1,430

@markuslewin

Posted 11 months 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

Amy Spencer• 300

@amyspencerproject

Posted 11 months ago

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

Please log in to post a comment

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