1
00:00:00,060 --> 00:00:06,120
Great job on finishing the section, so now you should have a fully functional, dynamic and interactive

2
00:00:06,360 --> 00:00:13,080
Dom Interactor, I call this application The Dominator because it gives you a great opportunity to practice

3
00:00:13,080 --> 00:00:18,160
and get more familiar with element manipulation and the document object model.

4
00:00:18,180 --> 00:00:19,200
So let's try that out.

5
00:00:19,480 --> 00:00:22,500
We've got an ADD element option dropdown.

6
00:00:22,530 --> 00:00:30,750
So this is dynamically created with JavaScript, so allows us to add new elements to our main screen

7
00:00:30,750 --> 00:00:31,150
area.

8
00:00:31,470 --> 00:00:37,530
We can also select those elements in the dropdown and update the content that's contained within them.

9
00:00:37,710 --> 00:00:40,320
We can update the background color if you want.

10
00:00:40,530 --> 00:00:44,040
We can also update the font color as well.

11
00:00:44,050 --> 00:00:46,670
So there's quite a few options that are available to us.

12
00:00:47,160 --> 00:00:50,160
We can also add in different classes if we want.

13
00:00:50,430 --> 00:00:56,460
So we've got padded bigger and this is toggling the classes so we can do padded.

14
00:00:56,610 --> 00:01:00,300
And if we do an update, if we want to remove padded, we just click it again.

15
00:01:00,540 --> 00:01:04,920
So that will toggle the class to the elements of Foo and add padded.

16
00:01:04,950 --> 00:01:11,090
You can see it gets added there and we can select any one of the elements and make updates to them.

17
00:01:11,100 --> 00:01:18,240
So if we want them all to have the same classes and the same content, you can easily update those and

18
00:01:18,240 --> 00:01:18,930
add that in.

19
00:01:19,200 --> 00:01:25,170
If we want to add a brand new element, we can always add a brand new element, select it and update

20
00:01:25,170 --> 00:01:25,290
it.

21
00:01:25,290 --> 00:01:28,440
So we always have to select it from the dropdown and update it.

22
00:01:28,710 --> 00:01:34,470
And then lastly, we also added a last option where we can click the elements and remove them from the

23
00:01:34,470 --> 00:01:34,890
page.

24
00:01:35,130 --> 00:01:39,960
So if we've got elements that we no longer want, we can simply click them and that's going to remove

25
00:01:39,960 --> 00:01:41,250
them from the page.

26
00:01:41,430 --> 00:01:46,800
And if you go into the HTML, you can see that they are actually being removed out.

27
00:01:46,980 --> 00:01:50,760
So these are all contents of the element with the idea of.

28
00:01:51,390 --> 00:01:55,260
Let's take a look at our source code and going into the source code.

29
00:01:55,270 --> 00:01:56,790
So we created a few classes.

30
00:01:57,000 --> 00:02:01,340
These were to be able to toggle classes within JavaScript.

31
00:02:01,500 --> 00:02:09,690
We also have our main object, selecting all of the elements that are immediately within mean and applying

32
00:02:09,690 --> 00:02:14,460
a border to those so that we can actually visually see where their boundaries are.

33
00:02:14,670 --> 00:02:16,950
And then we created a form in this form.

34
00:02:17,100 --> 00:02:24,090
Dynamic form is the main core of what we built as it gives us the ability and full control over adding

35
00:02:24,090 --> 00:02:31,170
elements, updating elements and updating content, adding Stotz classes, toggling classes and a whole

36
00:02:31,170 --> 00:02:31,710
lot more.

37
00:02:32,100 --> 00:02:35,700
So all of this was HTML, just regular HTML.

38
00:02:35,880 --> 00:02:41,760
These inputs, the color type inputs, these are HTML5 inputs type color.

39
00:02:41,760 --> 00:02:46,980
So it doesn't work across some of the older browsers, but all the new browsers are able to handle this.

40
00:02:47,160 --> 00:02:53,610
So if you are having trouble with the type equals color input, then you've got to upgrade your browser

41
00:02:53,790 --> 00:02:55,830
and or try out Chrome.

42
00:02:56,130 --> 00:03:02,790
As I always suggest that Chrome is one of the more modern browsers that has all the modern capabilities

43
00:03:02,970 --> 00:03:03,910
generally within it.

44
00:03:04,440 --> 00:03:09,540
Next, we created some buttons to add the interaction, to create the interaction with the user.

45
00:03:09,810 --> 00:03:18,580
And we've got some basic startup content within our main element that we set up two different arrays.

46
00:03:18,810 --> 00:03:22,740
So one of the race was a listing of all of the different classes.

47
00:03:22,950 --> 00:03:29,680
We want to make this as dynamic as possible and then we generate the dropdown using these arrays.

48
00:03:29,680 --> 00:03:34,410
So we have a dropdown for the classes and then we have a dropdown for the different types of elements

49
00:03:34,410 --> 00:03:38,010
that we're allowing the user to create next to came to the selection.

50
00:03:38,030 --> 00:03:40,910
So we selected each one of these inputs.

51
00:03:41,190 --> 00:03:47,790
So there was quite a bit of code here where we're using query selector to make selection of the appropriate

52
00:03:47,790 --> 00:03:51,240
elements and then add them in as JavaScript objects.

53
00:03:51,390 --> 00:03:55,560
And then once the connection has been made with the JavaScript object, then we can manipulate, we

54
00:03:55,560 --> 00:04:01,320
can get content from the element, we can add event listeners and a whole bunch of really amazing things.

55
00:04:01,830 --> 00:04:05,610
Then we set up a global object called Node Lyster.

56
00:04:05,740 --> 00:04:11,480
So this is where our list of all of the elements that are contained within Main are going to get listed.

57
00:04:11,790 --> 00:04:16,920
So we've got a full list of them and this is global, so we can access it from any one of the functions.

58
00:04:17,070 --> 00:04:19,910
We add an event listener to the button atter.

59
00:04:20,100 --> 00:04:27,240
So this gave us the ability to click and create a new element and then add that element to the main

60
00:04:27,240 --> 00:04:35,040
object as well as we had the option to update the inner text content as well as add an event listener.

61
00:04:35,190 --> 00:04:38,970
And then every time we have some changes, we rebuild our dropdown list.

62
00:04:38,970 --> 00:04:44,340
So we call that function dropdown builder every time there's some changes within the elements, if we've

63
00:04:44,340 --> 00:04:50,670
added or if we've removed them or just as we're launching the application, we also added another event

64
00:04:50,670 --> 00:04:54,950
listener to the button where we can update.

65
00:04:54,960 --> 00:04:57,420
So the update button was as important button.

66
00:04:57,600 --> 00:04:59,850
And this basically goes through all of the.

67
00:04:59,880 --> 00:05:08,400
Elements and updates and sets the text, the inner text, and equals to the value of the input and get

68
00:05:08,400 --> 00:05:14,730
updates, the background, text color, so updates the colors as well as toggles the classes of the

69
00:05:14,730 --> 00:05:20,730
selected classes that are within the dropdown and giving us all of the functionality to update those

70
00:05:20,730 --> 00:05:22,940
elements using the input fields.

71
00:05:23,550 --> 00:05:27,030
Then we have another event listener and this is the DOM content loaded.

72
00:05:27,210 --> 00:05:32,940
So this is just a function that fires off, an event that fires off whenever the DOM content is loaded.

73
00:05:33,090 --> 00:05:39,420
And usually it's applied whenever you're looking to make some immediate updates to the element content

74
00:05:39,630 --> 00:05:41,760
and you want to make sure the DOM has loaded.

75
00:05:41,850 --> 00:05:45,090
So we make sure those elements are there before you try to update them.

76
00:05:45,180 --> 00:05:46,860
And that's why we're using that event.

77
00:05:46,860 --> 00:05:48,510
Listener of content loaded.

78
00:05:48,690 --> 00:05:56,860
You can also use the OnLoad event as well and we loop through the different classes and apply create

79
00:05:56,880 --> 00:05:57,480
the elements.

80
00:05:57,480 --> 00:06:02,280
The so this gives us the options that we have for the dropdown list.

81
00:06:02,490 --> 00:06:08,370
So we're creating the option tag, adding a value, adding the inner HTML to it and then appending it

82
00:06:08,550 --> 00:06:10,290
to the dropdown list.

83
00:06:10,500 --> 00:06:15,220
And we do the same thing for the different elements as options in the array.

84
00:06:15,480 --> 00:06:19,560
So this gives us a list of all the available different types of elements we can create.

85
00:06:19,920 --> 00:06:22,920
Then we update Node Lyster and node.

86
00:06:22,920 --> 00:06:30,120
Lyster goes through all of the elements that are contained within the main object and list them out

87
00:06:30,120 --> 00:06:33,630
into node lists, creates a node list and list those out.

88
00:06:33,960 --> 00:06:37,770
And then we've got remover elements which we run.

89
00:06:37,770 --> 00:06:42,240
And this adds event listeners to be able to remove the elements when we click them.

90
00:06:42,420 --> 00:06:49,200
So we click and we're able to remove it and then we rebuild the dropdown list just as we finish up here.

91
00:06:49,350 --> 00:06:53,520
So make sure that we actually we're not rebuilding, actually, we're just building it for the first

92
00:06:53,520 --> 00:06:53,910
time.

93
00:06:54,040 --> 00:06:57,780
In this instance, we've got the remove element function.

94
00:06:57,930 --> 00:07:02,310
So this is the one that fires off whenever one of the elements gets clicked.

95
00:07:02,430 --> 00:07:06,780
So we're referencing it to event listeners as we're first here.

96
00:07:06,780 --> 00:07:09,360
We're adding that to all of the elements.

97
00:07:09,540 --> 00:07:16,380
And then if we create new elements, we add that as well as an option to be able to click and remove

98
00:07:16,380 --> 00:07:18,110
the freshly created element.

99
00:07:18,150 --> 00:07:20,100
We've got the remove elements.

100
00:07:20,100 --> 00:07:26,730
And then lastly, we've got our dropdown builder where we loop through the we rebuild the node list

101
00:07:26,730 --> 00:07:28,230
again, make sure that it's up to date.

102
00:07:28,590 --> 00:07:34,950
And then we loop through and we iterate through getting the value of the item, the index value, and

103
00:07:34,950 --> 00:07:39,060
then also updating the tag names so that we can see the tag name represented here.

104
00:07:39,390 --> 00:07:43,860
And this is why it's uppercase, because it's getting the value from tag name and those are all uppercase.

105
00:07:44,100 --> 00:07:47,130
And then we're appending it to the dropdown list.

106
00:07:47,370 --> 00:07:49,080
So this is constantly updating.

107
00:07:49,080 --> 00:07:52,830
So as we update the elements that are on the page, we're getting more divs there.

108
00:07:52,830 --> 00:07:56,380
So we're always running the dropdown list every time we're making the update.

109
00:07:56,400 --> 00:07:58,200
Thanks again for taking the section.

110
00:07:58,410 --> 00:08:03,600
And I hope you had a opportunity to practice and get more familiar with Dom and Dom manipulation.

111
00:08:03,630 --> 00:08:06,470
If you have any questions or comments, I'm always happy to help.

112
00:08:06,480 --> 00:08:07,680
I'll see you in the next one.

113
00:08:07,900 --> 00:08:09,270
Thanks again for taking the course.