Today is my 12th day learning with the Full Stack JavaScript Techdegree of Treehouse. I learned quite a lot today and I got to practice DOM Manipulation, adding event listeners, and also conditionals for filtering the results. I added this to my projects and also did some additional features on my own to test my skills! I really feel like i’ve improved a lot. And I keep on improving every day I code!

These are my notes:

Registering Names

There are two ways we can retrieve the data from a form: pressing enter or clicking the submit button. We can use an addEventListener to the form with the event “submit”.

addEventListener(“submit”, eventhandler); — “SUBMIT” event is fired when the form is submitted

Whenever we enter information on the form and submit it, the page automatically reloads. This is normal because it is the browser’s default form action when retrieving information and sending it to a server. In this case, we are not going to do anything with a server and we will just stay on the current page. To fix this issue, we can add event.preventDefault( );

event.preventDefault() cancels the default behavior associated with an event — we have to add it to the event handler (event function) for it to be applied


Now the page does not automatically reload — because it is preventing the form’s default action by using event.preventDefault()

— — -

Now let’s create a checkbox that will mark the guest as confirmed and add a label

Also once we click a checkbox let’s add a className to the list item

We can do this or we can make use of event bubbling and use “change” event rather than “click”. Meaning when the state changes.

But now what happens if we uncheck it? It still has the class “responded” we have to add an if statement to our event handler

Checkboxes have an attribute “checked” — and it returns true or false

Now let’s create a remove button to each invitee and remove them if we click it

We can bubble it up by using traversal — event.target -> parentNode

And since “click” events can be triggered on all elements in the HTML, we can use an if statement to filter out which HTML element can receive the click event.

But now our form event handler seems a bit cluttered, let’s refactor it and make it cleaner and easier to understand

Now our users can confirm an attendee, remove an attendee and create an attendee.

Now if a user makes a typo, let’s allow the user to edit the name of the attendee.

— -

In a handler the event object contains data about the event, and passed as the first argument

— — -

Added the edit button

So that we will only use one “click” event — to differentiate buttons from other elements we specified the tagName to be button (since all elements have the click event). Also an if statement for the textContent since both save and remove are buttons we differentiated each with their corresponding textContent.

And refactored the constants since we will be using li and ul in both cases of the if and else if code blocks.

— —

Moving to an editing state

Now we need to provide the name the user wants to edit

Just make the value of the input to the textContent of the span

Replacing the edit button with the save button

Now I can edit and save the new name

— — -

What is an event object? An object provided to an event handler that contains information about the event

— — —

Filtering invitees who have not yet responded

— —

Text elements are accessed and manipulated differently than HTML elements, True

To simplify the way you manipulate text elements convert it into an HTML element

— — -

The DOM Loaded Content

If we put our script on the head of the html file, it will cause an error because we loaded the js file first and that js file selects the elements in the HTML file. This will cause an error — the reason why we’ve been placing it at the bottom of the body just before the body ends is because we are letting the html file load first and from there we are selecting it after all html files have loaded. Remember, the browser reads the html file from top to bottom. SO loading js on the head will cause an error because it is selecting non-existent elements which the browser has not loaded yet.

If we are working with a team, and someone places the js script on the head — it will cause errors. But if we add an event to the whole JS file called DOMContentLoaded — this event is triggered when all of the DOM elements have been loaded and parsed by the browser

Using DOMContentLoaded will tell our js file to load the code after all DOM’s have been loaded

But generally, it is better to place the script at the end before the body ends

Basically just place all your code in the DOMContentLoaded event — and it will work!!

— -

Refactoring — process of rewriting code while leaving the original behavior exactly the same

  • Code should be easier to read and update while still providing the same functionality

Let’s refactor our createListItem function

But as you can see there is still repetition with appending to LI so we can now create another function

Element[property] is the same as element.property

Now for our listener

Then to even make it more shorter

We can do this because the name of the buttons match the name of the object’s properties

— — — —

Additional Challenges for myself

Removing confirmed when hiding those who have not responded on each list item



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