Welcome back.
We're going to do a quick code review, and there's one minor adjustment that I wanted to make, so
I used Window OnLoad watching the function of Bill.
There's a few different ways to do this.
There's also a document and you can add event listener.
And since I've been doing the ADD event listener functionality, let's keep this consistent.
And that's what I'm going to do, this quick update and this is going to work the same way.
So we're listening for Domme content loaded.
If you're familiar with Chickory, this is the same thing as when we do document ready.
So we're adding an event listener.
Whatever the DOM content is loaded.
That's what we're going to launch the build function.
And when we refresh it, we don't see anything different.
So this was just to add in for consistency.
So I'm using event listeners on all of the event listeners that I've got within this project.
So now let's go through and we're going to list through all of the source code and everything that we've
worked on and do a quick overview of it.
We set up a little bit of styling, so our list looks fairly neat and nice and neat.
And of course, you can update the styling as needed.
We want to focus the core focus of this course on JavaScript, of course.
So keeping the styling to minimal as well as the HTML to a minimal was one of the objectives of this
course.
Next, we came into our JavaScript, so we set up a default list that we're starting with.
We selected the elements that we want to make use of within our project from our document object.
And then we added in some of that listeners, one of the listeners that we added in, we wanted the
ability to add items to our list.
And we have a list, a global object called my list running in the background.
Whenever we've got a new item, we've got an input field here where we can select the value.
And whenever this button gets clicked, that means that the user wants to add a new item to the list.
So what we do is we push it into the array.
So it's just JavaScript array function and where we state the string that we want to add into our array
and then we rebuild our list.
So really the core functionality is all contained within that function built.
We also reset our input field of the new item.
So this is new item, the core sector add item.
So updating this input field value to be blank, that we can't just keep pressing, add item and have
the same item adding in over and over again.
So again, the core functionality is contained within build and this is where we're building out a table
dynamically using JavaScript from from an array object in JavaScript.
So we start by clearing out the output element of this is that output element of the class of output
that we're selecting within an object called output using query selector, selecting the element with
the class of output.
So what we first do is we update the inner Temel of that.
So not to add to my list and then we go ahead and we build out our table.
So at the table we know we need to have a wrapper and the wrapper around a table is the table element
and we know we need to add in a bunch of rows.
So each one of these items needs to be listed in a row.
So that's where we've got the my list loop.
We're looping through all of the my list items.
And as we loop through first we create a row.
So the same way as we created the table, we're creating a row element.
And within that row element, we're adding the index value of the item.
So in case we need to reference it and this is a nice thing about JavaScript within these elements as
we're creating their objects and objects we can add values into.
So this is kind of a value that's sitting in the background and you can really utilize these, especially
if you've got your click events that are outside of where you're creating the element that you can really
make use of these objects because they're going to be sitting in the background.
So as long as you're selecting the table role, then you can also get its index value at any time.
It's a lot easier than trying to select out the name and then searching the sname within the array,
which is another option, but it's a little bit more complex.
So it's always nice to have and that's why that's included.
And within our code, it's not really doing a whole lot, to tell you the truth.
So we've got our cell, so we need to have a couple table cells or TDRS.
So we created our first one.
And within this one, this is where we just simply output the list contents into our inner HTML.
This could also be in our text as well because we're not actually doing any HTML.
So simplify it, keep it as in our text and then we're appending it to the role.
So it takes care of the first cell, which is way easier than the second cell, which is a little bit
more complex, where we've got some advance functionality.
So the second cell, we create it the same way as we created the first one.
So this is a container, the PTD container called Cell to Object.
First we create a span and within the span, this is our ability to delete the items from the list.
So we give it some inter text for the user to see that this is delete and then we add an event listener
to that element.
So to that span, we've added an event listener and then whatever we want to do within that event.
So we've got an add on a.
Dysfunction, we could also have a name function and separate out that function from our build function.
So that's another option.
But because this is very simple and straightforward and as well, we're making use of the value of AI.
So we've got an index value that we're got we've got as we're iterating through.
So it's really easy to splice it out of the array and we only want to select one item.
So that's why we've got index and how many items we want to splice out.
And what that does is that returns the item into item out variable, which we're not using, but it's
always nice to have and it's there if we do need it.
And then we're building out this tool table once again, the new my list values.
And then next we've got another spane and this is the edit span.
So this one's a little bit more complex.
So it starts out the same way where we're adding in ability to click.
And in this one, we're actually highlighting that entire role because we do have it within our row
object.
We can apply styles.
This is a quick way to kind of highlight it and let the user know that we're doing something that that
one is active right now and then going into our first child there so we can also press, edit at edit,
click on it.
And as soon as we click off of it, you see that it goes back to its normal form.
So we've got our input that we're creating, same as we created the other elements circuiting an input
and we're updating the value of the input to match the contents of our text area or in our text.
We're setting the focus on that input.
So whenever we click edit automatically the focus is going, there were a pet.
Actually, this one, let's move that below the element.
And the difference here is that once we've appended it to our HTML, we saw that the focus went there
because we didn't have anywhere to focus because it wasn't within the visible area of our HTML.
So that was a minor adjustment.
And it's always good to kind of go through your code and make sure that everything is functioning as
needed.
So now we've got our focus being set to that active object.
And you see that now once I click off of them, I can't click all of them open anymore because the blur
is going off and we're resetting it.
So we have that one option to update it.
And when we click off of it, the updating is done.
So that works a little bit better, of course, for updating the inner HTML of the temporary element.
We're clearing out the text that's already in there and we're adding in.
And the next we add in the input that we created and then we add the focus on that input.
And we've got an event listener that we've got on that input element, which is blurr.
So by default, we're focusing on that element.
And then basically once the blurr goes off of that element, then we're doing the update.
So we're updating the value of that temp area with the new input value.
And then we're also adding that to the list and we're updating the background color back to white so
that we're taking the highlight off of it.
And then lastly, we're appending all of these elements.
So first we're spending it to our cell to then we're sending it to the role and we're sending it to
the table.
And then lastly, we're spending the whole table to the output, quite a bit of creation of elements.
And by the end of this section, I'm sure you could be really familiar with creating elements on the
fly with JavaScript.
So thanks again for taking this section.
And don't forget, the source code is included so you can trade it for yourself.
Get familiar with functionality of JavaScript interacting with the document object model, creating
elements on the fly, updating manipulating styles and adding in event listeners to the elements that
you're creating.
Take the code, try that for yourself and have some fun with it.
I'll see you in the next one.