1
00:00:00,390 --> 00:00:01,080
Welcome back.

2
00:00:01,080 --> 00:00:05,910
In this lesson, we're going to create a dropdown with a number of different classes that we can select

3
00:00:05,910 --> 00:00:13,560
from and add these classes in and also remove them as well so we can toggle the classes depending on

4
00:00:13,560 --> 00:00:14,130
the list.

5
00:00:14,490 --> 00:00:17,550
So padded can be another class that we can have.

6
00:00:17,790 --> 00:00:23,960
And this class will add in some padding and we'll do one more class and you get the idea.

7
00:00:23,970 --> 00:00:30,660
You can do quite a bit of different classes here and the next we need to construct our dropdown so this

8
00:00:30,660 --> 00:00:35,140
can be a three pick border, but we make it dotted and we'll make it blue.

9
00:00:35,160 --> 00:00:42,480
So going down to where we've got our selection process, let's go ahead and create a dropdown and we

10
00:00:42,480 --> 00:00:44,520
can call it toggle classes.

11
00:00:44,640 --> 00:00:46,920
And this is going to be a select element.

12
00:00:46,920 --> 00:00:51,680
And I'll give it a name of classes and we're going to populate this with JavaScript.

13
00:00:52,020 --> 00:00:58,210
So to make things more interesting and of course, we do want to focus on JavaScript as much as possible.

14
00:00:58,500 --> 00:01:04,380
So let's first take an array and the rate is going to list out all of the classes so you can call this

15
00:01:04,380 --> 00:01:11,460
class array and we'll have the first items blank and we'll loop through will iterate through the available

16
00:01:11,460 --> 00:01:12,020
classes.

17
00:01:12,030 --> 00:01:21,030
So we've got padded class, we've got the bigger class, and then we also have the border add class.

18
00:01:21,360 --> 00:01:26,700
So I'm just using the same class names that I have up here and I've just put them into the array.

19
00:01:26,910 --> 00:01:29,940
So one, we output class array.

20
00:01:30,120 --> 00:01:35,280
You can see we've got a listing of all of the classes there, so we're not able to dynamically get those.

21
00:01:35,460 --> 00:01:37,830
We're outputting them here within the class list.

22
00:01:38,040 --> 00:01:41,480
So what we want to do is add these in to the dropdown.

23
00:01:41,760 --> 00:01:43,920
So we already saw that we've got an event listener.

24
00:01:43,930 --> 00:01:48,900
So there's another event listener that we're going to introduce and that's the DOM content loaded.

25
00:01:49,050 --> 00:01:54,840
And if you're familiar with jaggery, this is the same event listener that makes sure that the document

26
00:01:54,840 --> 00:01:55,620
is ready.

27
00:01:55,650 --> 00:01:58,230
So this is Dom content loaded.

28
00:01:58,230 --> 00:02:05,340
And usually I do apply this event listener whenever I want to make sure that the DOM content has loaded.

29
00:02:05,490 --> 00:02:10,980
So as the name indicates, we want to make sure that the element is present before I try to add content

30
00:02:10,980 --> 00:02:11,340
to it.

31
00:02:11,550 --> 00:02:18,520
And we do have this select dropdown, so I want to select that and I want to update that content dynamically.

32
00:02:18,630 --> 00:02:27,960
We can also add in that select select or we can call it select classes and then using the document query

33
00:02:27,960 --> 00:02:30,660
selector, let's select that element.

34
00:02:30,960 --> 00:02:37,560
So this is a select element and we can also, just as we did with the inputs, we can specify the name

35
00:02:37,560 --> 00:02:38,520
that we're looking for.

36
00:02:38,550 --> 00:02:44,550
So this one has a name of classes and we just closed that off so we can just always double check to

37
00:02:44,550 --> 00:02:46,920
make sure that we did get the right element.

38
00:02:46,950 --> 00:02:48,230
So we do have the right element.

39
00:02:48,450 --> 00:02:51,170
So now we're ready to add to that element.

40
00:02:51,420 --> 00:02:56,390
We can use a for loop to iterate through all of the class list array.

41
00:02:56,760 --> 00:03:04,110
So using the class blistery we can use for each and that will execute each one of the elements in the

42
00:03:04,110 --> 00:03:06,310
array with the function that's provided.

43
00:03:06,330 --> 00:03:14,460
So adding in a function and we can give it a name of item and then if we cancel log item you're going

44
00:03:14,460 --> 00:03:19,320
to see in the console, we're going to see all of the items that are available within the class list

45
00:03:19,320 --> 00:03:19,670
array.

46
00:03:19,920 --> 00:03:22,020
So what it's doing is it's iterating through.

47
00:03:22,170 --> 00:03:29,040
It's got four items in there and it's outputting those item values so we can use those to construct

48
00:03:29,040 --> 00:03:32,280
our options in our select list.

49
00:03:32,730 --> 00:03:34,590
And there's a number of ways to do this.

50
00:03:34,860 --> 00:03:40,920
And usually the way that I usually like to do it is I'll create the object, the element.

51
00:03:41,100 --> 00:03:48,420
So using document, create element method in JavaScript you can create whichever type of elements you

52
00:03:48,420 --> 00:03:48,750
want.

53
00:03:48,960 --> 00:03:54,570
And in this case, we want to create an option because we know what the select list, we've got options

54
00:03:54,810 --> 00:04:02,700
and each option is going to have a value associated with it as well as we've also got the value that

55
00:04:02,700 --> 00:04:03,900
the user is able to see.

56
00:04:03,910 --> 00:04:05,990
So we're able to set two different values.

57
00:04:06,000 --> 00:04:12,960
So as we iterate through and just as we selected the values of the inputs, we can select those values

58
00:04:12,960 --> 00:04:14,410
so we can select it to item.

59
00:04:14,670 --> 00:04:16,020
So what's going to happen here?

60
00:04:16,140 --> 00:04:21,750
The value that's shown to the user is going to be this one here and this one here and this one here.

61
00:04:22,260 --> 00:04:27,240
And also let's update the inner HTML of the item.

62
00:04:27,240 --> 00:04:30,270
So we'll update that as item and move this down.

63
00:04:30,300 --> 00:04:31,770
So this is right down at the bottom.

64
00:04:31,770 --> 00:04:32,460
Clean that up.

65
00:04:32,700 --> 00:04:37,030
So lastly, what we want to do is we want to spend this option, this value.

66
00:04:37,470 --> 00:04:41,300
So if I output option, this is the element that we're constructing.

67
00:04:41,310 --> 00:04:43,980
You can see that we're constructing these options.

68
00:04:44,220 --> 00:04:49,320
So all we have to do is add them into the cell classes object.

69
00:04:49,740 --> 00:04:54,920
And the way that we can do that is we use a method called append child.

70
00:04:55,200 --> 00:04:59,520
And this is actually going to add these freshly created options.

71
00:04:59,830 --> 00:05:07,170
To the select dropdown, so we go here, you can see that now they've all been added and if we go inspect,

72
00:05:07,320 --> 00:05:10,230
you can see that it's available now within the HTML.

73
00:05:10,320 --> 00:05:14,470
And these are all the options that we dynamically created with JavaScript.

74
00:05:14,760 --> 00:05:20,790
I'm also going to add in a line break here, and this is fairly dynamic because now whenever we make

75
00:05:20,790 --> 00:05:24,450
these selections, we can automatically add that into the class.

76
00:05:24,630 --> 00:05:30,450
And there's one other thing before we conclude, and that's getting the value that's contained within

77
00:05:30,450 --> 00:05:32,070
that dropdown list.

78
00:05:32,310 --> 00:05:38,460
And in order to do that, we can do the social classes and getting the value of that, remove out the

79
00:05:38,460 --> 00:05:39,030
other ones.

80
00:05:39,240 --> 00:05:44,490
And you're going to see that whatever I've selected now and when I press update, you're going to see

81
00:05:44,490 --> 00:05:50,130
that the class is in that value so we can take that value.

82
00:05:50,460 --> 00:05:57,270
And instead of hard coding bigger, we're going to dynamically update whatever class value is here.

83
00:05:57,450 --> 00:06:00,750
So we can see we can add the padding, we can add bigger.

84
00:06:00,810 --> 00:06:03,440
If we want to remove bigger, we just toggle it.

85
00:06:03,450 --> 00:06:07,020
And this in this case, we need to remove out the blank option.

86
00:06:07,080 --> 00:06:09,110
You can't toggle a blank class.

87
00:06:09,300 --> 00:06:13,170
So if you're simply adding and removing classes, you might want to blank there.

88
00:06:13,410 --> 00:06:18,930
If you're updating the class list in its entirety and if you're adding and removing classes, you can

89
00:06:18,930 --> 00:06:20,380
do this as well with the update.

90
00:06:20,460 --> 00:06:26,370
So go ahead and make this and add this into your project and build out that option dynamically using

91
00:06:26,370 --> 00:06:33,330
JavaScript, construct those elements with the dropdown and as well added in and add the functionality

92
00:06:33,510 --> 00:06:35,870
into your element updater.

93
00:06:36,030 --> 00:06:41,670
So more to come in the upcoming lessons on how to interact with the DOM, select elements, manipulate

94
00:06:41,670 --> 00:06:44,370
elements dynamically using JavaScript.