1
00:00:00,180 --> 00:00:03,900
Hello and welcome in this section, we're going to be setting up a grocery list.

2
00:00:04,200 --> 00:00:06,960
Let's start by setting up our HTML.

3
00:00:07,170 --> 00:00:08,100
We need an input.

4
00:00:08,100 --> 00:00:14,270
So this is going to be type text input and this is going to be where we can add new items.

5
00:00:14,520 --> 00:00:21,270
So giving it an idea of add item, we also need to have a button in order to add the items into our

6
00:00:21,270 --> 00:00:21,600
list.

7
00:00:21,930 --> 00:00:32,160
So input and type and this type can be a button giving it an ID of add new and with a value of add item.

8
00:00:32,530 --> 00:00:37,920
Lastly, let's create a diff, give it a class, and this is where our output is going to sit and we're

9
00:00:37,920 --> 00:00:41,190
going to add all of our output dynamically using JavaScript.

10
00:00:41,460 --> 00:00:42,570
So see what this looks like.

11
00:00:42,750 --> 00:00:45,590
And there's not really a whole lot to see quite yet.

12
00:00:45,900 --> 00:00:55,110
We also need to create a few elements as well within our JavaScript and one of them being our main array,

13
00:00:55,350 --> 00:00:57,190
or we're going to use this as let.

14
00:00:57,870 --> 00:01:01,530
So my list and let's add some items into the list.

15
00:01:01,770 --> 00:01:11,160
So these are grocery items so we can have things like bananas and of course, milk, apples, eggs and

16
00:01:11,340 --> 00:01:12,330
have some cake.

17
00:01:13,050 --> 00:01:20,070
So there's our list of items that we want to add in so the default list won't listen for window on load,

18
00:01:20,070 --> 00:01:24,450
which will invoke the function build whenever the window loads.

19
00:01:24,720 --> 00:01:30,830
And this is the function that we're going to use in order to build our initial screen area.

20
00:01:30,840 --> 00:01:36,360
So this is where we're going to be building our table and our initial list not we're going to show you

21
00:01:36,360 --> 00:01:37,800
in the upcoming lesson.

22
00:01:38,160 --> 00:01:43,470
So there's one other thing that I do want to still set up, and that's selecting some of the elements

23
00:01:43,470 --> 00:01:48,390
that we have on our page so that we're ready to make use of them within our JavaScript code.

24
00:01:48,660 --> 00:01:50,070
So we've got a button.

25
00:01:50,070 --> 00:01:51,810
I want to make that button active.

26
00:01:52,870 --> 00:02:01,660
So setting up an object called contest button VTP and I'll just call it button add and then documents

27
00:02:01,660 --> 00:02:07,480
query, selectors were selecting that element object the button, and that's the one with the idea of

28
00:02:07,480 --> 00:02:11,080
add new three using ID this time in order to select that.

29
00:02:11,530 --> 00:02:14,930
And let's make that button clickable by adding an event listener.

30
00:02:15,130 --> 00:02:20,630
So adding an event listener listened for the click and then we've got our function that's going to get

31
00:02:20,630 --> 00:02:22,570
out and vote once that button gets clicked.

32
00:02:22,840 --> 00:02:26,050
And for now what we'll do is will console log out.

33
00:02:26,800 --> 00:02:31,590
And eventually what this will do is this will add new items into our list.

34
00:02:31,870 --> 00:02:34,660
So that is all still yet to come.

35
00:02:34,840 --> 00:02:38,540
And we're going to be adding in all of this functionality in the upcoming lessons.

36
00:02:38,540 --> 00:02:42,390
So this was the basic structure that we needed for our application.

37
00:02:42,580 --> 00:02:48,400
So go ahead and set this up, set up the input fields, set up an output area where we can drop our

38
00:02:48,400 --> 00:02:52,090
content and add our content using JavaScript dynamically.

39
00:02:52,300 --> 00:02:57,880
And then we've got another one that's called OnLoad Window OnLoad, and that's a function called build.

40
00:02:58,120 --> 00:03:06,430
And this is just whenever our document object is ready to go, the construction can begin for our output

41
00:03:06,430 --> 00:03:07,270
of our list.