Design comparison
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
- @dtomicicPosted over 2 years ago
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;
todisplay: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 attributedisplay:none;
so basically you're toggling between two states. You can read more about it in depth hereAlso 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 helpful0@khalilnazariPosted over 2 years agoHi @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 - @azimifardousPosted over 2 years ago
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@khalilnazariPosted over 2 years ago@azimifardous, thanks for your offer. However, I have already fixed that.
0
Please log in to post a comment
Log in with GitHubJoin 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