1
00:00:00,330 --> 00:00:05,580
Great job on making it this far into the course, so you knew this was coming that we're going to take

2
00:00:05,580 --> 00:00:11,250
that shopping cart that we constructed earlier and using just regular objects and we're going to use

3
00:00:11,250 --> 00:00:18,030
our new object oriented approach in order to recreate that shopping cart and have the same functionality

4
00:00:18,030 --> 00:00:19,190
and maybe a little bit more.

5
00:00:19,200 --> 00:00:20,970
So create the elements to input.

6
00:00:20,970 --> 00:00:24,990
And we're going to also have the option to input and add items, as you can see here.

7
00:00:24,990 --> 00:00:27,510
And the example, we've got input fields here.

8
00:00:27,510 --> 00:00:34,250
So input item, name, cost, add item and then also output cart so we can list out all of the cart

9
00:00:34,260 --> 00:00:34,980
information.

10
00:00:34,980 --> 00:00:38,750
And this will also happen automatically as we add new items.

11
00:00:38,760 --> 00:00:44,190
So adding in the same event listeners as we did in the earlier project, creating objects for the items.

12
00:00:44,190 --> 00:00:48,570
So each one of these items, as we add them in, they're going to be brand new items that are going

13
00:00:48,570 --> 00:00:49,440
to be objects.

14
00:00:49,470 --> 00:00:53,760
So we're going to use our constructor in order to create these adding in shipping and tax.

15
00:00:53,770 --> 00:00:56,190
So we saw that how subtotal work.

16
00:00:56,430 --> 00:01:01,230
We're also going to add in shipping tax, whatever we want within the item, and we can make it really

17
00:01:01,230 --> 00:01:01,800
flexible.

18
00:01:02,010 --> 00:01:03,540
So creating that cart object.

19
00:01:03,550 --> 00:01:08,940
So this is the same cart object that we saw earlier, while not the same little bit different, a little

20
00:01:08,940 --> 00:01:12,540
bit better, depending on how you look at it, creating an adder method.

21
00:01:12,540 --> 00:01:15,330
So the ability to add items into the cart.

22
00:01:15,340 --> 00:01:20,430
So whenever we click again, we add that item into the cart and then we see the total being output here.

23
00:01:20,430 --> 00:01:22,860
So the subtotal total and so on.

24
00:01:23,010 --> 00:01:28,350
So we're creating all those cart output items and then set up some default items here so that we don't

25
00:01:28,350 --> 00:01:30,080
start with just an empty store.

26
00:01:30,210 --> 00:01:32,130
We're going to have some default items to start with.

27
00:01:32,160 --> 00:01:37,890
So all of that is going to be presented in the upcoming set of lessons where we're going to be building

28
00:01:37,890 --> 00:01:39,390
this project from scratch.

29
00:01:39,540 --> 00:01:41,810
You can go ahead and you can pause the video and try this.

30
00:01:41,820 --> 00:01:47,810
And then as we work through the different lessons, you can add in the additional parts to it as well.

31
00:01:47,820 --> 00:01:49,980
So go ahead, pause the video, try it out.

32
00:01:49,990 --> 00:01:51,880
I'll walk you through the solution coming up.

33
00:01:51,900 --> 00:01:58,890
So, first of all, let's set up all of our visuals and creating our output area, using the document

34
00:01:58,890 --> 00:01:59,880
great elements.

35
00:02:00,150 --> 00:02:06,600
And the element that we're creating is going to be a diff then document body pend child, and then let's

36
00:02:06,810 --> 00:02:08,680
spend that newly created diff.

37
00:02:08,910 --> 00:02:10,900
So this is where we can add our output.

38
00:02:11,400 --> 00:02:13,590
We're also going to need another output area.

39
00:02:13,590 --> 00:02:16,380
So call this one, call it output one.

40
00:02:16,530 --> 00:02:22,750
And this is where our list is going to be listed out and this one as well as another diff and document.

41
00:02:22,770 --> 00:02:28,560
And right now it's going to be all empty because we are creating these as kind of placeholders so that

42
00:02:28,560 --> 00:02:31,410
we can add content into them later on.

43
00:02:31,440 --> 00:02:35,120
We need a few different areas as well, where we need some input areas.

44
00:02:35,120 --> 00:02:36,900
So we need an item input.

45
00:02:37,170 --> 00:02:41,110
So item input, one where we've got the name of the item.

46
00:02:41,670 --> 00:02:46,050
So using document, create elements and we're creating an input.

47
00:02:46,290 --> 00:02:48,930
Let's add some different properties to there.

48
00:02:48,930 --> 00:02:56,550
So the input, one setting of attribute and the attribute that we can set is type and it can be type

49
00:02:56,550 --> 00:03:01,060
of text item input and another attribute that we want want to set to it.

50
00:03:01,680 --> 00:03:07,410
So this is just going to be the placeholder so that we know what we're expecting, what type of input

51
00:03:07,410 --> 00:03:08,130
we're expecting.

52
00:03:08,130 --> 00:03:09,780
And this is item name.

53
00:03:09,780 --> 00:03:14,940
So we're not out any labels or any additional content and we can add this to the output.

54
00:03:14,970 --> 00:03:17,250
So we can we could also call this container as well.

55
00:03:17,250 --> 00:03:21,030
So append child and adding in the item input.

56
00:03:21,030 --> 00:03:27,210
And let's do that one more time for another input, because for each one of these items, we're going

57
00:03:27,210 --> 00:03:29,710
to also need a value, a number value.

58
00:03:29,850 --> 00:03:32,730
So I put two and of type text.

59
00:03:32,970 --> 00:03:38,460
This one can be number and input two and we'll have a placeholder as well.

60
00:03:38,670 --> 00:03:43,530
So just put cost and then appending the child of input to.

61
00:03:43,860 --> 00:03:45,350
So it gives us are two inputs.

62
00:03:45,720 --> 00:03:49,680
We also need a way to kind of trigger that, adding that object.

63
00:03:50,070 --> 00:03:56,690
So let's create one more and this one can be item, button and same format where we're creating an element.

64
00:03:56,700 --> 00:03:59,490
And in this case, let's create a button element.

65
00:03:59,490 --> 00:04:06,660
And I copy this because it's very similar to what we just did with inputs where we've got the item button

66
00:04:06,660 --> 00:04:08,340
and we can't have any spaces in there.

67
00:04:08,340 --> 00:04:09,720
So I always watch the spaces.

68
00:04:09,960 --> 00:04:13,680
The spaces are one of the most common things that throw errors.

69
00:04:14,110 --> 00:04:19,560
So instead of setting attributes, this one is just going to have text content, text content, and

70
00:04:19,560 --> 00:04:20,930
it will just say add.

71
00:04:20,940 --> 00:04:23,400
And then we're also adding an event listener to this one.

72
00:04:23,550 --> 00:04:27,180
So that listener and that we're listening for is a click.

73
00:04:27,570 --> 00:04:32,280
And if it gets clicked, then we'll add item and we'll take care of that function afterwards.

74
00:04:32,400 --> 00:04:35,790
And of course, we're throwing an error because we don't have that function in place yet.

75
00:04:35,820 --> 00:04:37,020
So let's create that.

76
00:04:37,030 --> 00:04:38,580
And so now we're not throwing any errors.

77
00:04:38,580 --> 00:04:39,650
Everything looks good.

78
00:04:40,350 --> 00:04:44,190
So now we've got a way to kind of to add items in as well.

79
00:04:44,220 --> 00:04:46,350
And we need to set up a few concepts.

80
00:04:46,350 --> 00:04:47,910
So we've got all of our items.

81
00:04:48,300 --> 00:04:53,850
We're going to create a whole list of that within the array as well as our cart.

82
00:04:53,850 --> 00:04:57,090
And then our cart is actually going to be an object that we're going to construct.

83
00:04:57,300 --> 00:04:59,520
So it's going to be using the cart constructor.

84
00:05:00,030 --> 00:05:04,870
So let's set up that as a placeholder and we'll walk you through how to do that afterwards.

85
00:05:05,190 --> 00:05:09,100
So again, this is going to be a function and notice that this one is upper case.

86
00:05:09,150 --> 00:05:11,400
This one is going to be a function card.

87
00:05:11,850 --> 00:05:13,020
So it's going to make them different.

88
00:05:13,080 --> 00:05:18,300
Now we've got the all the placeholders, everything is in place and we're ready to set up the adding

89
00:05:18,300 --> 00:05:19,080
of items.

90
00:05:19,470 --> 00:05:20,520
So that's coming up next.