Submitted 29 days ago

interactive rating component Using HTML, CSS and JavaScript

SEBAANA YUSUF SALIM•140

@salehjoseph

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?

Here are some code snippets I'm proud of:

How did we do?

.rating button:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(216, 12%, 8%);
}

submitButton.addEventListener('click', () =&gt; {
  if (selectedValue &gt; 0) {
    selectedRating.textContent = selectedValue;
    ratingState.style.display = 'none';
    thankYouState.style.display = 'block';
  } else {
    errorMessage.style.display = 'block';
  }
});

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

Bringing out the exact design without a Figma file was hard, I just tried to do what I could though I believe the results ain't bad

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

Still having a problem with how event Listeners work in the DOM

Community feedback

P
Karol•2,460
@VillageR88Posted 29 days ago
Your implementation works well for a mockup, and the interactive behavior is clear. However, it doesn't fully align with real-world development practices.

Form Structure: In real applications, the submit button should be nested inside a <form> element. This approach ensures proper submission behavior, follows standard web patterns, and improves accessibility.

Server Communication: Instead of only toggling frontend states, you could set up the form element's action attribute to submit the feedback to endpoint. This makes the functionality closer to real-world form handling.
0

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