Interactive Rating Component using flexbox, js

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

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