1
00:00:00,960 --> 00:00:07,410
This lesson, we need to attach an event listener to the add buttons whenever the add button gets clicked,

2
00:00:07,440 --> 00:00:14,160
that we want to create the selected element and add it to the bottom of this element with the idea of

3
00:00:14,160 --> 00:00:14,570
mean.

4
00:00:14,580 --> 00:00:22,290
So going into our project, we've already set up and added the outer to the button with the button of

5
00:00:22,290 --> 00:00:23,050
name atter.

6
00:00:23,460 --> 00:00:26,280
So let's attach the event listener to atter.

7
00:00:26,520 --> 00:00:33,600
And just as we've got event listener to button, we can attach an event listener to atter and the event

8
00:00:33,600 --> 00:00:35,150
that we're listening for is a click.

9
00:00:35,550 --> 00:00:41,260
And then when it gets clicked, what we want to do is create an element on the fly where he saw how

10
00:00:41,260 --> 00:00:47,790
we can do this within the earlier lesson, where we've got an element that we're using, create element,

11
00:00:48,120 --> 00:00:51,840
the document, create element method in order to create elements dynamically.

12
00:00:51,870 --> 00:00:54,800
We also have the type of element that we want to create with.

13
00:00:54,810 --> 00:00:57,720
And as we can see, this is a select it's got a value.

14
00:00:57,900 --> 00:01:02,550
And when we reference that value right now, it's a div or whatever it changes to.

15
00:01:02,850 --> 00:01:09,780
So for now, we can console, log out the element and output the value in the console whenever ad gets

16
00:01:09,780 --> 00:01:10,140
clicked.

17
00:01:10,410 --> 00:01:11,340
So try that.

18
00:01:11,340 --> 00:01:14,130
And it's a div, it's a paragraph, it's a span.

19
00:01:14,310 --> 00:01:20,760
And this is the same format that we need in order to create an element so we can do that and creating

20
00:01:20,760 --> 00:01:26,160
an element on the fly, we can create using a variable called temp.

21
00:01:26,160 --> 00:01:31,980
And the element that we're going to create is going to be referenced within this element value that

22
00:01:31,980 --> 00:01:32,550
we're adding.

23
00:01:32,880 --> 00:01:35,430
So that's all we need to do in order to add that.

24
00:01:35,880 --> 00:01:42,080
And we can create that and we can append it to the current main element object.

25
00:01:42,360 --> 00:01:46,190
So that's the object with the idea of main.

26
00:01:46,200 --> 00:01:48,780
And let's also add that into an object.

27
00:01:48,810 --> 00:01:58,470
So using document query selector with an idea of mean and using append child, we can append that newly

28
00:01:58,470 --> 00:02:00,270
created element to the page.

29
00:02:00,510 --> 00:02:08,220
Also, let's add in some text content into that element and as a default we can make it the same as

30
00:02:08,220 --> 00:02:09,160
the add element.

31
00:02:09,210 --> 00:02:13,830
And then lastly, the other thing that we need to do is we need to rebuild our dropdown list.

32
00:02:13,830 --> 00:02:18,260
That newly created element is then selectable within the dropdown list.

33
00:02:18,300 --> 00:02:23,480
So after we append it to mean we rebuild dropdown list.

34
00:02:23,490 --> 00:02:25,300
So let's try that and refresh it.

35
00:02:25,470 --> 00:02:31,500
So if we want to add a div into our main area, you can see that now the div has been added.

36
00:02:31,690 --> 00:02:37,770
If I do an inspect on it, I can see the div has been created and let's also see if it was added into

37
00:02:37,770 --> 00:02:38,790
our dropdown list.

38
00:02:39,000 --> 00:02:41,730
And that means that we can also update the content.

39
00:02:42,060 --> 00:02:43,890
We can make it bigger if we want.

40
00:02:44,190 --> 00:02:51,090
We can update and add classes as needed and update the colors, the background colors, as well as the

41
00:02:51,090 --> 00:02:53,280
background, the text colors if we want.

42
00:02:53,460 --> 00:02:58,750
And all of this can now be updated dynamically as we make our selection of the element.

43
00:02:59,100 --> 00:03:01,380
So go ahead and add this into your project.

44
00:03:01,620 --> 00:03:07,920
And coming up next, we're going to add a click event to each one of the elements on the page and have

45
00:03:07,920 --> 00:03:10,250
the ability to remove them by clicking on them.

46
00:03:10,530 --> 00:03:11,640
So that's coming up next.