1
00:00:00,180 --> 00:00:06,270
Hey, let's do the output so we've got a total cost that we want might want to output, so creating

2
00:00:06,270 --> 00:00:11,880
another method within the object, we can call it total costs and equal to anonymous function.

3
00:00:12,120 --> 00:00:15,840
And then within this function, we can work out what the total cost is.

4
00:00:16,140 --> 00:00:20,710
So creating value for total setting it at zero.

5
00:00:20,880 --> 00:00:26,850
So we did a little bit of this before where we looked through all of the items within the object.

6
00:00:26,850 --> 00:00:29,220
In this case, it's going to be the my list.

7
00:00:29,550 --> 00:00:34,680
We're looping through all of those items within that object and we're getting all of the names from

8
00:00:34,680 --> 00:00:34,890
them.

9
00:00:35,010 --> 00:00:39,420
And then we can create and get some totals because we already have this.

10
00:00:39,580 --> 00:00:45,740
Remember, this is already an existing method within that list, pro and subtotal.

11
00:00:45,930 --> 00:00:52,170
And now all we need to do is take total and we need to just add in whatever the value of subtotal is

12
00:00:52,170 --> 00:00:55,740
and then return back, whatever the value of total is.

13
00:00:56,460 --> 00:00:57,240
So we can try that.

14
00:00:57,270 --> 00:00:59,640
So now we've got another option there for total.

15
00:01:00,300 --> 00:01:06,000
And actually let's add in another button in order so that we can output that total so I can show you

16
00:01:06,000 --> 00:01:11,850
how you can get the total by having a button and grabbing the button.

17
00:01:12,060 --> 00:01:15,600
So this one is going to be another button that we can call.

18
00:01:15,600 --> 00:01:18,040
We can just call it out button or something like that.

19
00:01:18,630 --> 00:01:20,250
This is going to be calculating the total.

20
00:01:20,580 --> 00:01:28,560
So that out button is just going to get the total and I'll just write total and adding an event listener

21
00:01:28,560 --> 00:01:32,300
to out button and then we're going to spend that to the output.

22
00:01:32,310 --> 00:01:34,290
So we'll have it within the display area.

23
00:01:34,710 --> 00:01:38,280
And we don't necessarily need to have a separate function for this.

24
00:01:38,910 --> 00:01:44,340
We can just have an anonymous function that's going to sit in here and taking that cart object.

25
00:01:44,940 --> 00:01:50,010
And then we've got going back in just to make sure that I've got the it's the total cost that we're

26
00:01:50,010 --> 00:01:50,600
going to output.

27
00:01:51,060 --> 00:01:57,960
So we're going to calculate the total cost and set this into a variable and then we'll output that variable

28
00:01:57,960 --> 00:01:58,830
into the console.

29
00:01:59,040 --> 00:02:00,000
So let's try that.

30
00:02:00,000 --> 00:02:01,650
And total right now is zero.

31
00:02:01,680 --> 00:02:04,680
Total is 15, because we've got three milks in there.

32
00:02:04,950 --> 00:02:07,920
And maybe this is a really expensive who knows what.

33
00:02:08,550 --> 00:02:14,280
So now every time we can add those into the list are total, is mind bogglingly large.

34
00:02:14,580 --> 00:02:20,130
So that's how we can create and utilize the methods within the object in order really to kind of get

35
00:02:20,220 --> 00:02:22,890
quite a bit of power out into our content.

36
00:02:23,160 --> 00:02:28,080
So lastly, we also had one more that we wanted to do, and that's output that total.

37
00:02:28,080 --> 00:02:31,500
They're constantly out into the visible area.

38
00:02:31,710 --> 00:02:35,280
So this is going to be relatively the same as what we just did with Total.

39
00:02:35,430 --> 00:02:40,020
So we can kind of copy this one and do pretty much the same thing.

40
00:02:40,470 --> 00:02:43,140
Except this time we're outputting the cart contents.

41
00:02:43,650 --> 00:02:49,050
So starting out with total and we're going to use that output area that we created.

42
00:02:49,320 --> 00:02:54,570
So the output one getting the inner HTML, we're going to just clear that up.

43
00:02:54,570 --> 00:03:00,990
So those are two double quotes together and then the subtotal is going to work the same way and then

44
00:03:00,990 --> 00:03:04,560
updating that output one and inner HTML.

45
00:03:04,560 --> 00:03:08,940
We'll just set the entire HTML directly within this and using the tactics.

46
00:03:09,060 --> 00:03:11,670
So whatever we want that in our TEMEL to be.

47
00:03:11,850 --> 00:03:18,450
Let's say for instance, we've got my list and if we want to shorten this as well, I can call it L'il

48
00:03:18,450 --> 00:03:19,590
or something like that.

49
00:03:19,710 --> 00:03:27,480
So we've got my list and whatever the value of pro is and this is going to be the element that we're

50
00:03:27,480 --> 00:03:28,070
looking at.

51
00:03:28,440 --> 00:03:31,380
So within that object, within the list object.

52
00:03:31,390 --> 00:03:35,610
So this is the list that's sitting within the cart and that's what we've got access to it.

53
00:03:35,850 --> 00:03:43,230
So whatever, whenever we want to utilize that we can do is to L and name just to keep things a little

54
00:03:43,230 --> 00:03:48,600
bit shorter and we'll try to do the same thing that we had last time where we've got the price and I'll

55
00:03:48,600 --> 00:03:55,560
have a big X this time and we're going to multiply it by the quantity of the items and then equal that

56
00:03:55,680 --> 00:03:59,730
to and I'm running out of space, but let's try to squeeze that one in.

57
00:04:00,000 --> 00:04:05,100
So whatever the subtotal is and we'll do a line break there so we can separate them all instead of returning

58
00:04:05,100 --> 00:04:09,480
total, we're going to just add total in at the end there.

59
00:04:09,480 --> 00:04:12,250
So that can be whatever we want to call it.

60
00:04:12,460 --> 00:04:16,490
For instance, we want to call it final total, final total.

61
00:04:16,500 --> 00:04:17,880
And this is where we can output.

62
00:04:18,540 --> 00:04:24,840
So now we've got a way to output and we should be running this output every time there's an update on

63
00:04:24,840 --> 00:04:25,020
it.

64
00:04:25,350 --> 00:04:32,580
Every time we add to the cart, we want to run the cart output and we can do that as we're clicking

65
00:04:32,580 --> 00:04:34,480
the button and adding items.

66
00:04:34,500 --> 00:04:38,040
So we're we've got the cart, Lyster, instead of the Lyster.

67
00:04:38,130 --> 00:04:39,080
Let's the output.

68
00:04:39,600 --> 00:04:41,030
So looks like we're ready to try it.

69
00:04:41,040 --> 00:04:41,880
So refresh.

70
00:04:42,180 --> 00:04:47,040
And now whenever we we can get the total, we can also click.

71
00:04:47,040 --> 00:04:51,390
And the more stuff we add into the cart, the more it goes up.

72
00:04:51,390 --> 00:04:54,840
So test and maybe this one is fifty five bucks.

73
00:04:54,840 --> 00:04:56,970
And let's add in some real items.

74
00:04:58,260 --> 00:05:05,280
And so if we have bread, we have test and we can see that the totals updating, our bread counters

75
00:05:05,280 --> 00:05:05,710
updating.

76
00:05:05,730 --> 00:05:08,910
So this is the price, this is the item, this is the price.

77
00:05:09,150 --> 00:05:10,560
And then this is the quantity.

78
00:05:10,560 --> 00:05:13,160
That's the subtotal that we're getting from the object.

79
00:05:13,170 --> 00:05:17,580
And this is the final total will continue to increment as we select more items.

80
00:05:17,760 --> 00:05:22,320
And we're very flexible in adding items whenever if we just want to get the total, we can press the

81
00:05:22,320 --> 00:05:22,970
total button.

82
00:05:23,220 --> 00:05:27,750
So there's a lot of functionality that's available to us and we could just simply have to add that into

83
00:05:27,750 --> 00:05:28,410
the object.

84
00:05:28,620 --> 00:05:32,790
And if we do have any changes, it's really easy to make these changes into the object.

85
00:05:32,980 --> 00:05:39,180
So let's say again, for instance, we did want to have bolded we could build the text really easily

86
00:05:39,210 --> 00:05:40,620
and we can update the format.

87
00:05:41,040 --> 00:05:44,190
We can add in additional methods, all of this as needed.

88
00:05:44,280 --> 00:05:48,000
So coming up next, we'll do a final code review, wrap up the section.