I’m learning to be a developer. I’m also in school for Software Development and taking some Web Development courses, but books and online videos will only get you so far. So with that there comes a time when you need to build something — anything!
Choosing a Project:
How do I start?
This is always the hardest part for me. But in this case I decided the best, and only way, really, was to break it up into small, digestible pieces. I started with what I already knew — some HTML!
Based on my research, there was a plethora of ways to accomplish this task. My way may not be the most elegant, but hey, I’m new at this!
Next, I needed to take each created object and build a list item with it. I created a function called ‘addToList()’ to accomplish this task. Inside of my HTML I created a <section> tag to house my list. Inside my function I wanted to build a new <div> inside my <section> which would hold all my list elements.
I wanted each item entered to include 3 things.
- A check box for completed items which would strike through the text and gray out the text.
- The text of the item entered by the user.
- A button to remove items from the list individually.
This was a much easier, yet complicated, task than I anticipated. Which probably doesn’t make sense, but hear me out.
Inside my addToList() function, I created a for loop that would loop through each list object I created. Inside this loop I iterated through the index of the listArray array I created earlier. I set it to the value of my counter so that it’s size would increase each time I added a new list item. As it loops through this array of newly created objects, it creates a <div> tag inside my HTML using the function .appendChild() function in much the same way the getElementById worked. I targeted my <section> tag by it’s ‘id’, then ‘appended’ the newly created <div> as a child of that <section>.
Then, immediately after the <div> is created, I append a checkbox, the text, and a remove button to the <div>.
Now, to add in the functionality. As you can see from the code, I included a few onClick events to my checkbox and button. But I needed functions to actually perform the operations.
On my checkbox, I wanted the user to be able to check off items as they completed them and have the item remain on the list, but show that it was done.
Ultimately, I had to find a way to add a unique ‘id’ value to each list item. Once I did that, I was able to target them accurately, and apply the style changes.
The ‘if’ statement just says; if the box is checked, apply a ‘line-through’ style and gray out the text; ‘else’ don’t change the text, and keep the color.
Clearing the field — literally!
I noticed in my testing that I had to manually delete the previous text entered into the text field. This is not user friendly at all!
Ok, no problem. I just created another event listener to my ‘add’ button. Every time the button was pressed to add an item to the list, a function ran setting the input.value = “ ” — blank!
And, lastly, the remove button. I wanted this to completely delete the <div> from the section. Not just set it to hide or ‘display = none’.
I created a remove() function. Now, admittedly, this one took some looking up how to do. But basically, I had to have the event listener on the button target the ‘parent…of the parent node’ of the button. Huh?!
You basically end up with this structure:
It was a very fun project to start off with. I’m sure there are things that are not “pro” level. I didn’t post this article to ‘show off’ my skills. Quite the opposite.
I wrote this article to review my own code and experience and see if I could relay it to a different audience than myself. Also, maybe my way will help someone else attempting to do a similar project and the smallest thing can bring inspiration. That’s what happens to me.
So thank you all for reading. Happy coding!