1
00:00:00,060 --> 00:00:00,580
Welcome back.

2
00:00:00,600 --> 00:00:05,460
We're going to do a quick code review, and there's one minor adjustment that I wanted to make, so

3
00:00:05,460 --> 00:00:09,380
I used Window OnLoad watching the function of Bill.

4
00:00:09,420 --> 00:00:11,290
There's a few different ways to do this.

5
00:00:11,310 --> 00:00:14,700
There's also a document and you can add event listener.

6
00:00:14,820 --> 00:00:20,280
And since I've been doing the ADD event listener functionality, let's keep this consistent.

7
00:00:20,280 --> 00:00:23,840
And that's what I'm going to do, this quick update and this is going to work the same way.

8
00:00:24,030 --> 00:00:26,820
So we're listening for Domme content loaded.

9
00:00:26,950 --> 00:00:32,580
If you're familiar with Chickory, this is the same thing as when we do document ready.

10
00:00:32,580 --> 00:00:34,020
So we're adding an event listener.

11
00:00:34,050 --> 00:00:36,030
Whatever the DOM content is loaded.

12
00:00:36,180 --> 00:00:38,120
That's what we're going to launch the build function.

13
00:00:38,130 --> 00:00:40,830
And when we refresh it, we don't see anything different.

14
00:00:41,100 --> 00:00:43,610
So this was just to add in for consistency.

15
00:00:43,740 --> 00:00:50,070
So I'm using event listeners on all of the event listeners that I've got within this project.

16
00:00:50,100 --> 00:00:54,990
So now let's go through and we're going to list through all of the source code and everything that we've

17
00:00:54,990 --> 00:00:57,600
worked on and do a quick overview of it.

18
00:00:57,630 --> 00:01:02,060
We set up a little bit of styling, so our list looks fairly neat and nice and neat.

19
00:01:02,070 --> 00:01:04,710
And of course, you can update the styling as needed.

20
00:01:04,710 --> 00:01:09,390
We want to focus the core focus of this course on JavaScript, of course.

21
00:01:09,420 --> 00:01:15,210
So keeping the styling to minimal as well as the HTML to a minimal was one of the objectives of this

22
00:01:15,210 --> 00:01:15,660
course.

23
00:01:15,690 --> 00:01:19,880
Next, we came into our JavaScript, so we set up a default list that we're starting with.

24
00:01:19,890 --> 00:01:25,710
We selected the elements that we want to make use of within our project from our document object.

25
00:01:25,710 --> 00:01:29,820
And then we added in some of that listeners, one of the listeners that we added in, we wanted the

26
00:01:29,820 --> 00:01:32,280
ability to add items to our list.

27
00:01:32,280 --> 00:01:36,450
And we have a list, a global object called my list running in the background.

28
00:01:36,450 --> 00:01:41,280
Whenever we've got a new item, we've got an input field here where we can select the value.

29
00:01:41,280 --> 00:01:46,160
And whenever this button gets clicked, that means that the user wants to add a new item to the list.

30
00:01:46,170 --> 00:01:48,780
So what we do is we push it into the array.

31
00:01:48,810 --> 00:01:55,590
So it's just JavaScript array function and where we state the string that we want to add into our array

32
00:01:55,590 --> 00:01:57,210
and then we rebuild our list.

33
00:01:57,360 --> 00:02:01,510
So really the core functionality is all contained within that function built.

34
00:02:01,560 --> 00:02:05,250
We also reset our input field of the new item.

35
00:02:05,280 --> 00:02:08,280
So this is new item, the core sector add item.

36
00:02:08,410 --> 00:02:14,250
So updating this input field value to be blank, that we can't just keep pressing, add item and have

37
00:02:14,250 --> 00:02:16,990
the same item adding in over and over again.

38
00:02:17,010 --> 00:02:22,260
So again, the core functionality is contained within build and this is where we're building out a table

39
00:02:22,260 --> 00:02:28,200
dynamically using JavaScript from from an array object in JavaScript.

40
00:02:28,210 --> 00:02:33,990
So we start by clearing out the output element of this is that output element of the class of output

41
00:02:33,990 --> 00:02:40,050
that we're selecting within an object called output using query selector, selecting the element with

42
00:02:40,050 --> 00:02:41,360
the class of output.

43
00:02:41,370 --> 00:02:45,270
So what we first do is we update the inner Temel of that.

44
00:02:45,490 --> 00:02:50,520
So not to add to my list and then we go ahead and we build out our table.

45
00:02:50,700 --> 00:02:56,190
So at the table we know we need to have a wrapper and the wrapper around a table is the table element

46
00:02:56,190 --> 00:02:58,860
and we know we need to add in a bunch of rows.

47
00:02:58,980 --> 00:03:02,060
So each one of these items needs to be listed in a row.

48
00:03:02,220 --> 00:03:04,860
So that's where we've got the my list loop.

49
00:03:04,860 --> 00:03:07,470
We're looping through all of the my list items.

50
00:03:07,470 --> 00:03:10,140
And as we loop through first we create a row.

51
00:03:10,320 --> 00:03:14,040
So the same way as we created the table, we're creating a row element.

52
00:03:14,040 --> 00:03:18,950
And within that row element, we're adding the index value of the item.

53
00:03:19,260 --> 00:03:24,900
So in case we need to reference it and this is a nice thing about JavaScript within these elements as

54
00:03:24,900 --> 00:03:29,480
we're creating their objects and objects we can add values into.

55
00:03:29,670 --> 00:03:34,920
So this is kind of a value that's sitting in the background and you can really utilize these, especially

56
00:03:34,920 --> 00:03:40,500
if you've got your click events that are outside of where you're creating the element that you can really

57
00:03:40,500 --> 00:03:43,370
make use of these objects because they're going to be sitting in the background.

58
00:03:43,380 --> 00:03:49,740
So as long as you're selecting the table role, then you can also get its index value at any time.

59
00:03:49,920 --> 00:03:55,650
It's a lot easier than trying to select out the name and then searching the sname within the array,

60
00:03:55,800 --> 00:03:58,650
which is another option, but it's a little bit more complex.

61
00:03:58,650 --> 00:04:00,960
So it's always nice to have and that's why that's included.

62
00:04:01,140 --> 00:04:04,760
And within our code, it's not really doing a whole lot, to tell you the truth.

63
00:04:04,950 --> 00:04:10,140
So we've got our cell, so we need to have a couple table cells or TDRS.

64
00:04:10,350 --> 00:04:11,880
So we created our first one.

65
00:04:11,880 --> 00:04:18,510
And within this one, this is where we just simply output the list contents into our inner HTML.

66
00:04:18,700 --> 00:04:23,040
This could also be in our text as well because we're not actually doing any HTML.

67
00:04:23,040 --> 00:04:26,940
So simplify it, keep it as in our text and then we're appending it to the role.

68
00:04:26,940 --> 00:04:31,710
So it takes care of the first cell, which is way easier than the second cell, which is a little bit

69
00:04:31,710 --> 00:04:34,290
more complex, where we've got some advance functionality.

70
00:04:34,590 --> 00:04:37,790
So the second cell, we create it the same way as we created the first one.

71
00:04:37,800 --> 00:04:41,220
So this is a container, the PTD container called Cell to Object.

72
00:04:41,220 --> 00:04:46,650
First we create a span and within the span, this is our ability to delete the items from the list.

73
00:04:46,650 --> 00:04:52,380
So we give it some inter text for the user to see that this is delete and then we add an event listener

74
00:04:52,530 --> 00:04:53,790
to that element.

75
00:04:54,030 --> 00:04:58,890
So to that span, we've added an event listener and then whatever we want to do within that event.

76
00:04:58,890 --> 00:04:59,760
So we've got an add on a.

77
00:04:59,790 --> 00:05:05,350
Dysfunction, we could also have a name function and separate out that function from our build function.

78
00:05:05,360 --> 00:05:06,380
So that's another option.

79
00:05:06,590 --> 00:05:13,160
But because this is very simple and straightforward and as well, we're making use of the value of AI.

80
00:05:13,190 --> 00:05:18,130
So we've got an index value that we're got we've got as we're iterating through.

81
00:05:18,290 --> 00:05:23,740
So it's really easy to splice it out of the array and we only want to select one item.

82
00:05:23,750 --> 00:05:27,590
So that's why we've got index and how many items we want to splice out.

83
00:05:27,740 --> 00:05:33,830
And what that does is that returns the item into item out variable, which we're not using, but it's

84
00:05:33,830 --> 00:05:36,530
always nice to have and it's there if we do need it.

85
00:05:36,740 --> 00:05:42,890
And then we're building out this tool table once again, the new my list values.

86
00:05:43,190 --> 00:05:47,360
And then next we've got another spane and this is the edit span.

87
00:05:47,370 --> 00:05:49,280
So this one's a little bit more complex.

88
00:05:49,280 --> 00:05:53,090
So it starts out the same way where we're adding in ability to click.

89
00:05:53,270 --> 00:05:58,920
And in this one, we're actually highlighting that entire role because we do have it within our row

90
00:05:58,970 --> 00:05:59,510
object.

91
00:05:59,510 --> 00:06:00,770
We can apply styles.

92
00:06:01,060 --> 00:06:06,290
This is a quick way to kind of highlight it and let the user know that we're doing something that that

93
00:06:06,290 --> 00:06:13,040
one is active right now and then going into our first child there so we can also press, edit at edit,

94
00:06:13,250 --> 00:06:13,910
click on it.

95
00:06:13,910 --> 00:06:18,140
And as soon as we click off of it, you see that it goes back to its normal form.

96
00:06:18,500 --> 00:06:23,480
So we've got our input that we're creating, same as we created the other elements circuiting an input

97
00:06:23,690 --> 00:06:30,230
and we're updating the value of the input to match the contents of our text area or in our text.

98
00:06:30,230 --> 00:06:32,360
We're setting the focus on that input.

99
00:06:32,360 --> 00:06:37,510
So whenever we click edit automatically the focus is going, there were a pet.

100
00:06:37,670 --> 00:06:40,700
Actually, this one, let's move that below the element.

101
00:06:40,700 --> 00:06:48,170
And the difference here is that once we've appended it to our HTML, we saw that the focus went there

102
00:06:48,590 --> 00:06:53,020
because we didn't have anywhere to focus because it wasn't within the visible area of our HTML.

103
00:06:53,180 --> 00:06:54,830
So that was a minor adjustment.

104
00:06:54,830 --> 00:06:59,210
And it's always good to kind of go through your code and make sure that everything is functioning as

105
00:06:59,210 --> 00:06:59,510
needed.

106
00:06:59,720 --> 00:07:03,560
So now we've got our focus being set to that active object.

107
00:07:03,740 --> 00:07:09,830
And you see that now once I click off of them, I can't click all of them open anymore because the blur

108
00:07:09,830 --> 00:07:12,230
is going off and we're resetting it.

109
00:07:12,230 --> 00:07:14,240
So we have that one option to update it.

110
00:07:14,330 --> 00:07:16,700
And when we click off of it, the updating is done.

111
00:07:16,970 --> 00:07:22,400
So that works a little bit better, of course, for updating the inner HTML of the temporary element.

112
00:07:22,850 --> 00:07:27,770
We're clearing out the text that's already in there and we're adding in.

113
00:07:27,770 --> 00:07:33,230
And the next we add in the input that we created and then we add the focus on that input.

114
00:07:33,590 --> 00:07:38,630
And we've got an event listener that we've got on that input element, which is blurr.

115
00:07:38,810 --> 00:07:42,260
So by default, we're focusing on that element.

116
00:07:42,440 --> 00:07:47,120
And then basically once the blurr goes off of that element, then we're doing the update.

117
00:07:47,300 --> 00:07:52,700
So we're updating the value of that temp area with the new input value.

118
00:07:52,850 --> 00:07:57,920
And then we're also adding that to the list and we're updating the background color back to white so

119
00:07:57,920 --> 00:07:59,750
that we're taking the highlight off of it.

120
00:07:59,750 --> 00:08:03,050
And then lastly, we're appending all of these elements.

121
00:08:03,320 --> 00:08:09,380
So first we're spending it to our cell to then we're sending it to the role and we're sending it to

122
00:08:09,380 --> 00:08:09,980
the table.

123
00:08:10,190 --> 00:08:15,380
And then lastly, we're spending the whole table to the output, quite a bit of creation of elements.

124
00:08:15,680 --> 00:08:20,240
And by the end of this section, I'm sure you could be really familiar with creating elements on the

125
00:08:20,240 --> 00:08:21,970
fly with JavaScript.

126
00:08:21,980 --> 00:08:24,470
So thanks again for taking this section.

127
00:08:24,560 --> 00:08:28,160
And don't forget, the source code is included so you can trade it for yourself.

128
00:08:28,370 --> 00:08:34,010
Get familiar with functionality of JavaScript interacting with the document object model, creating

129
00:08:34,010 --> 00:08:40,490
elements on the fly, updating manipulating styles and adding in event listeners to the elements that

130
00:08:40,490 --> 00:08:40,880
you're creating.

131
00:08:40,880 --> 00:08:43,790
Take the code, try that for yourself and have some fun with it.

132
00:08:43,880 --> 00:08:45,020
I'll see you in the next one.