Revisiting Flatiron JavaScript Lab — Task Lister Lite

Task Lister Lite in action

Now that I have a couple projects under my belt I decided to revisit an old vanilla JavaScript lab that I initially struggled with. The first challenge was understanding my code that I haven’t touched in awhile and deciphering my notes and bits and pieces of trials and errors.

I reorganized everything and made progress. It felt good to realize that I haven’t completely forgotten everything I learned in my time at Flatiron.

Then, the final challenge. The syntax needed to delete a specific list item from an unordered list based on the ‘click’ event of a button attached (appended) to that specific list item.

Note: That last sentence is a lot more detailed than my google search of “javascript remove 1 item from unordered list” that took some digging around to find a hint of the syntax I sought. Most of the search results were for deleting all of the list items instead of just one. Or, for deleting a list item by index.

Lesson learned: be more specific with google searches.

So, I ended up brushing up on the DOM to understand more on parent and child node relationships.

DOM

The Document Object Model is used to basically access the “document” object and modify it.

A pretty abstract concept that you can dive deeper into sometime but, I mainly want to focus on the nodes that make up the “DOM tree”.

You’ll also need to be somewhat familiar with basic HTML terminology because everything will be based on an HTML file (index.html) and the JavaScript written (in a .js file, of course) will build upon that HTML file using tags, ids, classes etc.

Keep in mind that everything between the opening and closing tag in HTML is an ‘element’.
ex: <label for="new-task-description">Task description:</label>

Nodes

There are 12 types of nodes. Remember, all items in the DOM are nodes.

So far I’ve only worked with element nodes and that is what I’ll be focusing on here.

Element nodes => HTML elements
ex: <h1>An element node</h1>

Fun fact: “the document itself is a ‘document’ node, the root of all other nodes”

This seems to explains the syntax of why most methods so far begin with ‘document’. We’re acting on the base document node to grab, alter and create elements within it.

DOM Tree & Relationships

Because each node is nested within another node we can map them into a tree.

Looking back at my index.html, I can map the element nodes like so:

DOM Tree of index.html

Think of element nodes as being a parent, child and/or sibling node based on where they are in relation to each other.

Get Element By Id — method

So, when we want to access an element we’ll use the getElementById() method to grab the whole line.

ex: document.getElementById("tasks");

To avoid repeatedly typing this whole line every time we want to access this element we can set it to a variable.

ex: const theList = document.getElementById("tasks");

Now, anytime I want to interact with this particular element I can just type “theList”.

It’s good practice to do this with every element you grab. Just in case. It also helps to make the code a bit easier to read by breaking it down into shorter lines.

Create Element — method

The syntax for creating a list element (li) and assigning it to a variable looks like:

const newTask = document.createElement('li');

You can follow this syntax for other HTML tags.

Append Child — method

The goal is for new list elements (li) to be created and added to the already established unordered list (ul) in the index.html file.

First, grab the ‘ul’ element so we can attach new ‘li’ elements to it.

const theList = document.getElementById('tasks');

*This will be the parent node.

Once you have access to an element(s) you can create new elements with JavaScript and later ‘attach’ them to the elements that already exist and/or were just created in the DOM.

This is very important. If you create new elements but they have nothing to attach onto they are not going to show up in the browser.

Next, create the ‘li’ element.

const newTask = document.createElement('li');

*This will be the child node.

The syntax for attaching (appending) a child node to a parent node looks like:

parentNode.appendChild(childNode);

Finally,

theList.appendChild(newTask);

Events

There are several types of events that you can read more about here:

I mainly use the EventTarget.addEventListener method. It basically “listens” for an event that happens in the DOM, such as a “click” or “submit”, and will trigger a method(s).

This is where the fun happens!

MDN Web Docs says it “sets up a function that will be called whenever the specified event is delivered to the target. Common targets are Element, Document and Window, but the target may be any object that supports events”.

To reword this, the EventTarget is the Element, Document or Window on which the EventListener is called.

A button is the most common element that an EventListener is added onto.

ex: btn.addEventListener('click', (e) => deleteTask(e));

One interesting thing that can happen here is that the ‘event’ can be passed as an object to functions activated by the EventTarget.addEventListener method. In the prior example, I have it encompassed in “e” being passed to the deleteTask function (the callback function).

In the deleteTask function, I need to grab the specific list item (li) from an unordered list (ul) based on the ‘click’ event of a button attached (appended) to that specific list item in order to delete it.

The addEventListener was called on the btnelement.

This means e.target= that btnelement.

Node.parentElement

This was the syntax I was looking for to complete the final task for Task Lister Lite. This essentially returns the parent element of the node it is called on.

e.target.parentElement = that very specific ‘li’ element attached to that btn the EventListener acted on.

Remove Child — method

Pretty similar syntax to the appendChild method.

parentNode.removeChild(childNode);

Variable theListthat represents the ‘ul’ has already been defined and again will be the parentNode.

The ‘li’ I want to delete can be contained in a variable like so:

const selectedTask = e.target.parentElement;

And finally,

theList.removeChild(selectedTask);

Conclusion

Even though these are just the basics for the Task Lister Lite and I have yet to tackle the stretch deliverables, this was a good dive back into JavaScript. I explored nodes and events a little closer and definitely have a better understanding than when I first tackled this lab. Until the next task, thanks for reading!

--

--

--

Certified Sommelier and Flatiron School Software Engineering Grad

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Type Yoga: Typing Flexible Functions with TypeScript’s Advanced Features

WebGL Enhanced Drag Slider Tutorial With curtains.js — Part 2

Developing for TVs with React-TV

render_async Fires Events By Default

Progressive Web Apps — The Next Step in Web App Development

Creating an app for mac using Electron, React, Express, Rollup, Yarn and Supercollider

Graphs in JavaScript

WooCommerce FedEx Plugin — Customize Estimated Delivery Date Formats

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jonelle Noelani Yacapin

Jonelle Noelani Yacapin

Certified Sommelier and Flatiron School Software Engineering Grad

More from Medium

Declaring Variables in Javascript

Need a refresher on functions in JavaScript? Here is a quick overview

JavaScript ES12 Features — ECMAScript 2021

let vs var : An underestimated difference in JS world