1
00:00:00,420 --> 00:00:01,350
Welcome back.

2
00:00:01,360 --> 00:00:06,960
In this lesson, we're going to add the ability to edit the elements, and this is, as I said, a little

3
00:00:06,960 --> 00:00:13,290
bit more tricky than the delete because we need to have the ability to update the my list changes maybe

4
00:00:13,290 --> 00:00:18,320
into an input field and then have the ability for the user to update some of that content.

5
00:00:18,660 --> 00:00:19,890
So let's add that in.

6
00:00:19,890 --> 00:00:25,500
And the same way that we did the vent listener first span one, we can do the event listener for span

7
00:00:25,500 --> 00:00:29,060
two, or we could have it as a separate function.

8
00:00:29,280 --> 00:00:32,370
And in this case, we're going to do it all within that same function.

9
00:00:32,490 --> 00:00:35,300
And of course, you can break it up as needed, of course.

10
00:00:35,970 --> 00:00:37,380
So we've got our event listener.

11
00:00:37,380 --> 00:00:42,890
We've got a function and this function, we want to have the ability to update that element.

12
00:00:43,230 --> 00:00:46,440
So let's first we're going to select the parent.

13
00:00:47,510 --> 00:00:54,170
So taking our variable and we could always select roll as well, because we do have it within a roll

14
00:00:54,170 --> 00:01:01,640
object so we can do something easy like roll style and do background color and set the background color

15
00:01:01,640 --> 00:01:04,170
to, let's say, yellow.

16
00:01:04,670 --> 00:01:06,620
So we so we click edit.

17
00:01:06,770 --> 00:01:08,500
You see that it turns yellow.

18
00:01:08,510 --> 00:01:09,410
So that's ideal.

19
00:01:09,590 --> 00:01:11,510
And that's actually a pretty good way to go.

20
00:01:11,900 --> 00:01:17,450
The other thing that we want to do is we want to update the we want to be able to update the contents

21
00:01:17,450 --> 00:01:23,510
that are contained within there and we want to change that to an input field, but we want to use the

22
00:01:23,510 --> 00:01:25,420
value that's contained within there.

23
00:01:25,670 --> 00:01:28,250
So it might be bananas and it might be something else.

24
00:01:28,490 --> 00:01:34,580
And we know because we're building out the list and we're just building it out right now, that we know

25
00:01:34,580 --> 00:01:36,200
the value that's contained within there.

26
00:01:36,440 --> 00:01:40,360
But let's say, for instance, we don't know the value and we want to be able to get the value.

27
00:01:40,580 --> 00:01:41,810
I'll show you how you can do that.

28
00:01:42,320 --> 00:01:55,100
So let's do temp vao and selecting that item, we can use the first element child and return back that

29
00:01:55,490 --> 00:02:01,070
property and then do the inner text of that first element child.

30
00:02:01,310 --> 00:02:06,650
And we'll use console log that for now so you can see that within our console.

31
00:02:06,660 --> 00:02:07,770
So see what that looks like.

32
00:02:08,210 --> 00:02:14,630
So when we press edit we get milk and I know we could have gone and we know what is contained within

33
00:02:14,630 --> 00:02:15,310
the list.

34
00:02:15,530 --> 00:02:20,930
And I did want to introduce the first element child and just different ways to traverse through the

35
00:02:20,930 --> 00:02:21,440
elements.

36
00:02:21,620 --> 00:02:25,070
So that's why we're going about it in a little bit longer format.

37
00:02:25,730 --> 00:02:30,320
So next to that we want to do is we want to be able to create an element on the fly.

38
00:02:30,680 --> 00:02:34,760
So let's use CONSED and this is going to be our new input.

39
00:02:35,180 --> 00:02:36,740
Let's just call it new input.

40
00:02:37,900 --> 00:02:46,180
In using the document creates elements and was create an input area and the value of the new input,

41
00:02:46,480 --> 00:02:48,840
we're going to set it as temp value.

42
00:02:48,970 --> 00:02:55,570
So it's going to contain that same value that's within the temp that and we're also going to focus on

43
00:02:55,570 --> 00:02:56,700
that new input.

44
00:02:57,100 --> 00:02:59,860
So we're going to apply focus to that new input.

45
00:02:59,860 --> 00:03:05,270
And we also want to add that in to append it to our parent as well.

46
00:03:05,470 --> 00:03:09,520
So I'm going to update this and I'm going to change that to temp element.

47
00:03:09,850 --> 00:03:13,660
And I take the entire text and I move it over to temp value.

48
00:03:13,960 --> 00:03:15,970
So we're still selecting that same element.

49
00:03:16,240 --> 00:03:21,560
But now I can grab that element and I can update some of that inner text of that element.

50
00:03:21,820 --> 00:03:29,080
So if I wanted to append a child to there and we can append that new input to it.

51
00:03:29,230 --> 00:03:29,640
So sure.

52
00:03:29,640 --> 00:03:34,690
What that looks and don't forget to update this one as well to temp element so that we're not have any

53
00:03:34,690 --> 00:03:35,980
lingering elements.

54
00:03:36,190 --> 00:03:40,980
So now whenever we click it, we get this and this one needs to be updated as well.

55
00:03:40,990 --> 00:03:42,060
That's where we're throwing that error.

56
00:03:42,520 --> 00:03:45,460
So whenever we click it, we get that input area.

57
00:03:45,550 --> 00:03:52,030
And we also need to also remove out that existing content that's contained within there so we can take

58
00:03:52,030 --> 00:03:58,960
our temp element and do inner HTML and just set that to blank so that will get rid of the existing.

59
00:03:59,170 --> 00:04:06,880
So we're turning it into an input field and this gives us the ability obviously, to update it and change

60
00:04:06,880 --> 00:04:08,190
it, change the functionality.

61
00:04:08,200 --> 00:04:12,440
So we're going to add another event listener on this input field that we're just created.

62
00:04:12,760 --> 00:04:14,590
So taking our new input.

63
00:04:14,590 --> 00:04:20,230
So this one is just blurts it's not on Blu and we can launch a function whenever that event listener

64
00:04:20,230 --> 00:04:20,770
gets triggered.

65
00:04:20,890 --> 00:04:28,570
So what we want to do is whenever we're updating this, we want to select that temp element and update

66
00:04:28,570 --> 00:04:32,240
the inner HTML with the value of the new input.

67
00:04:32,260 --> 00:04:34,250
So let's try that out, see where we are right now.

68
00:04:34,270 --> 00:04:40,990
So now if I update it, we can click off of it and we can see that we're actually updating that inner

69
00:04:40,990 --> 00:04:42,810
HTML with that new value.

70
00:04:42,820 --> 00:04:46,150
So we click edit again with apples and we click off of it.

71
00:04:46,270 --> 00:04:46,750
There we go.

72
00:04:46,750 --> 00:04:51,580
We've got our added value and we can remove some content if we want.

73
00:04:51,820 --> 00:04:57,970
And as soon as we click off of it, as soon as we do the on Blu, then that means that whenever the

74
00:04:57,970 --> 00:05:02,710
blur goes off, that means that we've finished editing it.

75
00:05:02,950 --> 00:05:05,470
So it's removing it from the visual area.

76
00:05:05,740 --> 00:05:13,810
And just as we've seen before that because this element isn't appearing anymore on the page, that doesn't

77
00:05:13,810 --> 00:05:14,730
mean that's disappeared.

78
00:05:14,740 --> 00:05:19,330
So we still have that value lingering in the background of JavaScript and that's where we're able to

79
00:05:19,330 --> 00:05:23,230
still apply it, even though we're removing it out of the inner HTML.

80
00:05:23,530 --> 00:05:24,430
One last thing.

81
00:05:24,430 --> 00:05:27,210
We want to change that back to white.

82
00:05:27,850 --> 00:05:34,450
So let's take that color and we're going to update it and turn it back to its original, which was white.

83
00:05:34,630 --> 00:05:40,720
So just as we've done before, we're going to take the mildest and we've got an index value for that

84
00:05:40,900 --> 00:05:45,190
and we're going to update it to be whatever the value of the input value.

85
00:05:45,400 --> 00:05:46,320
So let's try that out.

86
00:05:46,540 --> 00:05:53,320
So now, whenever I edit, I can write a bunch of stuff and when I press delete, it rebuilds the list.

87
00:05:53,500 --> 00:05:57,280
And that means that this value now is sitting within our list.

88
00:05:57,430 --> 00:06:01,150
And you can see that there when we're outputting all of the list values.

89
00:06:01,420 --> 00:06:03,490
So we're able to successfully edit it.

90
00:06:03,730 --> 00:06:09,010
And when we click off of it, then the editing completes, it's go good and not in all of this functionality.

91
00:06:09,190 --> 00:06:15,280
And coming up next, we'll do a final code review as well as a few tweaks and adjustments to the code.