Frontend Mentor | Interactive rating component using basic front end tools coding challenge solution

Solution retrospective

Hi everyone! I'm really happy to be joining this awesome community.

This is the first project I've ever completed in a very long time, and as such, I have lots of questions. I'll try to prioritize the ones that are bothering me the most.

The technologies I used:

- HTML5

- CSS3

- JavaScript

My questions:

I struggled for quite a while with Flexbox and element positioning. While I was able to get everything mostly right, I felt unsatisfied with the way the numbers inside the rating options were positioned. They seem to be slightly off-centered. I tried fixing it with line-height and padding, but nothing really worked and gave up in the end. Any suggestions as to what might be causing this issue and how to fix it? CSS Code
While using JavaScript to add the required features, I got stuck implementing the rating selection. I managed to solve that problem and then every other feature after it didn't take half as long to develop, but still, I keep looking at it and it seems like A LOT of code for something relatively simple. I guess my question is, is there any way I could have created that feature using less lines of code? JS Code

I appreciate those of you kind enough to help me. I know this is just a rookie project but I still feel quite proud of what I have accomplished. Any feedback regarding best practices or other mistakes that I overlooked is also welcome.

Community feedback

David• 70

@davidko5

Posted over 1 year 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

Nicolás Pírez• 40

@NicolasPirezGit

Posted over 1 year 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.

Nelson• 2,390

@nelsonleone

Posted over 1 year 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🎉🎉**

Grace• 29,310

@grace-snow

Posted over 1 year 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

Nelson• 2,390

@nelsonleone

Posted over 1 year 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

Nicolás Pírez• 40

@NicolasPirezGit

Posted over 1 year 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.

Nicolás Pírez• 40

@NicolasPirezGit

Posted over 1 year 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.

Nelson• 2,390

@nelsonleone

Posted over 1 year ago

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

Grace• 29,310

@grace-snow

Posted over 1 year ago

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

Interactive rating component using basic front end tools

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community