
Interactive-Comments-Section
Design comparison
Community feedback
- @Jenny-EikensPosted 3 months ago
Hi Muhammad,
great effort on the challenge! 🙂
Here's a few points you might want to consider to make it even better:
-
Currently, you can vote on your own comments. This is something you could prevent by conditionally disabling the plus and minus buttons (i.e. checking if the username of the comment is identical to that of the currentUser object). You can also currently vote below 0. I don't know if that is on purpose, but if it isn't, you could prevent this by simply checking if the score is greater than 0 and only enabling the button if it is.
-
This is more of a design thing and not an issue in terms of functionality, but you might want to add the
hover:cursor-pointer
class to interactive elements (such as buttons) so it will be clear to the user that the element is indeed interactive. -
At the moment, it is possible to submit a reply that contains only the
@replyingTo
, so you're essentially submitting an emtpy reply. When adding a comment, you're already making sure it's not empty, so you can do the same for replies. -
Regarding the use of Tailwind's responsive breakpoints: I noticed you currently define widths, margins etc. for bigger screens and then add a different value for small screens. This is generally not considered a good practice. Instead, you should start at the smallest screen width and add breakpoints for bigger screens (i.e. use a mobile-first approach). Refer to Tailwind's docs for more detailed information on this.
-
Lastly, you can only delete top-level comments and not replies at the moment. I struggled with this myself, and learned that you need recursion to be able to do this. This is definitely not an easy concept to understand, but personally I found this video helpful.
Hope this helps! 🙂
Marked as helpful1@MuhammadSami1Posted 3 months ago@Jenny-Eikens Thanks, Jenny, for taking the time to review my project! I really appreciate your feedback, especially regarding Tailwind's responsive design and handling the deletion of top-level comments. I understand the concept of recursion, but I struggled to apply it in this context. Your advice has been very helpful, and I'll work on fixing these features. Thanks again!
0@Jenny-EikensPosted 3 months ago@MuhammadSami1 Glad I was able to help! Would you mind marking my comment as helpful so I can earn the points? It'd be appreciated :)
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