Design comparison
Solution retrospective
Difficulty I had a hard time with Javascript this challenge. I didn't know how to hook it to HTML, what the best practices are for hooking it and more. I feel like my JS code can be cleaner. I need to get more comfortable wit Javascript
Community feedback
- @jason-merrellPosted over 1 year ago
Whenever you want to grab input from a user, you want to make sure to use the
form
element. I know it seems like more complexity in the HTML you have to build, but you get upside in JavaScript when it comes to getting those values when they go to submit -- particularly with the nativeFormData()
class. It's designed to easily grab all of the input values on the form and you can use the.entries()
method to generate an object with key/value pairs.Here's the event listener I have on my submit button:
const handleFormSubmit = async (e) => { e.preventDefault(); const form = e.target.closest('form'); const formData = new FormData(form); const data = Object.fromEntries(formData.entries()); console.log(data); // const response = await fetch('/api/submit', { // method: 'POST', // headers: { // 'Content-Type': 'application/json' // }, // body: JSON.stringify(data), // }); // const result = await response.json(); // console.log(result); // if (result.success) { // alert('Thank you for your submission!'); // form.reset(); // } else { // alert('Something went wrong, please try again later.'); // } handleFormResults(data); handleFormAnimation(form, document.querySelector('.rating-complete')); }
When I ran
console.log(data)
, the result is{rating: VALUE}
, whereVALUE
would be whatever radio option was selected in the form.The challenge didn't call for us to actually do anything with the data, but I commented out an example of what it could look like.
Marked as helpful0@oo2smhPosted over 1 year ago@merrellj-codeup Thank you! You're right. I should have used the
form
element! I am not familiar with theFormData
class and my Javascript is still unrefined. 😅 Still, I appreciate your feedback 🙏0@jason-merrellPosted over 1 year ago@oo2smh I looked at your JS, and you're doing great!
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