Great job on finishing the section, so now you should have a fully functional, dynamic and interactive
Dom Interactor, I call this application The Dominator because it gives you a great opportunity to practice
and get more familiar with element manipulation and the document object model.
So let's try that out.
We've got an ADD element option dropdown.
So this is dynamically created with JavaScript, so allows us to add new elements to our main screen
area.
We can also select those elements in the dropdown and update the content that's contained within them.
We can update the background color if you want.
We can also update the font color as well.
So there's quite a few options that are available to us.
We can also add in different classes if we want.
So we've got padded bigger and this is toggling the classes so we can do padded.
And if we do an update, if we want to remove padded, we just click it again.
So that will toggle the class to the elements of Foo and add padded.
You can see it gets added there and we can select any one of the elements and make updates to them.
So if we want them all to have the same classes and the same content, you can easily update those and
add that in.
If we want to add a brand new element, we can always add a brand new element, select it and update
it.
So we always have to select it from the dropdown and update it.
And then lastly, we also added a last option where we can click the elements and remove them from the
page.
So if we've got elements that we no longer want, we can simply click them and that's going to remove
them from the page.
And if you go into the HTML, you can see that they are actually being removed out.
So these are all contents of the element with the idea of.
Let's take a look at our source code and going into the source code.
So we created a few classes.
These were to be able to toggle classes within JavaScript.
We also have our main object, selecting all of the elements that are immediately within mean and applying
a border to those so that we can actually visually see where their boundaries are.
And then we created a form in this form.
Dynamic form is the main core of what we built as it gives us the ability and full control over adding
elements, updating elements and updating content, adding Stotz classes, toggling classes and a whole
lot more.
So all of this was HTML, just regular HTML.
These inputs, the color type inputs, these are HTML5 inputs type color.
So it doesn't work across some of the older browsers, but all the new browsers are able to handle this.
So if you are having trouble with the type equals color input, then you've got to upgrade your browser
and or try out Chrome.
As I always suggest that Chrome is one of the more modern browsers that has all the modern capabilities
generally within it.
Next, we created some buttons to add the interaction, to create the interaction with the user.
And we've got some basic startup content within our main element that we set up two different arrays.
So one of the race was a listing of all of the different classes.
We want to make this as dynamic as possible and then we generate the dropdown using these arrays.
So we have a dropdown for the classes and then we have a dropdown for the different types of elements
that we're allowing the user to create next to came to the selection.
So we selected each one of these inputs.
So there was quite a bit of code here where we're using query selector to make selection of the appropriate
elements and then add them in as JavaScript objects.
And then once the connection has been made with the JavaScript object, then we can manipulate, we
can get content from the element, we can add event listeners and a whole bunch of really amazing things.
Then we set up a global object called Node Lyster.
So this is where our list of all of the elements that are contained within Main are going to get listed.
So we've got a full list of them and this is global, so we can access it from any one of the functions.
We add an event listener to the button atter.
So this gave us the ability to click and create a new element and then add that element to the main
object as well as we had the option to update the inner text content as well as add an event listener.
And then every time we have some changes, we rebuild our dropdown list.
So we call that function dropdown builder every time there's some changes within the elements, if we've
added or if we've removed them or just as we're launching the application, we also added another event
listener to the button where we can update.
So the update button was as important button.
And this basically goes through all of the.
Elements and updates and sets the text, the inner text, and equals to the value of the input and get
updates, the background, text color, so updates the colors as well as toggles the classes of the
selected classes that are within the dropdown and giving us all of the functionality to update those
elements using the input fields.
Then we have another event listener and this is the DOM content loaded.
So this is just a function that fires off, an event that fires off whenever the DOM content is loaded.
And usually it's applied whenever you're looking to make some immediate updates to the element content
and you want to make sure the DOM has loaded.
So we make sure those elements are there before you try to update them.
And that's why we're using that event.
Listener of content loaded.
You can also use the OnLoad event as well and we loop through the different classes and apply create
the elements.
The so this gives us the options that we have for the dropdown list.
So we're creating the option tag, adding a value, adding the inner HTML to it and then appending it
to the dropdown list.
And we do the same thing for the different elements as options in the array.
So this gives us a list of all the available different types of elements we can create.
Then we update Node Lyster and node.
Lyster goes through all of the elements that are contained within the main object and list them out
into node lists, creates a node list and list those out.
And then we've got remover elements which we run.
And this adds event listeners to be able to remove the elements when we click them.
So we click and we're able to remove it and then we rebuild the dropdown list just as we finish up here.
So make sure that we actually we're not rebuilding, actually, we're just building it for the first
time.
In this instance, we've got the remove element function.
So this is the one that fires off whenever one of the elements gets clicked.
So we're referencing it to event listeners as we're first here.
We're adding that to all of the elements.
And then if we create new elements, we add that as well as an option to be able to click and remove
the freshly created element.
We've got the remove elements.
And then lastly, we've got our dropdown builder where we loop through the we rebuild the node list
again, make sure that it's up to date.
And then we loop through and we iterate through getting the value of the item, the index value, and
then also updating the tag names so that we can see the tag name represented here.
And this is why it's uppercase, because it's getting the value from tag name and those are all uppercase.
And then we're appending it to the dropdown list.
So this is constantly updating.
So as we update the elements that are on the page, we're getting more divs there.
So we're always running the dropdown list every time we're making the update.
Thanks again for taking the section.
And I hope you had a opportunity to practice and get more familiar with Dom and Dom manipulation.
If you have any questions or comments, I'm always happy to help.
I'll see you in the next one.
Thanks again for taking the course.