I'm very much stuck with this project (frontend mentor project)

JavaScript
1

Hi all.

Here’s the github:
https://github.com/cmb347827/interactive-comments-section-main

I would just like to know if this looks salvagable or should I start over completely?

I get errors when I click on a reply button a few times, and then cancel each.
Off course I could disable the reply button from the comment that is replied to, but I think my code is just too fault atm and I need to know if I’m on the right path at least.

I would like to just only use JS for the moment. I’ve used React in the past, but for the moment I think it’s important to focus on JS as I’m no where near good enough yet at it.

Any insight would be greatly appreaciated.
Thanks

2
  • what errors do you get?

…, and then cancel each

  • what do you mean by that

happy coding :slight_smile:

3

I mean, that when I click the reply to the top comment button, that a currentUser reply form appears below, if I click the top comment reply button again, another currentUser reply form appears below it , basically it keeps going. If I then click each cancel button on the currentUser reply forms , I get an error.

And like I said, off course I could disable the reply to a comment button once a currentUser form is open, but I just think my code is faulty at a deeper level.

I just want to know if I should continue down this path , with my current code , or does it seem too crappy code ?

I’m not sure how for instance how I would update/delete/add currentUser replies.
I guess by keeping tracking of the comment replied to message ID and then the currentUser reply message ID? But that was also what was now causing the error, I think.

Thanks!

4

I would be happy getting some help getting the id of an ancestor element.
This is not working atm.
see lines 131 and 197.

thanks

5
  • i tried looked into live site and i tried to click on “reply” but doesnt seem to do as you mentioned here!!
  • rather a default behavior stays visible…
  • what happens here?
  • in that “forEach” loop what are you trying to do?

happy coding :slight_smile:

6

Line 197:

 const parentArticeId = event.target.closest('article').id;

You are passing an article selector into the closest method. I do not see any article elements in your HTML.

8

The article element is created in setParentId() ?
My guess is that it’s an issue because the elements are created at runtime?
Thanks

9

Look at your HTML in the dev tools inspector. There are no article elements in there. You may be creating article elements in your JS, but they are never actually getting into the DOM.

1 Like
10

Thanks, so how do I fix this bug? Is all my code a mess?
Do I use appendChild etc?

11

I would start by formatting your code properly. Use Prettier.

I didn’t see the FM Todo app on your repo. I would highly suggest you start with that and learn how to create a proper CRUD app using a data structure if you haven’t yet. It will teach you the basics of CRUD. A todo app uses a more flat data structure that is easier to learn with than the comment section app.

After you have done it with pure client code using localStorage I might even suggest trying it using a real backend (API/DB).

After that, come back to the comment section app.

The data structure is the source of truth. Make sure you understand the data structure you are working with. Use it to create, read, update, and delete. After you have preformed a CRUD operation, you then render the new data to the DOM.

1 Like
12

Thank you, that’s a good idea. I never noticed that challenge.
I will start with a CRUD tutorial , especially on using the correct data structure/algorithms, and then try the FM todo app challenge.

Only then, am I ready for this comment section app. Funny thing is , when I sorted by easier first, this comment section app came first .

13

They are both marked as intermediate. Not sure how they filter it.

The data structure used with a todo app is simpler because it is flat (just an array of objects). The comment section has nested structures and its scope is a bit wider because it has comments, and replies to comments.

For learning CRUD, starting with a flat data model is just easier, and it doesn’t have any relational data. In a real CRUD app a comment section is more involved than a todo app. You would likely reach for a relational DB because of it (not that you can’t do it with a NoSQL DB).

1 Like
14

Thanks. Yes, I will have to retake the JS course on here as well, it wouldn’t hurt. Already on the second part. It comes with a todo list tutorial , which could be useful for the FM to do app project.

15

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.