Interactive rating with basic JS
Design comparison
Solution retrospective
First project with JS. Open to any suggestions about my script code, how i could have written it better, in terms of efficiency, size, and performance overall. Not really looking for html or css suggestions because right now i'm focusing more on JS. Thanks! One doubt i had, that i tried to fix but couldn't while doing the challenge, was when i tried to make the if statement that creates the warningMsg variable, creates it only once, and after another clicks, stops creating it. At first, if i spammed the submit btn it just kept showing up more warning messages, because they were being created each time. The solution i came up with was just creating the variable in the global scope and just appending it after. It worked. But i think the other way would be cleaner, since i would only create an element if needed. So, if someone could give me an idea, thanks!!
Community feedback
- @EudesSerpaPosted almost 2 years ago
Hello! Well I have seen your code and your comment on comments. But in my opinion, if you want to improve your Js skills for the web, you should improve your html (and css) skills because a good html document leads to a good Js code. In your case, I have seen that you create the thank you card with Js, which is not bad and cool, seeing that you want to give everything to Js. In that case, my advice is to create a function for the creation of the card since you repeat a bit the logic of creating an element, assigning an attribute or text content and a class. Like I said before, if you have a good html document, you have a good js. If you improve your form: change the buttons to grouped radio buttons, since in this case only a single option is required, and you will have a cleaner code. So when managing a form, if you use the corresponding elements that will give you input for better Js.
If it is of interest to you, you can see my code and give your opinion if you want. The idea is that you see how I handle the form and how having a good html can help you to make your js cleaner. https://github.com/EudesSerpa/FM-interactive_rating_component
Marked as helpful0 - @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
To answer your question regarding JS you first have to fix your HTML since it was created incorrectly.
The proper way to build the "rating buttons" in this challenge is to create a
form
and inside of it, there should be fiveinput radios
and eachinput
should have alabel
attached to it to make the buttons accessible. Finally wrap all theinputs
andlabels
inside afieldset
to prevent users from making more than one selection.More Info:📚
MDN <fieldset>: The Field Set element
Once that is fixed, the only job your JS has to do is get the
radio input
that is selected and have save it as aconst
when theform
is submitted. Once that is done, JS would removehidden
attribute/class from the "thank you" component and add thehidden
class to the rating component and display the rating that was selected.If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
Marked as helpful0@AlexAgustiniPosted almost 2 years ago@vcarames ok, thanks, the radio buttons does really simplify the task i guess
0
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