Interactive Rating Component using HTML, CSS and JS
Design comparison
Solution retrospective
This one was really difficult. Took me around 2 days to complete. Depressing, I know. It was my first time using JavaScript in a challenge.
I don't know if I did it right or not, but it seems to work. I'm finding it difficult to ask specific questions as I don't know if what I did is even correct? If you have any tips or suggestions, please let me know!
I appreciate it.
Community feedback
- @DavidMorgadePosted about 2 years ago
Hello Wesley, congrats on finishing the challenge! your app works perfectly and has the proper checks for the submit button
Don't feel overwhelm in your first JS project, the important thinks when learning a new technology or programming language is to get it to work, doesn't matter if it's spaguetti code or not, is your first project and it works so the job is done!
Your JS looks pretty good structured and you are using loops and if checks impresive for a first Javascript project IMO. You could have use a
forEach
loop to make it a bit more clear instead of afor of
loop, wich actually is faster but less readable, for example something like:form.addEventListener('submit', function (event) { event.preventDefault(); radioButtons.forEach((button, index) => { if(!button.checked) return; rating.append(button.value); mainContainer.classList.add('fade-in'); innerContainer.classList.add('hide'); innerContainer2.classList.remove('hide'); }) })
Instead of checking it is checked, you can check if its not checked and instantly return, at the end is the same thing, also removed the
console.log
You can see that the differences are minimal, consider that I did write this code just here in this comment and didn't check the functionality!
Hope my feedback helps you, keep going with those JS challenges!
Marked as helpful1@wesleyjacobyPosted about 2 years ago@DavidMorgade Hi David,
Thanks so much for the message! I really appreciate the kind words. It feels as if my code is always stuck together with duct tape, but hopefully with more experience it'll become more structured.
I completely forgot about
forEach
. I need to refresh my memory on the syntax though. I'm not sure what "index" is for?The
!button
is a bit of a mind bender for me, but I'll definitely play around with it to try get more comfortable.That
console.log
was for my debugging and completely forgot to remove it. Haha. I'll remove it now.Thanks again for your help and feedback. I really appreciate it.
1 - @Enmanuel-Otero-MontanoPosted about 2 years ago
Hello Wesley!
Congratulations
Your solution for this challenge is correct, there are other ways to do it, but yours is also valid. Now you can look at other solutions to this challenge from other colleagues and you can compare and learn. Keep practicing with JavaScript and it will get easier and easier
For the depressing and difficult don't worry, that will also help you deal with the frustration, very present in programming.
Note: I have been up to 25 days to achieve a solution.😂😂😂
Marked as helpful1@wesleyjacobyPosted about 2 years ago@Enmanuel-Otero-Montano Hi Enmanuel,
Thanks so much for the kind words and advice. I'll definitely take a look at other peoples code to see different ways of solving the challenge. I'm sure there are more elegant ways compared to mine.
Coming from another profession where I'm highly proficient to taking days trying to solve simple challenges like this is frustrating, but hopefully it'll get easier.
Thanks again! :)
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