WEBVTT

1
00:00:00.000 --> 00:00:05.004
(upbeat music)

2
00:00:05.004 --> 00:00:06.003
- [Instructor] There are several ways

3
00:00:06.003 --> 00:00:07.005
you can solve this challenge.

4
00:00:07.005 --> 00:00:08.003
I'll walk you through the one

5
00:00:08.003 --> 00:00:10.003
I think is the most straightforward.

6
00:00:10.003 --> 00:00:13.005
It all happens inside the create backpack markup function.

7
00:00:13.005 --> 00:00:16.002
This will be our content factory.

8
00:00:16.002 --> 00:00:19.006
What we need to do is grab the backpack object array

9
00:00:19.006 --> 00:00:21.009
and then iterate through each of the items

10
00:00:21.009 --> 00:00:25.002
and generate HTML for the data within each of the items

11
00:00:25.002 --> 00:00:26.007
and then somehow return that.

12
00:00:26.007 --> 00:00:29.007
And if we look inside create backpack markup right now,

13
00:00:29.007 --> 00:00:33.001
you'll notice we're sort of partway there already.

14
00:00:33.001 --> 00:00:36.009
We have a constant called content that can contains HTML

15
00:00:36.009 --> 00:00:38.009
for our backpack objects,

16
00:00:38.009 --> 00:00:41.006
but currently it's just calling one of the backpacks.

17
00:00:41.006 --> 00:00:45.004
Then content is returned to our testing function.

18
00:00:45.004 --> 00:00:47.006
So I need to change the contents

19
00:00:47.006 --> 00:00:50.009
within content to contain all the information

20
00:00:50.009 --> 00:00:52.009
for both of the backpacks.

21
00:00:52.009 --> 00:00:55.008
And I can do that using the map method.

22
00:00:55.008 --> 00:00:57.000
So at the very top here,

23
00:00:57.000 --> 00:00:59.004
I'll start out by creating a couple of new lines.

24
00:00:59.004 --> 00:01:00.009
And then I'll rename this function

25
00:01:00.009 --> 00:01:03.008
to HTML for now, just for reference.

26
00:01:03.008 --> 00:01:05.002
I'll change it later.

27
00:01:05.002 --> 00:01:08.004
Then I'll set up a new constant called content,

28
00:01:08.004 --> 00:01:11.008
and this will be the constant that we return inside content.

29
00:01:11.008 --> 00:01:16.002
I'll now grab backpack object array

30
00:01:16.002 --> 00:01:19.002
and I'll use the map method on the array.

31
00:01:19.002 --> 00:01:22.002
You'll remember the map method allows us to grab each item

32
00:01:22.002 --> 00:01:25.003
of an array, perform a callback function on that item,

33
00:01:25.003 --> 00:01:27.006
and then return the result of that function

34
00:01:27.006 --> 00:01:29.000
into the container.

35
00:01:29.000 --> 00:01:31.000
So that way we can grab an item,

36
00:01:31.000 --> 00:01:34.002
generate HTML for that item, and then return the HTML

37
00:01:34.002 --> 00:01:37.003
into the array inside the content array.

38
00:01:37.003 --> 00:01:40.001
For map to work, I need to set up my callback function.

39
00:01:40.001 --> 00:01:45.000
So I'll grab backpack and I'll set up arrow function here.

40
00:01:45.000 --> 00:01:47.002
And then everything's going to happen

41
00:01:47.002 --> 00:01:48.001
inside this arrow function.

42
00:01:48.001 --> 00:01:50.007
So I'm going to cut out this code here

43
00:01:50.007 --> 00:01:53.005
and place it inside my arrow function

44
00:01:53.005 --> 00:01:58.003
and then just indent everything so it's nice and pretty.

45
00:01:58.003 --> 00:02:01.007
And then at the very top here, I'll say, okay,

46
00:02:01.007 --> 00:02:03.000
now we have a backpack.

47
00:02:03.000 --> 00:02:05.004
I first need to create an article

48
00:02:05.004 --> 00:02:07.005
with the ID matching the field,

49
00:02:07.005 --> 00:02:09.006
the ID field, and the backpack object.

50
00:02:09.006 --> 00:02:14.004
So I'll set up a let called backpack article

51
00:02:14.004 --> 00:02:22.002
and I'll set it equal to document, create element article.

52
00:02:22.002 --> 00:02:25.000
Then I'll grab backpack article.

53
00:02:25.000 --> 00:02:34.003
I'll set the attribute ID to backpack ID.

54
00:02:34.003 --> 00:02:37.001
So now we're going into the backpack item,

55
00:02:37.001 --> 00:02:40.006
grabbing the first item there because that is the ID

56
00:02:40.006 --> 00:02:44.006
and displaying it as the ID for the article elements.

57
00:02:44.006 --> 00:02:47.001
All right, now that I have an article element,

58
00:02:47.001 --> 00:02:48.007
I need to populate it with content,

59
00:02:48.007 --> 00:02:50.007
and that's where this stuff comes in.

60
00:02:50.007 --> 00:02:53.004
So instead of saying const HTML equals,

61
00:02:53.004 --> 00:02:55.005
I'm going to cheat and instead say

62
00:02:55.005 --> 00:03:00.007
backpack article.inner HTML equals

63
00:03:00.007 --> 00:03:03.005
and just set it to this information here.

64
00:03:03.005 --> 00:03:05.003
Now this isn't quite ready yet,

65
00:03:05.003 --> 00:03:07.006
but I'm going to leave it the way it is for now

66
00:03:07.006 --> 00:03:13.005
and just return backpack article.

67
00:03:13.005 --> 00:03:17.004
That's to ensure the map method returns this HTML

68
00:03:17.004 --> 00:03:19.003
into the content array so that we can

69
00:03:19.003 --> 00:03:21.009
return the content array to the testing method.

70
00:03:21.009 --> 00:03:24.004
Alright, let's test the code right now just to make sure

71
00:03:24.004 --> 00:03:26.007
things are working so far.

72
00:03:26.007 --> 00:03:28.004
Over here in the console output,

73
00:03:28.004 --> 00:03:31.006
I see map issues, create element issues,

74
00:03:31.006 --> 00:03:32.004
set attributes used,

75
00:03:32.004 --> 00:03:35.000
but the output does not match the test case.

76
00:03:35.000 --> 00:03:36.004
And if I scroll down, I can see why.

77
00:03:36.004 --> 00:03:38.008
Immediately notice how the information is the same.

78
00:03:38.008 --> 00:03:40.002
Everyday backpack.

79
00:03:40.002 --> 00:03:41.006
Everyday backpack.

80
00:03:41.006 --> 00:03:45.002
Hmm. But we're iterating through the items, right?

81
00:03:45.002 --> 00:03:47.003
The error is obvious.

82
00:03:47.003 --> 00:03:49.008
We need to refer to backpack,

83
00:03:49.008 --> 00:03:52.005
but in the original code we're referring to everyday pack.

84
00:03:52.005 --> 00:03:54.007
So I need to change all these references here

85
00:03:54.007 --> 00:04:00.000
to everyday from everyday pack to backpack and run.

86
00:04:00.000 --> 00:04:01.009
Test my code again.

87
00:04:01.009 --> 00:04:04.007
So this time I can see there are two different pieces

88
00:04:04.007 --> 00:04:08.008
of information here, but test still fails.

89
00:04:08.008 --> 00:04:11.002
Now looking at the output, I can see why.

90
00:04:11.002 --> 00:04:15.002
'Cause it says here, age December 5th, 2018,

91
00:04:15.002 --> 00:04:18.000
1500 hours, days old.

92
00:04:18.000 --> 00:04:19.005
Yeah, so that's not correct.

93
00:04:19.005 --> 00:04:21.006
And if we look at the instructions,

94
00:04:21.006 --> 00:04:24.001
it says use the backpack age function

95
00:04:24.001 --> 00:04:26.001
to calculate the backpack age.

96
00:04:26.001 --> 00:04:28.002
All right, now let's scroll up

97
00:04:28.002 --> 00:04:31.009
and see inside the backpack object constructor,

98
00:04:31.009 --> 00:04:35.004
there's a method called backpack age.

99
00:04:35.004 --> 00:04:37.007
And because the method belongs to the object itself,

100
00:04:37.007 --> 00:04:39.007
we can use the method directly.

101
00:04:39.007 --> 00:04:40.008
So down here,

102
00:04:40.008 --> 00:04:44.000
instead of saying age and then backpack date acquired,

103
00:04:44.000 --> 00:04:46.006
which just outputs the date acquired,

104
00:04:46.006 --> 00:04:48.008
we can call that method.

105
00:04:48.008 --> 00:04:53.009
So we'll call backpack age.

106
00:04:53.009 --> 00:04:57.006
Click test my code again.

107
00:04:57.006 --> 00:04:59.005
All test now pass.

108
00:04:59.005 --> 00:05:02.007
And here we have the days old message.

109
00:05:02.007 --> 00:05:03.006
How does that work?

110
00:05:03.006 --> 00:05:05.004
Well, if we scroll back up again, you can see

111
00:05:05.004 --> 00:05:09.000
in the backpack age method, we set up the new date,

112
00:05:09.000 --> 00:05:12.003
then grab the date acquired, and then do the math to find

113
00:05:12.003 --> 00:05:14.009
out how many days there have been between the date acquired

114
00:05:14.009 --> 00:05:18.009
and today's date, and then return days since acquired.

115
00:05:18.009 --> 00:05:19.007
That's it.

116
00:05:19.007 --> 00:05:21.005
That's the solution to this challenge.