1
00:00:00,270 --> 00:00:01,290
Do you like shopping?

2
00:00:01,500 --> 00:00:07,470
This is going to be the shopping cart challenge, it's going to simulate adding content into a shopping

3
00:00:07,470 --> 00:00:09,570
cart and more about objects.

4
00:00:09,600 --> 00:00:13,890
We're going to have a bunch of items that are available for sale within an object.

5
00:00:13,890 --> 00:00:18,180
And it's going to be an array of an object with an array inside of it.

6
00:00:18,190 --> 00:00:20,930
So multiple objects are all going to be contained within there.

7
00:00:21,120 --> 00:00:22,960
We're going to output it on the page.

8
00:00:23,220 --> 00:00:27,480
So what I want you to do for this challenge is to create an array with some of the typical things that

9
00:00:27,480 --> 00:00:33,330
you'd find when you're going shopping so you can have milk, apple, bread, butter, whatever comes

10
00:00:33,330 --> 00:00:35,730
to mind added in create those objects.

11
00:00:35,820 --> 00:00:42,930
The need to have a name, they need to have a price, then go to JavaScript and use the JavaScript code

12
00:00:42,930 --> 00:00:47,010
to loop through that object and output it on the page as div.

13
00:00:47,030 --> 00:00:53,220
So using create elements in order to create those elements and then add an event listener to all of

14
00:00:53,220 --> 00:01:00,990
those divs so that you have the ability to click them and call to a function and then updating and calling

15
00:01:00,990 --> 00:01:06,510
to that function is going to add it into another array and then using that array.

16
00:01:06,540 --> 00:01:12,420
So it's going to be your shopping cart and create a method that can contain that new object and then

17
00:01:12,420 --> 00:01:14,480
also calculates the subtotal.

18
00:01:14,550 --> 00:01:16,640
So, no, that was quite a bit to ask.

19
00:01:16,650 --> 00:01:23,220
And we are going to work through this piece by piece so you can pause the video after each step and

20
00:01:23,220 --> 00:01:24,480
try that for yourself.

21
00:01:24,690 --> 00:01:31,890
So the first step is to create an array, contains all the items as objects that you want to sell within

22
00:01:31,890 --> 00:01:32,730
your store.

23
00:01:32,940 --> 00:01:34,080
So open up the editor.

24
00:01:34,640 --> 00:01:37,320
It's first creating our object of items.

25
00:01:37,530 --> 00:01:38,640
You can call it items.

26
00:01:38,820 --> 00:01:43,080
And this is going to be an array that's going to contain a bunch of objects inside of it.

27
00:01:43,410 --> 00:01:44,550
So send each one.

28
00:01:44,580 --> 00:01:46,290
We just comma separate them.

29
00:01:46,500 --> 00:01:52,490
And arrays can contain objects and strings and numbers as well as other arrays as well.

30
00:01:52,770 --> 00:01:58,800
So for each one of these, we need an item name so we can give it a name and this one will be milk.

31
00:01:59,040 --> 00:02:00,490
So we have something to display.

32
00:02:00,900 --> 00:02:03,870
You can also put a cost if you want as well.

33
00:02:04,230 --> 00:02:06,410
So the cost is no.

34
00:02:06,510 --> 00:02:11,550
So just do it with a number there and then I can also add in Idiz.

35
00:02:11,550 --> 00:02:15,480
So they're probably not going to be necessary, but you can add in yds as well.

36
00:02:15,720 --> 00:02:21,140
So that's the structure of each one of the items that we're going to be containing within that array.

37
00:02:21,870 --> 00:02:25,290
And next, we've got an apple, so I'm not sure how much an apple is.

38
00:02:25,290 --> 00:02:26,390
Maybe one dollar.

39
00:02:26,550 --> 00:02:29,520
Try to keep it simple, give it another different type of ID.

40
00:02:29,760 --> 00:02:37,050
Next, we've got some bread that we're adding some bread and maybe the bread is two bucks and it's item

41
00:02:37,050 --> 00:02:37,680
number two.

42
00:02:38,010 --> 00:02:42,350
And you could add as many items as you feel necessary or as you want.

43
00:02:42,900 --> 00:02:46,050
So the butter maybe is three and that's item number three.

44
00:02:46,650 --> 00:02:47,040
So that's it.

45
00:02:47,080 --> 00:02:48,210
So I think that's pretty good.

46
00:02:48,240 --> 00:02:53,730
Let's refresh make sure we've got the items there that we can see and we can output so we can put them

47
00:02:53,730 --> 00:02:54,510
into the console.

48
00:02:54,930 --> 00:03:01,170
So now we can use JavaScript in order to create these items and put them on the page using the crate

49
00:03:01,200 --> 00:03:08,220
element where we've got all of the items that are contained within this array and then using for each

50
00:03:08,430 --> 00:03:10,640
we're going to iterate through that array.

51
00:03:10,680 --> 00:03:15,630
So using the functions, anonymous function where you take that element information.

52
00:03:16,020 --> 00:03:20,850
And what this will do is this will contain within l each one of the items.

53
00:03:20,850 --> 00:03:23,180
So you can see it being output there within the console.

54
00:03:23,610 --> 00:03:29,940
So that means that we can do something with that and I'm going to create a div and the div is document

55
00:03:30,540 --> 00:03:36,960
create element so that we have something visible for the user and the element that is being created

56
00:03:36,960 --> 00:03:40,290
as a div populate some information into this device.

57
00:03:40,290 --> 00:03:46,530
So taking the div and using inner HTML, let's add some content, some of the element content within

58
00:03:46,530 --> 00:03:48,300
it so we can do an H3.

59
00:03:48,330 --> 00:03:56,010
So the name is going to be fairly big, the curly brackets there and elements and each one of these

60
00:03:56,010 --> 00:04:01,320
has an item and then close off that H3 and then there's the cost amount.

61
00:04:01,360 --> 00:04:06,390
So that's the dollar sign within the string and then the other ones, the dollar sign within to get

62
00:04:06,390 --> 00:04:14,400
the element cost and then using the document body append child, we're going to pen those divs as they

63
00:04:14,400 --> 00:04:15,000
get created.

64
00:04:15,210 --> 00:04:19,140
So on the page and you can see milk, apple, bread, butter.

65
00:04:19,140 --> 00:04:20,710
So they all got appended to the page.

66
00:04:21,090 --> 00:04:23,190
Also, let's apply a little bit of styling.

67
00:04:23,760 --> 00:04:25,620
And of course, this is JavaScript.

68
00:04:25,620 --> 00:04:29,070
So we're going to do it within just using JavaScript.

69
00:04:29,370 --> 00:04:36,660
So we're going to try to shy away from using any one of each HTML or CSR as much as possible.

70
00:04:37,140 --> 00:04:43,200
So setting some border colors so that we can distinguish between them and then also going to set the

71
00:04:43,590 --> 00:04:48,770
style of display property and set that to inline block.

72
00:04:48,810 --> 00:04:50,370
So we've got them all aligned.

73
00:04:50,400 --> 00:04:52,650
You can also add in a width as well if you want.

74
00:04:52,800 --> 00:04:57,990
And of course if you want, you can make it look, I'm sure, way nicer than what I'm doing.

75
00:04:58,200 --> 00:04:59,580
So this was just for.

76
00:04:59,970 --> 00:05:05,580
Sake that we've got all of that being displayed out on the page, so that was the second part of the

77
00:05:05,580 --> 00:05:06,030
challenge.

78
00:05:06,300 --> 00:05:08,130
So go ahead, construct this.

79
00:05:08,310 --> 00:05:13,590
So coming up next, we're going to continue to build out on this challenge, making these clickable

80
00:05:13,710 --> 00:05:16,470
and then adding them into our cart.

81
00:05:16,470 --> 00:05:18,170
So all of that is still yet to come.

82
00:05:18,300 --> 00:05:20,330
All the exciting stuff is yet to come.