1
00:00:00,240 --> 00:00:01,900
Hey, great job making it this far.

2
00:00:02,130 --> 00:00:07,260
Now we need to add in an event listener, so whenever the user clicks one of those objects that we just

3
00:00:07,260 --> 00:00:10,320
created on the page, then it gets added into a cart.

4
00:00:10,410 --> 00:00:15,270
So that also means that we need to create that cart and updating the quantities we need to check to

5
00:00:15,270 --> 00:00:17,160
see what the quantity is.

6
00:00:17,310 --> 00:00:19,920
So there's quite a few things that we're going to do in this lesson.

7
00:00:19,920 --> 00:00:20,880
So let's add that in.

8
00:00:21,600 --> 00:00:23,580
So first of all, let's create a cart.

9
00:00:23,580 --> 00:00:31,800
We can just create a blank cart object and then we can use this in order to contain our cart information.

10
00:00:31,830 --> 00:00:37,320
So this is where we're going to deposit all of the items that are going into the cart as objects within

11
00:00:37,320 --> 00:00:38,070
this cart.

12
00:00:38,770 --> 00:00:43,140
And we also need a way, of course, to make that deposit, and that's adding an event listener.

13
00:00:43,350 --> 00:00:48,480
So to all of the device that we just create, adding an event listener, the event that we're listening

14
00:00:48,480 --> 00:00:53,620
for is going to be a click and we can have the function here or we could send it to a function.

15
00:00:53,970 --> 00:00:56,190
So just do it as an anonymous function for now.

16
00:00:58,130 --> 00:01:03,590
And I want to select all of those names of those items within the elements, so we've got the item,

17
00:01:03,740 --> 00:01:07,130
element, item and change those to lowercase.

18
00:01:07,140 --> 00:01:15,950
So I just give it a temporary variable here called Nemer, getting the element and item and using JavaScript

19
00:01:15,950 --> 00:01:22,090
to lowercase in order to transform that content into a lowercase format.

20
00:01:22,490 --> 00:01:27,590
And we're going to use that, of course, within our cart in order to add those in.

21
00:01:27,980 --> 00:01:29,720
So console log that out.

22
00:01:30,440 --> 00:01:35,450
And this is going to be a kind of a really neat thing that you can do with objects where you can make

23
00:01:35,450 --> 00:01:37,860
sure that you're adding in only unique items.

24
00:01:38,030 --> 00:01:41,660
So whenever I click, you see that we're getting that item being shown there.

25
00:01:41,810 --> 00:01:45,390
I'm also going to comment this one out as we don't need it anymore.

26
00:01:45,980 --> 00:01:52,370
So now whenever I click, we get that value being added in and being, well, not added in, but it's

27
00:01:52,370 --> 00:01:54,320
just being represented there when we click it.

28
00:01:54,740 --> 00:02:00,740
We can use the item names, milk, apple, butter and add that into the cart.

29
00:02:00,750 --> 00:02:08,330
So taking the cart and using the bracket notation and using Nemer, we're going to add that in to the

30
00:02:08,330 --> 00:02:13,670
cart and we're going to add it in as an object as well, because, of course, we do want to practice

31
00:02:13,670 --> 00:02:14,810
working with objects.

32
00:02:15,050 --> 00:02:16,220
So we've got the name.

33
00:02:16,220 --> 00:02:20,390
So element item that's the name of the objects.

34
00:02:20,390 --> 00:02:24,830
The price of these is going to be element cost.

35
00:02:25,010 --> 00:02:29,000
And of course, they're all going to be the same, are going to show you a really neat trick with quantity.

36
00:02:29,600 --> 00:02:31,940
So quantity will start out as one.

37
00:02:32,690 --> 00:02:35,450
And we can also add in methods as well.

38
00:02:35,460 --> 00:02:43,340
So subtotal or we can do a function and maybe we want to take the return, taking whatever the prices

39
00:02:43,520 --> 00:02:46,100
and then multiplying it by the quantity.

40
00:02:46,880 --> 00:02:48,620
So I think we're ready to try that.

41
00:02:49,280 --> 00:02:52,910
So whenever we're adding these, I can say we've added a bunch of stuff.

42
00:02:52,910 --> 00:02:57,470
We can take a cart and you can see it's been added into the cart as those objects.

43
00:02:57,710 --> 00:03:00,860
And of course, the quantities are always still going to be one right now.

44
00:03:00,860 --> 00:03:02,560
So it doesn't matter how many I add in.

45
00:03:02,750 --> 00:03:04,220
And this is where the trick comes in.

46
00:03:04,490 --> 00:03:05,870
And actually, it's not really a trick.

47
00:03:05,870 --> 00:03:06,980
It's not a magic trick.

48
00:03:06,980 --> 00:03:10,280
It's just the way that JavaScript works and the way that objects worked.

49
00:03:10,290 --> 00:03:14,210
So this is a great example of why objects are amazing.

50
00:03:14,460 --> 00:03:20,900
So we're going to add in a condition here and checking to see if this cart namur exists.

51
00:03:21,350 --> 00:03:24,740
And if it doesn't exist, then we create it.

52
00:03:24,890 --> 00:03:28,700
And if it does exist, then all we have to do is update the quantity.

53
00:03:29,000 --> 00:03:30,400
And that's the nice thing about it.

54
00:03:30,620 --> 00:03:38,180
So if it already exists, then we can take the cart nemer and all we have to do is update that quantity.

55
00:03:38,190 --> 00:03:42,140
So let's update our quantity and add one to it.

56
00:03:42,170 --> 00:03:48,170
So now if we've got bread and we click bread a bunch of times and butter a bunch of times and we output

57
00:03:48,200 --> 00:03:52,520
what's contained within our cart, we only still have bread, we only still have butter.

58
00:03:52,790 --> 00:03:56,820
But when we open up the quantity we see we've got quantity of six.

59
00:03:57,110 --> 00:04:04,220
So if I was to do cart bread and remember, we created that subtotal method, which is pretty cool.

60
00:04:04,400 --> 00:04:11,240
If we do that method, it's going to be a cost of twelve because we know that the bread itself has a

61
00:04:11,240 --> 00:04:13,840
price of two and a quantity of six.

62
00:04:13,850 --> 00:04:16,340
So two times six is twelve.

63
00:04:16,550 --> 00:04:23,240
And that's where we can really start using these objects in a really nice, amazing way in order to

64
00:04:23,240 --> 00:04:26,870
represent those objects and the values they're contained within the objects.

65
00:04:27,050 --> 00:04:31,830
And this provides us so much flexibility when we're using and creating with these.

66
00:04:32,390 --> 00:04:36,470
So there's one other thing that we do want to do, and that's output those values.

67
00:04:36,470 --> 00:04:38,360
So we don't always have to use the console.

68
00:04:38,480 --> 00:04:43,190
And in case we've got someone that's not a programmer, not familiar with the console, they want to

69
00:04:43,190 --> 00:04:45,200
use our amazing application.

70
00:04:45,380 --> 00:04:48,760
Let's output that and output that into the visible area.

71
00:04:48,950 --> 00:04:50,900
So that is all still yet to come.

72
00:04:51,080 --> 00:04:57,500
Go ahead and add the ability to check, to make sure that we've got the quantity and updating those

73
00:04:57,500 --> 00:05:02,570
quantities, checking to see if the already exists, if the name exists and then updating the quantity.

74
00:05:02,570 --> 00:05:08,530
If it doesn't and if it already if it doesn't exist, then create that first initial object.

75
00:05:08,960 --> 00:05:10,310
So go ahead, try that out.

76
00:05:10,790 --> 00:05:14,450
And coming up, we're going to do the finalizing of the solution.

77
00:05:14,570 --> 00:05:20,870
We're going to list out the content on the page and that's going to be using list and looping through

78
00:05:21,020 --> 00:05:26,570
all of the objects that we've got contained within the cart and then just visually outputting them.

79
00:05:26,900 --> 00:05:30,050
So that's all still yet to come in the next lesson.