Things I've worked on/completed since my last post…
I am still working on the To-do project and again, it I were to list every issue I had, I would have to spend a week writing about it, but here is a summary of the main parts…
Things that went well...
Re-rendering my dynamic task input pop-up form - clearing input fields with .reset()
I has no major problems accessing data in objects when required.
Dynamically styling empty form input fields to highlight compulsory data fields, then using focusout to return to the default colour once the field has been completed.
Adding classes to specific elements to target them for deletion later.
Thanks to another Odinite, I finally made myself try to use the debugger. It’s not that I don’t know the value of it, just that I found it daunting and didn’t really know what I was doing. However, I was stepping through and over functions and ‘watching’ variables and their changing values, which really helped me to understand what was going on a bit better. Still no expert, but delighted to have been able to use it a bit better.
Things that didn't go quite so well...
When I tried to delete one task from the DOM, all were being deleted. I spent ages trying to figure out what was wrong here - it turned out I was using remove instead of removeChild (and not for the first time)
I had a really convoluted way of removing my task input pop-up form, which had been created dynamically. This involved removing all the components which had been appended during its creation. Looking back, I am not sure why I did this, as I later realised all I had to do was set the element display to ‘none’.
I was originally appending task elements directly, but realised I could not easily access the internal values of the DOM elements the way I had it set up, so then I tried a method whereby all the created elements would be pushed to an array and the easiest way I found to to ‘edit’ a task was to just delete the original DOM container completely and replace with a new one.
I thought I had a solution by using my array method above, but my set-up meant that each time I edited and element, it had the same currentIndex number as the original element, which meant both the original and edited elements were being appended - I was stuck on this for ages, but eventually figured out why it was happening. I then used a ‘remove’ class to get rid of the old (edited) tasks from the DOM.
Things I've learnt/need to improve on...
Too many to list at the moment…
It’s not so much that I am finding this project ‘hard’, I believe it’s more a case of there is a lot to think about and some problems are not becoming apparent until I get to trying to implement specific tasks.
I need more practice at using array to store DOM elements are re-rendering them to the screen, as my original way of approaching this has delayed me a lot.
I plan to keep using the debugger as much as I possibly can, even when it’s confusing for me. With the little I know, I can figure out some things which are useful. I am currently using an astronomical quantity of console logs and I am fairly sure this is not ideal(!)
Plan for the forthcoming week...
The To-do project
Note:
I was stuck on the editTask function for four days (I think this was due to a flaw in the way I set it up). Once fixed, I then implemented the edit and delete functions and was thrilled to have it all working…
…until today. I did a bit of testing and saw that after tasks were edited, the order in which tasks appeared were changing. I know that this is because the new/edited tasks is last in the array and so it’s being appended last. I just need to think about whether I should try to restructure the whole thing (it could all definitely have been structured more cleanly), or just figure out that one issue and move on…
I will probably do the latter and that will be my starting point for the coming week.
Top comments (1)
Hello can we connect?