Learning JavaScript — From Scratch!
Background:
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!
I’ve done some HTML5. I’ve styled with CSS3. I’ve even dabbled with C++, Python, and Java. What I have not really done, ironically, was work with JavaScript (even in my coursework JavaScript was barely touched on). For some reason, it seemed mystical to me and I didn’t quite understand it’s connection to HTML and CSS. Never-the-less I decided I needed to learn it.
Choosing a Project:
I needed something that would help me understand the relation between HTML, CSS, and the DOM (Document Object Model) built into web browsers. I also needed something relatively easy and not too complex, but would also provide enough of a challenge to keep me interested. As well, I wanted some task that would incorporate the essence of what JavaScript was for. From my understanding, this was to provide dynamic updates to HTML elements without the need to refresh the browser. I also knew that I didn’t want to follow some YouTube tutorial and copy and paste code someone else wrote. The project had to be manageable enough where I knew I could Google the resources I needed. Ultimately, a To-Do List application would suit the bill nicely.
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!
Quickly created a template, and threw in a textbox input element. It sounds obvious — you need somewhere to ‘input’ text, right? Well, step two, what do you do with that text? More accurately, what does JavaScript do with that text?
JavaScript was created to be able to manipulate the HTML DOM. This DOM is a ‘tree’ of sorts of all the objects within a web page. So in this case, I created an <input> element. I gave that element an id so that JavaScript could locate it.
I had only learned a few functions so far and document.getElementByID was one. It’s a handy little tool to use actually. It allows JavaScript to reach into your HTML ‘document’ object and find a target element — you guessed it, by it’s ‘id’! You can then append the .value to that and JavaScript will grab the value of the element you’re selecting. In my case it was a text box. Now that I new how to grab the value, I assigned it to a variable. I was then able to create a button in my HTML, create another variable in JavaScript, and assign an action event to that button. So when the button was pressed by the user, JavaScript would grab the value of the text field and assign it to the variable I had set.
My input box was where users could enter in the item to add to their To-Do List. But JavaScript only took the value of whatever text was entered at the time. Now it’s time to start thinking. I had a proof of concept. The button worked. The value was assigned to the variable. But I needed something that would take each item entered and add it to the list, but not overwrite it with the next entered item.
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!
I had decided that I wanted to create a constructor! This constructor is a function in my JavaScript code that was basically a template for how I wanted each item in my list to be created. For now, I knew each item should have two pieces of data, an ‘id’ and the ‘item’. I created another global variable for the id and set it to zero. Inside my constructor object, I set this.id = idCounter, my counter variable. Then I set the ‘item’ the user enters to this.todo = input.value. This ‘input’ was the variable that holds the users text.
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.
So I created the complete() function. This was weirdly tricky. But it mostly had to do with the way in which I was attempting to work with the JavaScript. For example, I had originally wanted each item created to just have a class, not an id. But when I tried to apply the style changes I wanted to the class, it wouldn’t work the way I wanted; probably because there were multiple items with that class name. I can’t be 100% sure, but that is my suspicion.
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:
What is happening is, when you click the ‘Remove’ button, JavaScript targets the parent node of the parent node of the button. So the parent node of the remove button is the <div> tag. The parent node of the <div> is the <section> tag. Once you’re there, you call the function removeChild. Which then removes the <div> and all it’s contents. I’m honestly still a little fuzzy on this because the way the code is written, but essentially that’s what it’s doing.
Conclusion:
So, to wrap it up, I learned quite a bit in this little project. I learned how JavaScript targets elements. I also learned how to dynamically update and change content without reloading the page. I learned new functions and methods for getting your desired result.
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!
