Regarding the HTML, the "How did we do?" text should be a h1, like what you did on the "Thank you!" page. Labels are mostly used to label form controls. div.feedback-form__ratings could be coded as a fieldset with a legend inside to group the radio buttons.
The radio buttons are very close to being accessible! The only problem is that they're hidden with display: none. That declaration hides them from keyboards and screenreaders as well. You only want to visually hide them. You can copy the sr-only class from Tailwind to achieve this. You'll know you got it right when you can select a rating with the keyboard.
The page overflows because there's not enough room for the radio buttons and the gap between them. You could try reducing the gap on the .feedback-form__ratings, and space the radio buttons with justify-content: space-between instead. flex-wrap: wrap would make the buttons wrap to another line when necessary. It depends on how you want them to behave.
The CSS and JS look good to me! In case you ever need to get the values of a form in the future, you can use FormData:
formEl.addEventListener("submit", function (e) {
e.preventDefault();
const formData = new FormData(e.currentTarget);
const value = formData.get("rating");
console.log({ value });
});
Great job!
Marked as helpful
@kaamiik
Posted
Thanks Marcus for your great feedback. It was very helpful. I changed my JS files. I deleted the index.js from html and only add this code to thanks.js
const searchParams = new URLSearchParams(window.location.search);
const rating = searchParams.get('rating');
and then add this on html
<form class="feedback-form" action="thanks.html" method="GET">
<!-- form elements here -->
<button type="submit" class="feedback-form__submit">Submit</button>
</form>
I changed my code you can check it again. @markuslewin
@kaamiik Perfect! 🥳
