Submitted about 1 month ago

Interactive Rating with basic Javascript , HTML and CSS Flexbox

Dangelo•380

@Dangelobast

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?

Getting a grasp of JavaScript is what I'm most proud of, definitely think I did a good approach in everything so I would say probably find different ways to solve this exercise with JavaScript.

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

Improving my JavaScript code to make it more compact and readable.

Community feedback

Marcos Travaglini•6,210

@BlackpachamamePosted about 1 month ago

Greetings! you have done a great job 😎

I'm leaving you this little suggestion since I see that the star image is not displayed correctly. With these changes you could make it look better:

.img-container {
    width: 2.8rem;
    height: 2.8rem;
    background-color: var(--var--dark-blue);
    margin-top: 1.8rem;
    margin-bottom: 2rem;
    padding: 0.7rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.support-star-icon {
    max-width: 100%;
}

You should remove your img-container class for img-container support-star-icon-center and support-star-icon for support-star-icon support-star-icon-styles. It has no use there:

.support-star-icon-center {
    display: flex;
    justify-content: center;
    margin-top: 1.8rem;
    margin-bottom: 2rem;
}

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