99% sure you were already told to not use the DOM to store data?
#Trying to add back completed todo list items after clicking on active button
signal hound
graceful flame
Well I believe I was told to separate my concerns regarding data and ui
Not sure if that is the same thing
graceful flame
99% sure you were already told to not use the DOM to store data?
I’d assume OOP would help with that as well ?
signal hound
no, OOP would not be needed. yes, you were told to stop using the DOM to store your data. that would be separating data and UI. store the data in memory and draw the DOM based on that data.
graceful flame
Well I did store it in localStorage if that’s what you mean
signal hound
looking at your code now. you do store todos, so yes you just need to re-draw things (re-create elements, if you removed them)
graceful flame
Yeah I used an array to store the data
signal hound
you shouldn't be removing from the array when complete, though
add a complete: true property
graceful flame
Inside the array it does exist
signal hound
oh, then you don't need to reload anything from localstorage. use the array
graceful flame
Sorry mate I’m new to this
Well that’s the thing, redrawing those elements is the part im not understanding. I have the id, text and complete Boolean inside the array
So based off whether the complete state is true or false, I recreate the element
Oh wait
Well recreate the element set to true
I think I might have got it
signal hound
when somebody clicks "All", "Active", or "Completed", you need to clear out all of the todo elements, then loop through the array and re-add the items/elements depending on complete being true or false.
graceful flame
thanks for your input, i just got around to doing that, and its kind of working
only thing is, if i click on a button twice, it'll give me duplicates and the proper elements arent being removed. When I click in this series of order: active --> completed --> active. It wont remove the completed class and gives me duplicates instead. Im assuming for the duplicates ill have to use an if statement of some sort to make sure if there are duplicate ID numbers, to not create them
signal hound
just remove all and re-create all every time. it's fast
graceful flame
its slightly better, but still getting most of the same results
i didnt think a todo list would have so many moving parts
signal hound
you aint seen nothin' yet 😉
graceful flame
could you help me out, idk whats wrong here
is my logic not right or someting
like for example, if i click on complete and then active, itll show me both the complete items (checked) and active (unchecked) items
signal hound
show your latest code
graceful flame
graceful flame
so i realized me using the nodelist was a mistake
i switched to an HTML collection since its live
but thats leading to issues as well
some of the items dissapear when i click on active or completed
and then duplicates also appear
graceful flame
@signal hound so im having this issue where when i click on active or complete, its causing duplicate items to appear, which then causes the complete key in the localstorage to change because sometimes the duplicate item is in a different state. This is definetly due to me implementing a live Html Collection because i switched over from a static nodelist. https://codesandbox.io/s/clever-maxwell-j97qp5?file=/script.js (I didnt think a todo app would be this difficult !!! 😢 . I feel like an idiot )
vital kestrel
<@122172021302886402> so im having this issue where when i click on active or co...
Not sure what you're talking about here. Your All/Active/Completed buttons don't have event listeners attached to them so nothing happens when you click them