Interactive rating component using basic front end tools

Community feedback

• 

  David•70

  @davidko5Posted almost 2 years ago

  hey, congrats with first challenge. I also finished this one as my first a couple of minutes ago and i also had that problem with centering numbers inside those buttons. So what i did is just added 2px or so of a padding on the top of the div, so that numbers were centered vertically. but then it was too tall to be a circle so i added 1px padding to the left and right side of it and increased border radius. I think this solution isn't the best, but at least it worked for me

  1

  ---

  

  Nicolás Pírez•40

  @NicolasPirezGitPosted almost 2 years ago

  @dakon0 You're right! That should work too. It feels more like a "hack" than anything else but hey, it's our first project after all, we're bound to have lots of mistakes to work on.

  I'm currently working on my 2nd project since I have a personal deadline to meet but I'll be sure to come back to this one eventually for refactoring. I'd recommend you do the same if you have the chance. Maybe you'll find a better way to get that end result.

  0
• 

  Nelson•2,390

  @nelsonleonePosted almost 2 years ago

  HELLO......congrats on completing this challenge🎉🎉🎉 I have some tips based on your last question , Hope they were helpful and made meaning to you

  Firstly, just in case you are working on a bigger project, or refactoring this one , li tags must be contained in ul or ol tags.

  Secondly,you can use css to handle the hover state , than using JS , (Less code)

  You can also use this to toggle the chosen rating . loop over all the buttons, add an eventlistner to all of them, Then when a button is clicked , loop over the buttons again and remove the active state(chosen) Then add the state to the clicked button

  ratingBtns.forEach(button => {
   button.addEventlistner('click',() => {
      ratingButton.forEach(button => button.classList.remove('chosen')
  
     button.classList.add('chosen')
  })
  })
  
  **Hope you understood, have fun coding🎉🎉**
  

  1

  ---

  

  T

  Grace•31,090

  @grace-snowPosted almost 2 years ago

  @nelsonleone @NicolasPirezGit there is only one correct way to do the html markup on this challenge. It must be a form with radio inputs.

  It’s an important lesson to learn to work with form data from a standard html form. You should be listening for submit on the form and then working with that data, not looping over buttons or even inputs and listening for clicks

  Good luck with it

  Marked as helpful

  2

  

  Nelson•2,390

  @nelsonleonePosted almost 2 years ago

  @grace-snow yeah, that was the first thing that got to my mind, that was why i said it , not a bad idea tho

  0

  

  Nicolás Pírez•40

  @NicolasPirezGitPosted almost 2 years ago

  @nelsonleone Thanks for the reply!

  Originally, I created the li tags inside an ol, but then I started having trouble positioning the .rating-list inside the main box. It created some weird extra spacing that I believe belongs to the numbers the ol generates by default for the li. I got frustrated because I couldn't remove it and then changed it to a div instead.

  Regarding your JS solution, that makes a lot more sense looking backwards. I was quick to assume I'd have to use JavaScript for the selection feature instead of researching a little bit more to see if it was possible to implement at least part of it in CSS. I'll keep that in mind before jumping to conclusions next time.

  1

  

  Nicolás Pírez•40

  @NicolasPirezGitPosted almost 2 years ago

  @grace-snow Thanks for the insight!

  I admit I never even thought about using a form. I guess I didn't take the project seriously enough to code it trying to simulate as if I was doing it as my job. I was so excited to complete it I just took the easiest path I could.

  Retrospectively, your comment is on point. I'll definitely try to implement forms more often in future projects, it might even save me quite some time.

  0

  

  Nelson•2,390

  @nelsonleonePosted almost 2 years ago

  @NicolasPirezGit You can set a display flex on the <ul> <ol> Well, am glad you got it done

  0

  

  T

  Grace•31,090

  @grace-snowPosted almost 2 years ago

  @NicolasPirezGit it's more than just for future projects. This is inaccessible atm

  0