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

html css javascript

saskue7 170

@saskue7

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


Main difficulties are the script part how you connect all the dots is the main idea here.

Community feedback

Remtaine 360

@remtaine

Posted

Hi saskue7! Great effort on this challenge! Regarding the script, I checked out your JavaScript file and here are some of my comments:

  1. Use better variable names and types. For example, your variable "flag" could have a more understandable name like "hasSelectedButton" and would work better as a boolean (ie. true, false) rather than an integer (ie. 1, 0).

  2. Also, instead of having a boolean for that, a better solution would be if you just had a variable store the current active button and check if it has one when clicking another rating button or the Submit button. That way:

a. For the first time selecting a rating, change active button and toggle the "showbutton" class on it

b. If changing the rating, toggle class of current active button, change value of active button, then toggle that as well

c. If deselecting the current active rating, toggle class of current active button, change value of active button to null

d. When clicking submit, you can check if active button isn't null. If so, nothing happens. If it does have a value, get the value of the active rating button and output it.

Regarding the design: maybe you changed the font and color on purpose, but for future challenges I suggest you follow what's listed in the style guide. That way, it'll be easier to comment on differences.

Overall it's a nice effort, and I'm sure you'll do even better in future challenges!

Marked as helpful

0

saskue7 170

@saskue7

Posted

@remtaine thanks for your great feedback and I'll ensure that next time it will be much smoother.

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