Welcome back.
In this lesson, we're going to create a dropdown with a number of different classes that we can select
from and add these classes in and also remove them as well so we can toggle the classes depending on
the list.
So padded can be another class that we can have.
And this class will add in some padding and we'll do one more class and you get the idea.
You can do quite a bit of different classes here and the next we need to construct our dropdown so this
can be a three pick border, but we make it dotted and we'll make it blue.
So going down to where we've got our selection process, let's go ahead and create a dropdown and we
can call it toggle classes.
And this is going to be a select element.
And I'll give it a name of classes and we're going to populate this with JavaScript.
So to make things more interesting and of course, we do want to focus on JavaScript as much as possible.
So let's first take an array and the rate is going to list out all of the classes so you can call this
class array and we'll have the first items blank and we'll loop through will iterate through the available
classes.
So we've got padded class, we've got the bigger class, and then we also have the border add class.
So I'm just using the same class names that I have up here and I've just put them into the array.
So one, we output class array.
You can see we've got a listing of all of the classes there, so we're not able to dynamically get those.
We're outputting them here within the class list.
So what we want to do is add these in to the dropdown.
So we already saw that we've got an event listener.
So there's another event listener that we're going to introduce and that's the DOM content loaded.
And if you're familiar with jaggery, this is the same event listener that makes sure that the document
is ready.
So this is Dom content loaded.
And usually I do apply this event listener whenever I want to make sure that the DOM content has loaded.
So as the name indicates, we want to make sure that the element is present before I try to add content
to it.
And we do have this select dropdown, so I want to select that and I want to update that content dynamically.
We can also add in that select select or we can call it select classes and then using the document query
selector, let's select that element.
So this is a select element and we can also, just as we did with the inputs, we can specify the name
that we're looking for.
So this one has a name of classes and we just closed that off so we can just always double check to
make sure that we did get the right element.
So we do have the right element.
So now we're ready to add to that element.
We can use a for loop to iterate through all of the class list array.
So using the class blistery we can use for each and that will execute each one of the elements in the
array with the function that's provided.
So adding in a function and we can give it a name of item and then if we cancel log item you're going
to see in the console, we're going to see all of the items that are available within the class list
array.
So what it's doing is it's iterating through.
It's got four items in there and it's outputting those item values so we can use those to construct
our options in our select list.
And there's a number of ways to do this.
And usually the way that I usually like to do it is I'll create the object, the element.
So using document, create element method in JavaScript you can create whichever type of elements you
want.
And in this case, we want to create an option because we know what the select list, we've got options
and each option is going to have a value associated with it as well as we've also got the value that
the user is able to see.
So we're able to set two different values.
So as we iterate through and just as we selected the values of the inputs, we can select those values
so we can select it to item.
So what's going to happen here?
The value that's shown to the user is going to be this one here and this one here and this one here.
And also let's update the inner HTML of the item.
So we'll update that as item and move this down.
So this is right down at the bottom.
Clean that up.
So lastly, what we want to do is we want to spend this option, this value.
So if I output option, this is the element that we're constructing.
You can see that we're constructing these options.
So all we have to do is add them into the cell classes object.
And the way that we can do that is we use a method called append child.
And this is actually going to add these freshly created options.
To the select dropdown, so we go here, you can see that now they've all been added and if we go inspect,
you can see that it's available now within the HTML.
And these are all the options that we dynamically created with JavaScript.
I'm also going to add in a line break here, and this is fairly dynamic because now whenever we make
these selections, we can automatically add that into the class.
And there's one other thing before we conclude, and that's getting the value that's contained within
that dropdown list.
And in order to do that, we can do the social classes and getting the value of that, remove out the
other ones.
And you're going to see that whatever I've selected now and when I press update, you're going to see
that the class is in that value so we can take that value.
And instead of hard coding bigger, we're going to dynamically update whatever class value is here.
So we can see we can add the padding, we can add bigger.
If we want to remove bigger, we just toggle it.
And this in this case, we need to remove out the blank option.
You can't toggle a blank class.
So if you're simply adding and removing classes, you might want to blank there.
If you're updating the class list in its entirety and if you're adding and removing classes, you can
do this as well with the update.
So go ahead and make this and add this into your project and build out that option dynamically using
JavaScript, construct those elements with the dropdown and as well added in and add the functionality
into your element updater.
So more to come in the upcoming lessons on how to interact with the DOM, select elements, manipulate
elements dynamically using JavaScript.