1
00:00:00,730 --> 00:00:01,720
Welcome back.

2
00:00:01,750 --> 00:00:03,790
So how is your list coming along?

3
00:00:03,800 --> 00:00:09,710
So what we wanted to do in this lesson is do some final tweaks and adjustments to the code.

4
00:00:10,000 --> 00:00:12,280
We have a default list that we start with.

5
00:00:12,460 --> 00:00:17,170
We're able to delete items, were able to edit items as well into the list.

6
00:00:17,410 --> 00:00:19,380
And you see that it kind of goes back and forth.

7
00:00:19,390 --> 00:00:22,220
So we've got some styling updates that we should make.

8
00:00:22,450 --> 00:00:29,790
So it's go into our editor and select our TD and let's select the first child element.

9
00:00:29,800 --> 00:00:35,020
So it's going to be that mean one where we've got the content setting up a width for that.

10
00:00:35,530 --> 00:00:38,610
Still a really wide width and overflow.

11
00:00:38,830 --> 00:00:44,800
We can do an overflow hidden so that we don't have anything hovering over that particular element.

12
00:00:45,070 --> 00:00:48,810
So now it works a lot neater whenever we do the edit.

13
00:00:48,820 --> 00:00:52,600
So we're not doing that moving of those buttons and we can delete it.

14
00:00:52,810 --> 00:00:57,910
We can add items to the list and also want to move the add items underneath our list.

15
00:00:58,120 --> 00:01:00,820
So which is relatively easy to do with our JavaScript.

16
00:01:00,850 --> 00:01:04,780
So now we can add items here right at the bottom within the list.

17
00:01:05,260 --> 00:01:10,510
Another thing that I want it to do whenever we're adding the items are going to rebuild this restructure,

18
00:01:10,510 --> 00:01:16,290
add a little bit whenever we're adding items, I want to clear out that value that's contained within

19
00:01:16,300 --> 00:01:16,950
new item.

20
00:01:17,290 --> 00:01:23,140
So take our new item and we're just going to set the value to be blank so that we can't constantly do

21
00:01:23,140 --> 00:01:25,080
test, add, add, add.

22
00:01:25,390 --> 00:01:28,860
So if we don't have anything in there, you see, it doesn't add it into the list.

23
00:01:29,380 --> 00:01:31,960
So again, edit them all on the fly.

24
00:01:32,140 --> 00:01:36,370
Whenever we want to make those edits, add updates and this is all being tracked.

25
00:01:36,550 --> 00:01:38,140
So this is all actually in sync.

26
00:01:38,140 --> 00:01:45,160
It's all actually in sync with what the contents of my list are behind the scenes as well as what we've

27
00:01:45,160 --> 00:01:46,620
got in the foreground.

28
00:01:46,900 --> 00:01:48,760
So what we've got in the visible area.

29
00:01:50,490 --> 00:01:56,640
We can also remove out some of these console messages because we don't need them anymore as we've got

30
00:01:56,640 --> 00:02:00,730
all of the functionality that we set out to include in our application.

31
00:02:01,110 --> 00:02:04,470
So simply removing those out just cleans up the code a bit.

32
00:02:04,470 --> 00:02:09,660
And especially if we don't need them, there's no point for them outputting into our console.

33
00:02:10,450 --> 00:02:16,200
So now that we've gone through and your application should be working the same way as this one is,

34
00:02:16,740 --> 00:02:22,410
also make any adjustments and tweaks as needed to make sure that you've got the same functionality and

35
00:02:22,410 --> 00:02:24,660
you can also introduce other functionality.

36
00:02:24,660 --> 00:02:30,240
And whenever you make any updates to the list, don't forget to make sure that you output that build.

37
00:02:30,480 --> 00:02:36,090
So coming up next, we'll do a final code review of our list making application.

38
00:02:36,210 --> 00:02:37,200
So it's coming up next.