CSS flex

Community feedback

• 

  Chris•180

  @chrizgxPosted almost 2 years ago

  Hello dear friend developer. Your design is great, so I'll give you some advice to make it even greater.

  1. It seems like the rating buttons div has less width than the submit button. That is happening due to the margin you added to .ratingBtn class. To fix that, you have to replace:

  .ratingBtn { margin: 10px;} which applies 10px margin on EVERY side (top-right-bottom-left) with .ratingBtn { margin: 10px 0px; } which applies 10px margin ONLY on top-bottom, and 0px margin on left-right.

  Then, you'll have to change the #ratingBtnDiv from { justify-content: space-around ; } to { justify-content: space-between; } in order for the buttons to be equally positioned throughout the whole width available, without applying padding on the left and right side.

  2. About javascript, it is considered a best practice to edit style by adding and removing classes from elements. As I can read, you switch colors by adding style directly on the html file which can make things more complicated. What you can do instead is to add a .ratingBtnSelected class with all the rules that an active button should have. Then all you have to do with javascript is to add the class to the selected button and remove the class from unselected buttons. You can see my code as an example in my github repo (https://github.com/chrizgx/interactive-rating-component-main/blob/master/main.js) inside the 'rating' function.

  3. Personally, I don't know whether using <select> or <option> is better in terms of best practices. I have read that buttons are mainly used for submitting forms, but I think I am missing the whole context.

  I hope you'll find my feedback useful. Happy coding and have fun exploring. Feel free to ask anything, I'll be happy to help!

  Marked as helpful

  0

  ---

  

  Hsienz•550

  @HsienzPosted almost 2 years ago

  @chrizgx Thanks you for you feedback!! I update my code after looking your advice and your github.

  It was not <select> and <option> tag. It was <input type="radio">, like

  <input type="radio" value="1" name="rating">1</input>

  <input type="radio" value="2" name="rating">2</input>

  ...

  Sorry for misleading you.

  And I notice you use onclick on <button> in html rather than event listener in JS.

  I know event listener can attach multiple event on one element while onclick can only attach one.

  I want to ask which method is used on <button> more often. Again thank you for your feedback

  0