Skip to content
Submitted over 2 years ago

Interactive Rating Component using flexbox, js

Allyson S.•190
@allyson-s-code
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

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!!!

Community feedback

  • Andy•520
    @AndyAshleyPosted over 2 years ago

    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
    0
    Allyson S.•190
    @allyson-s-codePosted over 2 years ago

    @AndyAshley Thanks so much! I will add the handleSubmit() function with the prevent default. That sounds perfect. I'll also check out my flex styles again. Very helpful, thank you!

    0
  • Prabhash Ranjan•2,540
    @besttlookkPosted over 2 years ago

    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
    0
    Allyson S.•190
    @allyson-s-codePosted over 2 years ago

    @besttlookk Thanks so much for taking the time to look and give feedback. Great suggestions! Thank You!

    0

Please log in to post a comment

Log in with GitHub

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