Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive rating component

@ashkanmus

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I want to begin by thanking you for this quality website and content. I am new to front-end dev, and this challenge helped me learn a lot. I found the JavaScript part a bit challenging and looking forward to improving by learning to validate ratings in case of a non-selected rating submission. So my question is, how would you advise me to approach this validation feature?

Community feedback

Elaine 11,400

@elaineleung

Posted

Hi Ash, about the validation (I'm guessing you mean checking whether a number is clicked), one of the ways to do this is to use a simple conditional, like this:

// this is the variable with the selected number
let selected;

form.addEventListener("submit", (event) => {
 
   if (selected) {
       // display thank you card 
   }
})

You can also use not undefined:

form.addEventListener("submit", (event) => {
 
   if (selected !== undefined) {
       // display thank you card 
   }
})

Here's a CodePen for this challenge that you can check out in action: https://codepen.io/elaineleung/pen/poLZrqK

Hope this helps a bit!

Marked as helpful

0

@ashkanmus

Posted

Hi @elaineleung, thanks for taking the time to check my work; I appreciate your kind help!

1
Elaine 11,400

@elaineleung

Posted

@ashkanmus Glad to help, Ash 😊

By the way, I forgot to wish you a warm welcome to the Frontend Mentor community, and well done completing your first challenge here. Looking forward to more!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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