(Note: this should have been posted yesterday, 22 Dec. ‘24)
What a week! I finally got back on track after a very unproductive week the previous week and all that I can say about this week is that it has also been very unproductive, but very productive at the same time(!)
If I were to write about everything I did this week, I would not have time to learn web dev and it’s sometimes difficult to put my experiences into the correct catergories here, as sometimes they belong in more than one category, but I will ty to summarise the week anyway…
Things I've worked on/completed since my last post…
I have been working on the To-do list.
Things that went well...
I thought I was making great progress this week until I shared my repo and asked for advice for something unrelated. In so doing, I discovered that I was exporting things I shouldn’t be (mutable variables)and that I had not picked this point up correctly prior to starting the project. As much as I would have liked to ignore this (!), I knew I would have to adjust my project.
I was advised to structure my progam with just three modules: index.js, logic.js and variables.js in order to keep things more simple while I was restructuring my code (I previously had multiple files). I think this ‘problem’ was good in hindsight though, as I probably would have continued to export everthing, not realising the potential implications of exporting all sorts of variables to all sorts of places.
I replaced the static popup form I had with a dynamic form and it was my first time doing that. Prior to this, I was using the display property to hide and reveal the static form, but I ran into trouble when I was trying to collect data from the static form and was advised to crate it dynamically. This enabled me to actually render/build the form ‘on demand’ from its variable components, as opposed to just changing the display of a static element.
Even though I still ask for assistance at times, I feel more capable of finding the answers to my own problems, which is very satisfying. I also think I have a better idea of what is going on with my code generally.
I think I am getting better at figuring out how to access objects within arrays within objects of other arrays (or something similar!). It can definitely be confusing, but this project has made me better at figuring this out.
Things that didn't go quite so well...
Although I found the error in the end, I had the order of my DOM and logic functions the wrong way around in my button event listener, which meant that the data I needed was not availabe to update the DOM (due to the incorrect order in which the functions were called). I got stuck on this for a while, and for some reason, did not think to check the order in which the functions were being fired.
Another problem which ended up being simple, but which I spent time on, was adding tasks to the DOM. My taskContainer was being appended without any problem, but I noticed that the inner components were not being appended after the first click. It took me a lot of looking to figure out that the ones missing on second click related to variables declared outside of the function (I had left them outside in orde to be able to access them later and attach event listeners). As it turned out, I did not need to access those elements outside of the funciton in question and so I moved them inside the function and fixed the problem.
I was told that I should be separating logic from data, which I tried to do, but I realised that if I’m not supposed to export certain types of variables and I wanted to have a function attached to an event listener, I had to put that function into where my variables live. I have a mild fear that this may be incorrect for some reaons, but I am sticking with it for now. I supposed that I should be able to import that functions with relevant parameter to where the variables are, but it did not work - I should probably check this again.
Things I've learnt/need to improve on...
This is the first project in which I have used parameters in functions extensively and I have learnt so much from this - it has made me more mindful of scope and I also learnt how to use functions with parameters in an event listener without calling it immediately (calling it anonymously).
I need to keep data and logic separate as much as possible.
Forms should be created dynamically to enable them toe be re-rendered(!)
Putting more thought into variable names (e.g. if two variables used for the DOM and logic respectively have similar names, append the one relating to the DOM with ‘DOM’ for example, as it can get very confusing otherwise.
It’s easy to change a variable name incorrectly with find and replace! There are probably ways to prevent this though - maybe I just need to learn what they are.
I set up a new branch in git. I have done this before, but it was good to.
I’ve learnt a ton this week and am enjoying it, even if it is time-consuming.
Plan for the forthcoming week...
I will be continuing with the To-do project.
I pretty much have my task adding (both to logic and DOM) all working correctly, data objects are being set up correctly etc, so I will probably start working on deleting and editing individuals tasks, before moving on to creating new projects and adding new tasks into those.
Top comments (0)