Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Vanilla JS, data structures and algorithms, DOM access, grid, flex

micoirvin• 80

@micoirvin

Preview site(opens in new window)View code(opens in new window)
Desktop design screenshot for the Interactive comments section coding challenge

This is a solution for...

Interactive comments section
  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison

SolutionDesign

Solution retrospective

There are a lot of challenges and learnings from this project. I became a little more skilled in manipulating objects. This is also the first time I used a browser’s localStorage. I had to organize my data structures and algorithms smartly. I also had to organize my HTML structure, so that I could manipulate it easier in the script. I also learned some new things in CSS and layouts. Read everything in my documentation:

https://micoirvin.com/projects-docu/interactive-comments-section-docu.html

Community feedback

Yann• 110

@yannaufray

Posted

Well done. I'm building this right now and it's not easy at all.

A few suggestions:

  • Icons (reply, edit, and delete) are not aligned vertically with text
  • You don't get the @username tag when replying to someone
  • Likes should be limited to one only per comment
  • Cancel button when editing won't work
  • UX suggestion: autofocus input when clicking Reply
  • UI suggestion: some animation when posting would be nice to the eyes
  • Feature suggestion: autolike your own comment when posting

Good job, once again!

Marked as helpful

2
Yann• 110

@yannaufray

Posted

@yannbrds I read your project doc, it's great you wrote this!

By the way, you can use json-server instead of localStorage. It's a fake backend that lets you play with a data.json.

1
micoirvin• 80

@micoirvin

Posted

@yannbrds Thanks so much for the feedback and suggestions! I thought I completed all features, but I missed quite a lot 😅. Good thing you pointed it out. I'll surely work on these. Good luck with building this project!

0
Yann• 110

@yannaufray

Posted

@micoirvin I'm happy it helped! Thank you for the encouragement and good luck to you.

0
Jon Wright• 160

@Dr-Wrong-Mo

Posted

This is very well executed. One thing I think you could have done better, which I've seen with many examples of this project, is managing the vote history better. Though, I think that would be a bigger challenge for you because you added the ability to change users.

What I mean by that, is remembering which comment a user has voted for already and not letting them duplicate that vote. So only one upvote, one downvote or null.

I did this by adding a new key/value pare to the comment object called 'voted' and set that to true or false. Then I had another key/value pair to tell me if the current user voted up, down or there isn't a vote. I represented that as 1:upvote, 0:no-vote, and -1:downvote.

I also used this data to add classes to my voting buttons which changed the color of the icons, so you can see that you have voted up or down. If you click on the plus icon for a comment you have already given an upvote, it would remove the class, adjust the score down 1 and change the value of voted to false. If you've upvoted something, then you downvote it, it would toggle the class on both the plus and minus buttons, adjust the score down 2 points, but the value of voted would remain true.

I hope I explained that well. It's basically the function that Reddit has with their voting system.

If you were going to do this and remember the voting history of each user for each comment, that would be a much bigger task. You'd basically have to emulate a many to many relationship table in local storage. I don't know if you've worked with databases at all, but that would be an interesting (if not silly) challenge to accomplish with local storage. The fact that you have infiniate nesting could make that even more of a challenge.

All in all though, very nice work.

Marked as helpful

1
micoirvin• 80

@micoirvin

Posted

@Dr-Wrong-Mo Thanks for the feedback and tips. I think it's worth trying!

0
Justin• 160

@jpal91

Posted

I really loved the drop down, I think I'm going to have to add something like that to mine. Super simple and gets the job done.

The design and overall style looks great. Nothing is "jumpy", it's reactive, it's clean-looking, and just works. Really great job.

Only thing I noticed is if you start nesting replies, you end up getting most of the text cut off by the 3rd or 4th reply. I'd recommend just adding in some logic to keep the comment card from getting too small. Maybe min-width would do just fine. Also, you don't get the "@user" after a reply.

Marked as helpful

1
micoirvin• 80

@micoirvin

Posted

@jpal91 Thanks so much for the feedback and suggestions!

For the comment card getting too small, I am thinking of three things:

  1. I'll add some logic to the JavaScript to handle it (simple and easy).
  2. Or I'll use container queries like here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries. Although it was said this feature is still in development.
  3. Or I'll use alternatives to container queries (which can be quite complicated). Just thinking that UI issues should only belong to CSS.

Yes, I totally forgot about the "@user" 😅. I'll add that!

0
Justin• 160

@jpal91

Posted

@micoirvin No problem!

I tried to take a look at your code and see where the sizing was handled, but I wasn't able to tell right off. I'm sure it must be handled programmatically (through JS at least) right now, correct? I think you could just combine some sort of limitation of min-width on CSS probably to limit the sizing.

Honestly I'm not as versed in #2 or #3 either so I can't say with any certainty whether those would be better options. For CSS I've been mostly sticking with CSS packages designed around React so I may be taking a shortcut as it comes to the CSS side of things :).

Good luck with your continued learning process!

1
Abbas Manning• 200

@Abbas-Codes

Posted

I like the way you can change the username, that's awesome

3
micoirvin• 80

@micoirvin

Posted

@Abbas-Codes Thanks! I appreciate your comment.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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