Submitted 4 months ago

Interactive Card Component

RhysT97•120

@RhysT97

Preview site View code

This is a solution for...Interactive rating component

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Actually finishing the project and getting more comfortable with CSS.

Not sure what else I'd do differently except maybe use this project as practice for any CSS frameworks I intend to learn.

What challenges did you encounter, and how did you overcome them?

Centering the styling of the buttons and retrieving the values of the buttons. This was an project that I had started before but never finished(until now) and I had actually set the innerHTML in Javascript for the button text which I had to remove.

What specific areas of your project would you like help with?

Button text centering on Chrome and Firefox seem to be slightly different, if there's any way to improve the centering the text of the buttons that would be much appreciated

Community feedback

Danae Lescano•270
@Lescano713Posted 3 months ago
I like how you used the linear-gradient property; it looks better than the original design. Overall, your code looks great, but here are a few suggestions for improvement:

Try using more semantic tags like main and section.Consider replacing the iteration with a forEach loop.

To align the button, you could use align-items on the div.container, or alternatively, use align-self on the button. This will keep the alignment of the other elements to the left.

I noticed that when you select an option, the background color doesn’t remain orange.

To fix this, you can use the :checked selector or handle it in JavaScript by adding a class to the selected button and another class to the unselected ones.

To minimize the code inside the submit() function, you can wrap the message in a separate function and call it from submit().

Another way to use querySelector is with querySelectorAll('button[type="submit"]'), which will select the button based on its type.
Marked as helpful
1

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