1
00:00:00,210 --> 00:00:01,240
Hey, welcome back.

2
00:00:01,260 --> 00:00:06,300
This is the final section wrap up, I'm going to do a quick code review and we'll talk a little bit

3
00:00:06,300 --> 00:00:08,810
about objects and object oriented programming.

4
00:00:09,030 --> 00:00:14,340
So first thing that we did when we came in, we developed and we created a bunch of JavaScript objects

5
00:00:14,580 --> 00:00:18,600
because we wanted a visual application and we didn't have anything within our HTML.

6
00:00:18,720 --> 00:00:20,820
And also we want to practice JavaScript.

7
00:00:20,820 --> 00:00:21,300
Why not?

8
00:00:21,300 --> 00:00:21,580
Right.

9
00:00:21,870 --> 00:00:26,850
So we created a bunch of these and this was all of the visuals here that we see on the page.

10
00:00:27,060 --> 00:00:28,770
Also added in the event listeners.

11
00:00:29,070 --> 00:00:35,670
And then we also constructed an object that we could use in order to add items into our items array

12
00:00:35,880 --> 00:00:38,670
because by starting and default, we don't have anything listed.

13
00:00:38,800 --> 00:00:41,400
So we needed a way to have some of these items.

14
00:00:41,550 --> 00:00:46,560
And we also have a way to add in items manually here by pressing the button.

15
00:00:46,560 --> 00:00:48,540
And that adds that into the items array.

16
00:00:48,720 --> 00:00:54,180
So each one of these items we can get the cost, the name, the shipping, how much it is with the tax.

17
00:00:54,390 --> 00:00:56,820
So all of this was from an object.

18
00:00:56,970 --> 00:01:02,100
And the nice thing about using objects in this type of format is that they're all going to have the

19
00:01:02,100 --> 00:01:03,250
same construction.

20
00:01:03,480 --> 00:01:09,290
So in case we want to update the shipping, we don't have to worry about where the object is being created.

21
00:01:09,450 --> 00:01:13,080
All we have to do is each one of these items objects.

22
00:01:13,080 --> 00:01:19,200
As they get created, we can add in shipping, we can add in tax and any other methods that we need

23
00:01:19,200 --> 00:01:21,720
in order to make some calculations on this object.

24
00:01:21,850 --> 00:01:27,330
And it all fits together because this is information that we might want or need or might want to use

25
00:01:27,510 --> 00:01:32,940
in our application for this particular item so we can get the name, we can get the cost, and then

26
00:01:32,940 --> 00:01:37,220
we also get information associated with it that can get calculated out.

27
00:01:37,680 --> 00:01:44,880
So using that, we constructed a bunch of items and we also have a visual representation of the items

28
00:01:44,880 --> 00:01:45,690
that we're adding.

29
00:01:45,870 --> 00:01:50,850
So whenever we're adding an item to the page, what we're doing is we're getting all this information,

30
00:01:51,030 --> 00:01:56,910
we're constructing the object here, a temp item, and then we're pushing it into that items array.

31
00:01:57,180 --> 00:02:03,450
And then we're also constructing it visually or creating a div outputting, creating the HTML, making

32
00:02:03,450 --> 00:02:05,960
some styling and adding an event listener.

33
00:02:06,060 --> 00:02:13,590
So whenever it gets clicked, then we can use the name and value that we picked up from the input and

34
00:02:13,590 --> 00:02:17,090
we can send that over to the cart in order to add it in.

35
00:02:17,190 --> 00:02:22,500
So CART as well as an object that we constructed so we can create multiple carts and they're all going

36
00:02:22,500 --> 00:02:28,470
to have the same functionality, but they can all work independently so we can add items into multiple

37
00:02:28,470 --> 00:02:29,640
carts if needed.

38
00:02:29,790 --> 00:02:34,650
And then we've got that output as well that we can calculate and we can visually see the output.

39
00:02:34,800 --> 00:02:40,530
And that's whenever we make any selection of the items, we're going to see that that output gets visually

40
00:02:40,680 --> 00:02:42,330
represented on the page.

41
00:02:42,480 --> 00:02:45,630
So this is all coming from the object that we're constructing.

42
00:02:45,750 --> 00:02:47,820
We also added, of course, onto the page.

43
00:02:47,820 --> 00:02:52,890
So it's visible and clear out the inputs and then going into the cart object.

44
00:02:53,040 --> 00:02:59,190
So this is one of the most important parts of this lesson or the previous lessons is creating the cart.

45
00:02:59,470 --> 00:03:03,860
So within the cart itself, we've got our own object list.

46
00:03:04,050 --> 00:03:07,160
So the my list is where all the objects are going to sit.

47
00:03:07,410 --> 00:03:09,120
We've got a couple methods here.

48
00:03:09,130 --> 00:03:15,670
So one method outputs the list into the console so we can always see whatever the contents of cart is.

49
00:03:15,690 --> 00:03:21,420
So if we take a cart and if we want to list it out, we can always do Lyster and we can see whatever

50
00:03:21,420 --> 00:03:23,300
is currently being contained within the cart.

51
00:03:23,670 --> 00:03:29,340
We can also get the total cost and we added in a button that can do the same thing, that essentially

52
00:03:29,340 --> 00:03:30,690
just runs this method.

53
00:03:30,960 --> 00:03:38,340
So what we do is we loop through all of the current items within the cart, the mildest object, and

54
00:03:38,340 --> 00:03:40,080
we do the subtotal.

55
00:03:40,290 --> 00:03:46,920
And as we can see within the list itself, we've got the name price quantity and we're doing the subtotal

56
00:03:46,920 --> 00:03:47,310
here.

57
00:03:47,460 --> 00:03:51,990
And the subtotal is taking the quantity and multiplying it by the price.

58
00:03:52,110 --> 00:03:55,730
And it's producing a value and that's where the subtotal comes in.

59
00:03:55,920 --> 00:04:03,450
So at any point, if we need the subtotal for that particular item within the cart, we can always reference

60
00:04:03,450 --> 00:04:03,730
that.

61
00:04:03,870 --> 00:04:08,190
And so what we're doing is we're taking the subtotal, we're adding it to the total, outputting it

62
00:04:08,190 --> 00:04:08,940
for the user.

63
00:04:09,120 --> 00:04:10,920
So the same thing for the total as well.

64
00:04:11,200 --> 00:04:12,910
And then there's the output part here.

65
00:04:12,930 --> 00:04:15,450
So this is just putting it visually.

66
00:04:15,600 --> 00:04:20,010
So that's the only real difference between the two that we're out putting it more visually for the user.

67
00:04:20,610 --> 00:04:25,260
We've got the Adir and this is where we're using objects and JavaScript once again.

68
00:04:25,470 --> 00:04:32,670
And instead of using the dot notation, we're using the bracket notation because this is dynamic.

69
00:04:32,680 --> 00:04:35,820
So we're taking the item, we're turning it into lowercase.

70
00:04:35,970 --> 00:04:39,660
And this is dependent on all the items only being one word.

71
00:04:39,750 --> 00:04:41,640
We don't want to have spaces in the items.

72
00:04:42,090 --> 00:04:44,160
Then you'd have to clean that up a little bit more.

73
00:04:44,430 --> 00:04:51,360
And so we're using these by default and that gives us the ability to check, to see that we only have

74
00:04:51,360 --> 00:04:51,930
it unique.

75
00:04:51,930 --> 00:04:54,720
So we only have one milk in there, one test in there.

76
00:04:54,870 --> 00:04:59,880
If we try to add another one, we're going to see that it's already existing and all we have to.

77
00:04:59,920 --> 00:05:04,150
Do is update the quantity so we don't have to update any of these and we don't have to create a new

78
00:05:04,150 --> 00:05:04,390
one.

79
00:05:04,870 --> 00:05:06,340
That's the nice thing about objects.

80
00:05:06,340 --> 00:05:11,920
And you can use them in a number of different ways to really fine tune and do some amazing functionality

81
00:05:12,070 --> 00:05:12,920
as needed.

82
00:05:13,300 --> 00:05:16,870
So all of this is what we've gone through in the earlier lessons.

83
00:05:16,870 --> 00:05:20,470
And I hope you did have an opportunity to try this code out.

84
00:05:20,650 --> 00:05:26,200
If you have any questions or comments I'm always happy to help with in the Q&A section, providing clarity

85
00:05:26,200 --> 00:05:32,020
and also adding additional content if needed or if you want to just let me know what you're working

86
00:05:32,020 --> 00:05:34,750
on or if you have got suggestions for course improvements.

87
00:05:34,870 --> 00:05:36,400
I'm always happy to hear from you.

88
00:05:36,670 --> 00:05:39,940
Thanks again for taking the course and I'll see you next time.