Submitted over 1 year ago

Interactive comments section with dark theme and timestamps

Taqib• 390

@taqh

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Interactive comments section

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

👋Hey there here's my solution for this challenge.

This turned out to be more complicated than I expected but I learnt a lot along the way.

Some things I learnt:

working with json
manipulating nested data
some new array methods
I learnt to use tailwind (and how its darkmode works)
React Context / Reducers

Working features

creating, updating, deleting comments
replying comments
replying to a reply
save and persist state with local storage
get relative time from when comment was made

Hardest part of this for me was dealing the nesting of objects especially replying to a reply

Some issues with current implementation:

The voting logic is proving to be a bit tricky and I'm still working on it.

Please feel free to go through my code and give any criticisms to improve my code || tips to solve my current issues

Community feedback

Louisan TCHITOULA• 170

@LTOssian

Posted over 1 year ago

Hey, looks awesome congrats !

Just wanted to point out a little bug which allows me to add (or remove) a comment's score indefinitely.

I think the issue comes from your handleVote logic in Vote.jsx, you should separate downvote & upvote in two separate if-statement. Otherwise I can upvote while voteTries is at 1 and set voteTries to 0 then downvote while voteTries is at 0, which will add +1 to previousVote and set VoteTries to 1 and finaly I can repeat from there.

Cheers, Louisan

Please log in to post a comment

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