Coding Projects - Nested Comments with HTML, CSS and JS

Рет қаралды 23,840

Күн бұрын

Пікірлер: 36

@forwork5516 Жыл бұрын

Seems like this doesn't work with 2 seperate comments. Because of this line of css code .comment-container:not(:first-child) it only prevents indent of first child in container. When i try to put second comment-container it goes right under the first comment like a reply. I use *.comment-container.comment-container* instead of *.comment-container:not(:first-child)* this worked.

@arthurparkerhouse537 11 ай бұрын

I'm trying to convert an old mailing list archive into a nested comment forum and it's driving me nuts. Do you know of any projects currently that try to convert a mailing list archived with MHonArc into a nested-comment structure like this?

@slim_fisher 2 жыл бұрын

Great Job 👍 Thanks from France 🇫🇷

@Hangoutapp Жыл бұрын

Love this video

@siyamndmohammad Жыл бұрын

great thanks

@mathis-meth4229 2 жыл бұрын

simply amazing!

@tunarmemmedov1641 2 жыл бұрын

how to make comments like facebook, in facebook people share something and like comment dislike sections are be oto spawn under this photo, i hope you can figure out, how can we do this system? can u help

@begeosdev1615 2 жыл бұрын

Awesome idea, coming up

@davebudah 2 жыл бұрын

I'm getting this error in my JS 'Uncaught TypeError: parentContainer is null', where am I missing it?.

@begeosdev1615 2 жыл бұрын

Hi Dave, thanks for the question and I reviewed it. It should actually be working. The first thing I would say is to check the spelling, I know it sounds silly but it might happen. Second, nesting in the HTML can be tricky so just double check that each comment__container is inside another and that the show-replies button is inside the comment__container as well. Basically the error you are getting means that when selecting the parentContainer it doesn't find it, which is odd. To debug you can use the console and focus on one button and query the same so querySelectorAll() and see what it picks up. If null comes up the problem is the nesting. The closest() selector actually goes and find the first parent with a particular property or class, but it doesn't check for siblings. I hope it was helpful, if not just let me know and we try to figure it out.

@davebudah 2 жыл бұрын

@@begeosdev1615 you were very correct, I had mistyped the comment__container class in my js file.

@theouterspace5285 Жыл бұрын

Thanks man, i tried using these css lines instead inserting opened manually. is this a good aproach? .comment__container > .comment__container { display: none; } .comment__container > .comment__container.opened { display: block; }

@raymytech Жыл бұрын

How can we integrate it to php

@namo1771 2 жыл бұрын

I saw your video, how can I contact U

@un_known_dom 2 жыл бұрын

nice explanation 🧡

@YassinOmer360 Жыл бұрын

Nice work. But, It's hard to flow up. I want to get the source code, please.

@begeosdev1615 Жыл бұрын

Sure, you can find it here github.com/BeGeos/nested-comments-yt

@paragbhide1695 Жыл бұрын

@@begeosdev1615 true !!

@paragbhide1695 Жыл бұрын

awesome

@boomaboom6458 Жыл бұрын

@@paragbhide1695 This is how nesting comment works

@waleedrehman5665 2 жыл бұрын

Nice

@rayyanabdulwajid7681 8 ай бұрын

Would have been better if we could add a reply to the comment, instead of just viewing a reply.

@sekokhan5307 2 жыл бұрын

How can u make this dynamic with an active api of users?

@begeosdev1615 2 жыл бұрын

Nice question. So I think you need to think about your models, basically how You want to structure the data. So which comment is related to which. I know it sounds inefficient but I would go with recursion in the component basically just keep creating the comment container until the data is empty for instance. So I would create a method that recursively nest the comment component inside one another until the are no more replies in that component. Once that is done, pass onto the next one. It would return an object that can be inserted in the main container and rendered. Thanks for the question