I'm afraid you need to rewrite the html on this. This challenge must use a form with radio inputs and a submit button. Preferably those radios should be in a fieldset with visually-hidden legend.
This is essential.
The good news is, once that is fixed the js becomes much simpler. All you're listening for then is one submit event and if successful you show the thank you container and data value. It's very short.
Other issues I see:
- all content should be contained within landmarks. Every page needs a main
- you must never limit the height of elements that contain text, including the body. Use min-height instead of height to avoid vertical overflow bugs
- Never ever write font size in px. Use rem. See this post
- the max width on the component must be in rem not px. You want it to scale with the users font size.
- Same with the width and height on the radios. Give the fieldset a flex wrap too to guard against overflow for those with large font sizes (when you fix the html with the missing fieldset)
- rather than only focus and hover styles, add a focus-visible style if you can
- the huge padding on the submit is breaking it completely. Use small paddings on buttons, preferably in a responsive unit like em so it can scale. The submit button should be width 100% and it's padding be small.
Marked as helpful
1
