Design comparison
Solution retrospective
Hello all! Looking forward to hear some feedback regarding the project and I have a question: What should I have used for my rating numbers (inside flex-group). I assume paragraph is not the (best) solution?
Community feedback
- @TomTillyPosted almost 2 years ago
Great job, amerrika!
To answer your question, I personally think radio button inputs within a
<form>
are the most appropriate. They visually don't present as standard radio buttons, but functionally they are the same: a group of related options with only one valid selection, that can be submitted with a button. Using these elements also does a lot of the functionality and accessibility work for you out of the box. Hope that's helpful!1@amerrikaPosted almost 2 years ago@TomTilly Thank you for your answer. I actually do have to learn and practice input elements and forms. Right now not sure how they work, so I will focus on that and try to implement radio buttons in this project.
1 - @AdrianoEscarabotePosted almost 2 years ago
Hi amerrika, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:
To make the submit button work only when the user selects a number, we can do this:
ratingValue.addEventListener("click", function(){ paragraph.textContent = `You selected ${ratingValue.innerText} out of ${ratingValues.length}` ratingValue.classList.add("orange") btnSubmit.addEventListener("click", function(){ ratingBoxEl.classList.add("display-none"); messageBoxEl.classList.remove("display-none"); }) });
The rest is great!
I hope it helps... 👍
1@amerrikaPosted almost 2 years ago@AdrianoEscarabote Thank you, it works and improves the project. I hope with more practice I'll be able to recognize this things while writing a code.
1
Please log in to post a comment
Log in with GitHubJoin 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