Skip to content
Submitted over 3 years ago

Interactive Rating Component using flexbox, js

Allyson S.•190
@allyson-s-code
A solution to the Interactive rating component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi! I would love any general feedback on this project. I would especially love feedback on:

  • The html- I tried to make it accessible by including form and label tags and this is my first time doing so.

  • Also, in order to keep my page from refreshing upon "click" of any of my button elements I had to add type="button" to my button elements and onclick="return false;" to my submit button. Are these appropriate solutions?

  • In order for me to get colors to look somewhat close I ended up having to use transparency. Since I am working with the jpegs only I wasn't sure if I missed something here.

  • And one last thing- does anyone have a trick for centering text within it's background? I feel like my text is slightly higher than center.

Thanks so much!!!

Code

Please log in to post a comment

Log in

Community feedback

  • Andy•520
    @AndyAshley

    Hey Allyson, great job on the challenge! It looks/ works great! To keep your submit button from “submitting” or auto refreshing the page by default you can add a function to handle the click. A lot of people do something like a custom handleSubmit() function followed by a prevent default, or add an even listener tied to the button that prevents the default

    yourSelector.addEventListener(“click”, (e) => {e.preventDefault()
})

    Then they add what they want the button to do in an on click for handleSubmit() .

    I think I may have used some transparency in mine as well. But I’ve noticed the screenshots may have been taken in Firefox, and chrome can display things a bit different.

    As for centering the text within its background, if you’re using display: flex make sure the parent element has enough room(sometimes need to add a height or width) and use justify-content: center and align-items: center for most cases. Can also pull out the align-self or justify-self . Hope that helps! Great job and happy coding ! 😀

    Marked as helpful
  • Prabhash Ranjan•2,540
    @besttlookk

    hi, Most of things look great. I just wanna add few things:

    1. Disable submit button when user has not given rating. Dont let user go to thank you side without giving rating. You can also some kind of alert to let user know the reason.
    2. Use "cursor:pointer" for submit button and number.
    3. make footer lager and give contrasting color.

    Good luck, #happyCoding

    Marked as helpful

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