1
00:00:01,020 --> 00:00:06,380
Within this lesson, we're going to be adding items into our items array that we established earlier.

2
00:00:06,600 --> 00:00:10,900
So we've got a match in order to add items whenever we click the button.

3
00:00:10,950 --> 00:00:15,360
It's going to run this function and that gives us the ability to run at item.

4
00:00:15,390 --> 00:00:19,690
So going down into add item, let's create some code in order to run.

5
00:00:19,710 --> 00:00:26,040
So we need to get temporary name of the item that we're adding and we can use the content that's contained

6
00:00:26,040 --> 00:00:29,490
within item input, one, getting the value.

7
00:00:29,730 --> 00:00:34,160
And if there's no value, then we can add in and just call it test one.

8
00:00:34,590 --> 00:00:38,790
So that can be if there's nothing there and then temp value.

9
00:00:38,940 --> 00:00:47,970
So this is the cost per item and using the item input value to or if there's nothing there, then we'll

10
00:00:47,970 --> 00:00:49,230
just set it to one.

11
00:00:49,240 --> 00:00:53,240
Let's create our item constructing function and we can call this item.

12
00:00:53,850 --> 00:00:59,010
It's going to take in two parameters, name and cost, and this is what we're going to use in order

13
00:00:59,010 --> 00:01:00,340
to construct the item.

14
00:01:00,630 --> 00:01:08,040
So using this and setting it to name and then this cost, we're going to set it to whatever the cost

15
00:01:08,040 --> 00:01:09,240
is that's being passed in.

16
00:01:09,540 --> 00:01:12,200
And we can also add in a few methods if one or two.

17
00:01:12,330 --> 00:01:14,690
So let's set one up with tax.

18
00:01:15,120 --> 00:01:19,620
We've got an anonymous function and this function is going to return a calculation.

19
00:01:19,890 --> 00:01:24,270
So taking this cost, multiplying it by one point one five.

20
00:01:24,270 --> 00:01:30,450
So that's roughly around, I guess, what our tax rate is and to fixed so that we always return back

21
00:01:30,690 --> 00:01:33,330
to decimal places, so it returns back as a number.

22
00:01:33,630 --> 00:01:39,500
And also, let's add in one more where we've got maybe we want it to calculate shipping on that item.

23
00:01:39,690 --> 00:01:44,130
So if we needed to get any of the shipping information on that item, we can do that as well, where

24
00:01:44,130 --> 00:01:51,960
we can return back and using this cost again, let's multiply that by one point zero five and using

25
00:01:51,990 --> 00:01:54,990
two fixed in order to make it look like a number.

26
00:01:55,020 --> 00:01:59,140
So now every time, whenever we need to create an item, we can create that item.

27
00:01:59,160 --> 00:02:07,130
So you're saying let's have a temp item holder for this and new item and we need to pass in those values.

28
00:02:07,140 --> 00:02:12,540
So we've got the temp name and temp value that we're passing in.

29
00:02:12,700 --> 00:02:18,750
So that's going to allow us to construct the item and then using that items array that we set up in

30
00:02:18,750 --> 00:02:23,670
the earlier lesson, the previous lesson, we're going to simply push the item into that array.

31
00:02:23,970 --> 00:02:29,760
So what this is going to do is this is going to give us an array of all of the items and we can console

32
00:02:29,760 --> 00:02:34,940
log out all of the contents of items as well so that we've got a lot of items going on.

33
00:02:35,160 --> 00:02:38,790
So let's test this and do one where we test.

34
00:02:38,790 --> 00:02:41,350
And it may be a test, too, and this one can be 10.

35
00:02:41,370 --> 00:02:47,580
So now we've got two items in there and you can see we've got cost the name and we can get the calculating

36
00:02:47,580 --> 00:02:48,590
of the shipping methods.

37
00:02:48,840 --> 00:02:55,830
So let's say, for instance, we've got items and we'll select the second one there and then we've got

38
00:02:55,830 --> 00:03:00,570
access to all of that object information so we can get its name if we want.

39
00:03:00,870 --> 00:03:06,090
We can get its cost if we need, as well as we can get some calculations.

40
00:03:06,120 --> 00:03:12,330
So if we wanted to figure out what the shipping on it is, if we want to figure out with tax how much

41
00:03:12,330 --> 00:03:18,330
it's going to be and we can use these again, constructing the object, depending on what the scenario

42
00:03:18,330 --> 00:03:20,550
is, you may or may not need to do it this way.

43
00:03:20,820 --> 00:03:25,050
And in this case, this is a great way to build up that array of all the items.

44
00:03:25,230 --> 00:03:29,700
And then if you do need to reference these, you can reference them from the items as they're being

45
00:03:29,700 --> 00:03:30,210
created.

46
00:03:30,270 --> 00:03:35,040
But for the purposes of this lesson, we do want to output them on the page.

47
00:03:35,290 --> 00:03:40,380
So let's complete that construction of it where we'll set up a div and this is going to be the device.

48
00:03:40,380 --> 00:03:44,340
So it's visible on the page and using concrete elements.

49
00:03:44,460 --> 00:03:48,840
So creating a do and let's add some inner HTML, some inner content into there.

50
00:03:48,840 --> 00:03:53,540
So using the template literals, I'm going to wrap it in an H3 that stands out a little bit.

51
00:03:53,670 --> 00:03:59,340
Then within here we're just going to put whatever the template, temporary name is of the element and

52
00:03:59,340 --> 00:04:00,770
then we'll also put a price.

53
00:04:00,780 --> 00:04:06,290
So that's the dollar sign for the value and then temp cost or temp value.

54
00:04:06,360 --> 00:04:08,510
So that's the inner HTML of the div.

55
00:04:08,520 --> 00:04:11,600
We also want to add in some styling to that as well.

56
00:04:11,640 --> 00:04:12,680
So you don't have to do this.

57
00:04:12,690 --> 00:04:18,180
You could do it with regular CSFs depending on, again, how you're applying this.

58
00:04:18,180 --> 00:04:20,300
And of course this is a JavaScript course.

59
00:04:20,310 --> 00:04:25,200
So I do want to really focus on doing everything as much as possible with JavaScript.

60
00:04:25,200 --> 00:04:31,920
So updating their display properties and we'll set this one to inline block, also div and style.

61
00:04:31,920 --> 00:04:36,600
And I believe the last one that we did, we also had it at one hundred pics.

62
00:04:36,750 --> 00:04:37,920
So let's do the same thing.

63
00:04:37,950 --> 00:04:40,950
And then lastly, let's also add our event listener.

64
00:04:41,340 --> 00:04:47,430
So the event that we're listening for is a click and whenever the click gets whenever it gets clicked,

65
00:04:47,730 --> 00:04:51,240
then let's create a function and we'll call it Cartney.

66
00:04:51,270 --> 00:04:52,530
So we'll add it to the cart.

67
00:04:52,530 --> 00:04:54,450
And of course, I do need to make this function.

68
00:04:54,450 --> 00:04:59,920
CARTNEY And this is going to pass in the event object and I'll console log out that event object.

69
00:04:59,970 --> 00:05:00,300
So this is.

70
00:05:00,440 --> 00:05:06,860
Audit visibly on the page so that we can make use of the content and we're also going to add that in

71
00:05:07,070 --> 00:05:14,000
within the d'Hiv and because this is an object we can pass in the name so we can have the temporary

72
00:05:14,000 --> 00:05:18,610
name within the object if we need to use it, if we need to reference it in any way.

73
00:05:18,620 --> 00:05:23,870
And also I'm going to add the value in case we want to get it from the element object.

74
00:05:24,380 --> 00:05:27,020
You can store all of that information within the element.

75
00:05:27,240 --> 00:05:28,970
So that's going to be visible on the page.

76
00:05:29,120 --> 00:05:32,180
But this stuff is going to be kind of hidden behind the scenes within the object.

77
00:05:32,180 --> 00:05:36,470
And then lastly, let's take our document body and append child.

78
00:05:36,650 --> 00:05:39,230
And the child that we're pending is the div that we just created.

79
00:05:39,240 --> 00:05:43,180
And then I take the input value and send it to blank.

80
00:05:43,190 --> 00:05:49,220
So zero these out and then input item input to value and also set that to be blank.

81
00:05:49,310 --> 00:05:50,150
So let's try that.

82
00:05:50,180 --> 00:05:55,970
So now we can add in an item and have a cost to it and we can see it gets shown on the page when we

83
00:05:55,970 --> 00:06:00,220
click it, we're picking up the event so everything looks good to go.

84
00:06:00,260 --> 00:06:06,020
And we'll also set it up so that we can add in some default items whenever the page loads so that we

85
00:06:06,020 --> 00:06:08,120
do have something as a default there.

86
00:06:08,390 --> 00:06:10,200
So let's do that really quickly.

87
00:06:10,280 --> 00:06:16,370
So using the window onload whenever the window loads, we're going to run the function and this function

88
00:06:16,370 --> 00:06:24,230
is going to update that input one value to milk and item input to value.

89
00:06:24,240 --> 00:06:29,510
So whatever the cost of the milk is, but we set up to five and then we're just going to run that function

90
00:06:29,510 --> 00:06:29,790
at.

91
00:06:30,140 --> 00:06:31,670
So that when we refresh the page.

92
00:06:31,680 --> 00:06:34,520
So that means that gives us the milk button automatically.

93
00:06:34,520 --> 00:06:39,080
And you can add a few other ones as well by default if you want to add this into your project.

94
00:06:39,110 --> 00:06:45,530
So now you've got the ability to construct an item as well as adding items into the cart.

95
00:06:45,540 --> 00:06:51,800
So we're going to do that in the upcoming lesson and then building out the visible elements and having

96
00:06:51,800 --> 00:06:52,970
some to start out with.

97
00:06:53,120 --> 00:06:56,630
So you could add as many as you want and they're all going to function the same way.