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

@khalilnazari

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


Dear community members,

This is the second challenge. I have developed the interactive rating component. Please review the code in the repository and provide possible feedback on my code structure and readability.

Thanks & regards,

Khalil

Community feedback

Darko 980

@dtomicic

Posted

Congrats on finishing your second project.

I've taken a look at your project and everything looks good except a few things with your JS.

First you should avoid changing the style the way you did with element.style.display = "none", instead what you should do is make a class in CSS (for example class show) and then you toggle that class to an element through JS like this:

CSS

.element {
   display: none;
}

.show {
   display: flex;
}

JS

element.classList.toggle("show");

So now when you click the submit button your element will go from display:none; to display:flex; and if you click the submit button again (which isn't possible in this design but I'm telling you for future reference) the element would have an attribute display:none; so basically you're toggling between two states. You can read more about it in depth here

Also another thing I've found is that no matter what rating you pick in the end screen it always show you picked out 5/5 since you've hardcoded that part, what I would suggest is make on submit check which button was selected (was it the one with the rating 1, rating 2 etc.) and then depending on that set the rating on the end screen (you can do that with innerHtml and some if/else statement).

And the last thing I would recommend is to seperate your JS from your HTML meaning you should write JS in it's own file no matter how little of JS code you have.

Once again congrats and keep on learning 👍

Marked as helpful

0

@khalilnazari

Posted

Hi @dtomicic , thanks for the quick feedback on this. I have updated my code as per your feedback. For the first time, I missed doing that because I didn't get the requirements correctly :-|

regards,

Khalil

0

@azimifardous

Posted

One thing that I've noticed is the rating numbers are actually don't work when you submit. It doesn't matter which number/rate you select it shows the 5 out of 5. If you wanna solve that you can check my solution.

0

@khalilnazari

Posted

@azimifardous, thanks for your offer. However, I have already fixed that.

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