Nested Comment Section: Built with Vanilla JS, MVC & Pub-Sub Pattern💬
Design comparison
Solution retrospective
Hello guys!! I had an amazing time building this nested comment section using Vanilla JS. It took longer than I thought, but I'm happy with the outcome. Implementing the MVC and Pub-Sub patterns was both challenging and rewarding, allowing me to create an organized codebase. I also utilized Local Storage for persistence. It was a great project to put my JavaScript skills to the test and create a full-stack CRUD app. Any suggestion from you, would be really appreciated 😊
Key Features
- Create, Read, Update, and Delete comments and replies.
- Upvote and downvote comments.
- Bonus: Utilized localStorage to save the current state in the browser and persist when the browser is refreshed.
- Bonus: Instead of using the createdAt strings from the data.json file, I have used timestamps and dynamically track the time since the comment or reply was posted.
- Bonus: Dark mode toggler.
Community feedback
- @matt-o-westPosted over 1 year ago
Hello! Very nice solution, and impressive this is all vanilla JS. One item:
- The voting isn't quite working like it should, you can vote once, and presumably the counter should disable, but the user is able to vote again. The second vote increments/decrements by two instead of one, as well.
Overall great work!
0@CodeWithAlaminPosted over 1 year ago@matt-o-west I intentionally made it in a way that a user can vote a comment once. If a user upvote first, then he can change mind to downvote again.
Yes, First vote increments one and second vote increments two. Because, for example, if a comment already has vote 6, first time you click+, it should increase one and output will be 7, and then if you decide to downvote that comment, it should decrease two, because it already had 6, so you need to decrease two. So the output will be 5.
Thank you by the way ☺️
0@cjcrawfordPosted over 1 year ago@CodePapa360 interesting take on the 2nd vote! Your explanation makes a lot sense when you assume the user can only go up or down. In the situation where a misclick occurs, having the ability to undo and remain neutral feels better to me, but that is not an implementation issue as your solution actually makes the most sense by saving an extra click (if there was an "undo" vote ui element it would be the best ux pattern along with your solution as one click would always give the intended outcome).
Anyway, just wanted to say thanks for explaining your reasoning as I think I want to update my solution now to use this idea and after voting, turn the selected arrow into an undo button.
0@CodeWithAlaminPosted over 1 year ago@cjcrawford Thank you!🙂 In the future, I might decide to implement the feature "ability to undu vote when a user misclick".😊👍
0
Please log in to post a comment
Log in with GitHub
Join 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