HTML, CSS, and Javascript (jQuery) for Dynamic Form

Hi Spencer, great job here! About using display: none for the radio buttons, that would hide the input from the browser, and tabbing would not work in this case, which would not be good for accessibility and would even defeat the purpose of using radio buttons from the viewpoint of accessibility. I also used radio buttons in my solution, so you can check that out to see how they were styled! You'll also see that I used event.preventDefault() in my code. All that mean is, we're telling the browser not to do the default action it's been designed to do but to do something else instead. I think it's not about good or poor practice in this case, just about what you're trying to achieve.

One thing you can consider trying is to add in some logic that handles what happens when the user clicks submit without selecting a score. Once again, well done solving this challenge!

Hello Spencer! good job on finishing the challenge!

To answer your question, yes, it's a common thing to use preventDefault() even with modern frameworks like Angular, Vue or React, Jquery too so don't feel bad about that, it's a common thing to prevent the default html behaviour, is used commonly on form submisions and anchor tags when creating a single page application.

I would recommend you to add a reset stylesheet to your project like normalize.css to reset the default styles from browsers (every browser has his own default styles), for example your body on firefox has a little margin and thats why the scrollbar is appearing even wheb your body is height: 100vh, you can check normalize here.

The only important thing that I think is missing in your project is the cursor: pointer property in your inputs/buttons, don't forget to add it for a better user experience!

Hope my feedback helped you, good job!