These are my notes:
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