Submitted about 2 years ago

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

Spencer Daniel•50

@WhaleMentalist

Preview site View code

This is a solution for...Interactive rating component

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

This challenge was tougher than I expected. Stylizing the radio buttons was interesting. I ended up using 'display: none' to hide the radio buttons themselves and used the labels associated with each button. It actually ended up looking pretty good, but I am not sure if it was the proper way to do it. The rest of the form was pretty straight forward.

The jQuery was used to allow the user to be presented with another card after rating submission. I ended up using the 'hide()' and 'show()' to exchange out the rating and thank you cards. The functions allowed the cards to be animated for a smoother effect. The only odd thing was I needed to add a 'event.preventDefault()' to prevent the submission from redirecting. My understanding is the function is a way of saying "Hey, I got things handled here, no need to do anything". I do wonder if this is a common thing or if there is a better way to handle this odd scenario.

Community feedback

Elaine•11,400
@elaineleungPosted about 2 years ago
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!
Marked as helpful
1
David•8,000
@DavidMorgadePosted about 2 years ago
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!
Marked as helpful
1

Please log in to post a comment

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