Rock - Paper - Scissors || Techs = [ Vue.js, Animate.css, Css, Html ]
Design comparison
Solution retrospective
Difficulties : . Positionning of all 3 roles in a triangle shape (struggled between flexbox & grid) . Responsive design was a bit chaotic cause of bad placement for some Vue directives . . Still not 100% accurate but it's playable on most devices...
Questions :
. Do converting my html as 2 vue components would be worth it ?
.Using a switch system instead of multiples else-if statements could improve readability of
my determineWinner()
Function or is it clear enought with my comments ?
Community feedback
- @GrzywNPosted over 2 years ago
Great job I love the result!
I would suggest you to split your code into more files. I'm not a Vue expert, but it's possible to do so. Also in terms of clean code, good practice is to remove all the comments. You should try to make your code easy to understand by itself without comments. Making small functions without unexpected behaviors and with good names can help you in achieving that (you can also make documentation file for your app, instead of comments). It might be good to wrap some of the methods into a class. I would also suggest to make some vertical formatting, because you don't have any spaces between methods and both your code and comments are hard to read.
Other thing which I saw is that you assigned undefined to a variable. It's good practice to always assign null instead of undefined if variable needs to be empty. Null informs that empty value was assigned purposely. Undefined value is the default empty value, so no one knows if you assigned it or it's just empty because of JavaScript. The difference between null and undefined is often asked on job interviews, so it's really important. It might come in handy in the future, when you'll test your applications.
Have a nice day and happy coding!
Marked as helpful1
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