Comments Challenge completed via React
Solution retrospective
React Comments
Featuring
-
JS confetti library to celebrate a LIKE 👍 🙌
-
Ability to update a comment 💬
-
Parsing function to detect some tech language terms and generate a link. Use a hash to make sure there's no duplicates.
-Input Character counter to (try!) to limit your banter!
Feedback and suggestions welcomed! 🙂
Please log in to post a comment
Log in with GitHubCommunity feedback
- @niemal
Hello there,
This looks pretty solid congratulations! I have a suggestion to make, at least on the mobile version:
When you click on an upvote button, the button hover-states and remains hovered. You might want to do something about that and remove the hover on mobile or just make it a keyframes animation on mobile.
Last but not least fixing the accessibility report on this page should also be a fine task to take on.
Overall solid, love it, keep it up!!!
Marked as helpful - P@jgreen721
Appreciate the feedback and bug finds! Yea I need to always be a bit better on the accessibility portion and think I will clean it up.
I initially did some 'reaction' restraint logic but took it off figuring why not allow a few more clicks but yea, I just put a global counter in there that will kick in after 8 clicks. As far as persistence I did think about attaching a firebase or something and may end up doing that. I realize there are other manners but ya, I just didn't go the persistence route at this point. It's definitely a good template exercise for it though!
I did tidy up the bug with a @media and @keyframes adjustment. The animation can sometimes look a little funny but not bad. I then added a boolean so when you can't click anymore all hover-events will/should?? be stripped. lol
Again appreciate the replies! 🙂
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