1
00:00:02,000 --> 00:00:05,000
So let's now work on the HTML,

2
00:00:05,000 --> 00:00:08,000
the JSX code of an event item.

3
00:00:08,000 --> 00:00:11,000
Now here you should follow along closely

4
00:00:11,000 --> 00:00:14,000
because I will also provide finished styles

5
00:00:14,000 --> 00:00:16,000
to you in a second.

6
00:00:16,000 --> 00:00:19,000
And those styles will only do their job correctly

7
00:00:19,000 --> 00:00:22,000
if you have the same HTML code.

8
00:00:22,000 --> 00:00:25,000
So therefore make sure you follow along closely.

9
00:00:25,000 --> 00:00:28,000
Of course you can always use the code snap shots

10
00:00:28,000 --> 00:00:32,000
you find attached to the last lecture of every module

11
00:00:32,000 --> 00:00:34,000
to compare your code to mine

12
00:00:34,000 --> 00:00:36,000
incase you have some deviations somewhere.

13
00:00:37,000 --> 00:00:38,000
And therefore lets get started.

14
00:00:38,000 --> 00:00:40,000
I want to have an image here.

15
00:00:40,000 --> 00:00:43,000
An image element in every list item

16
00:00:43,000 --> 00:00:46,000
where we display the image of a chosen event

17
00:00:46,000 --> 00:00:49,000
or of a rendered event here.

18
00:00:49,000 --> 00:00:53,000
So we'll need to set up a source here and some alt text

19
00:00:53,000 --> 00:00:55,000
and we'll work on the data in a second

20
00:00:55,000 --> 00:00:58,000
for the moment let's just create the HTML code.

21
00:00:59,000 --> 00:01:01,000
And then below that I wanna have a <div>

22
00:01:01,000 --> 00:01:03,000
below that image.

23
00:01:03,000 --> 00:01:06,000
In there I wanna have two more <div>s

24
00:01:06,000 --> 00:01:09,000
and in the first <div> in here,

25
00:01:09,000 --> 00:01:14,000
I start with a title, an h2 element here,

26
00:01:14,000 --> 00:01:17,000
where we output the title of that event.

27
00:01:18,000 --> 00:01:20,000
Then below that another <div>

28
00:01:20,000 --> 00:01:23,000
where I want to add a time element

29
00:01:23,000 --> 00:01:26,000
which is a regular HTML element

30
00:01:26,000 --> 00:01:30,000
where the time or the date should be output

31
00:01:31,000 --> 00:01:35,000
and also then below this <div> another <div>

32
00:01:37,000 --> 00:01:40,000
where the address should be output.

33
00:01:40,000 --> 00:01:43,000
For this we can use the address HTML element

34
00:01:43,000 --> 00:01:45,000
which is also a regular element

35
00:01:45,000 --> 00:01:48,000
where we will see and render the address.

36
00:01:49,000 --> 00:01:52,000
With that we can move on to the other main <div>

37
00:01:52,000 --> 00:01:55,000
which we added side by side to this first <div>.

38
00:01:55,000 --> 00:01:57,000
As you're in this <div>,

39
00:01:57,000 --> 00:02:00,000
I in the end wanna have a clickable link.

40
00:02:00,000 --> 00:02:04,000
So for this we can use the link component

41
00:02:04,000 --> 00:02:06,000
which we need to import,

42
00:02:06,000 --> 00:02:10,000
we import link from next link as you learned,

43
00:02:10,000 --> 00:02:15,000
so that we can sent up a link that takes us to another page.

44
00:02:15,000 --> 00:02:18,000
So here we'll then need to set up the URL,

45
00:02:18,000 --> 00:02:20,000
the path to which it should navigate,

46
00:02:20,000 --> 00:02:22,000
we'll do it as later.

47
00:02:22,000 --> 00:02:26,000
And then as a text it could say explore event.

48
00:02:26,000 --> 00:02:28,000
That's the general mark up,

49
00:02:28,000 --> 00:02:31,000
the general HTML code which I wanna use.

50
00:02:31,000 --> 00:02:35,000
Now of course its lacking the concrete data though.

51
00:02:35,000 --> 00:02:37,000
So for this, we're getting props

52
00:02:37,000 --> 00:02:40,000
because that data should be passed in from outside

53
00:02:40,000 --> 00:02:43,000
and I'll again use object destructuring

54
00:02:43,000 --> 00:02:46,000
to pull out that data from the props.

55
00:02:46,000 --> 00:02:49,000
And I do expect that we get a title,

56
00:02:49,000 --> 00:02:51,000
that we get an image,

57
00:02:51,000 --> 00:02:55,000
that we get the dates and a location and an ID.

58
00:02:56,000 --> 00:03:00,000
Of course we could also just expect one event prop

59
00:03:00,000 --> 00:03:02,000
and pull out all the data from there

60
00:03:02,000 --> 00:03:04,000
but I expect multiple props here.

61
00:03:04,000 --> 00:03:07,000
You can of course expect whichever props you want.

62
00:03:09,000 --> 00:03:12,000
So now we got that and now here for example,

63
00:03:12,000 --> 00:03:15,000
we can output the title constant here

64
00:03:15,000 --> 00:03:17,000
which we get from props.

65
00:03:18,000 --> 00:03:20,000
Now for date and address,

66
00:03:20,000 --> 00:03:23,000
I just don't wanna output the data like this

67
00:03:23,000 --> 00:03:27,000
instead I want to transform it a little bit first.

68
00:03:27,000 --> 00:03:32,000
For example I want to set up a human readable date

69
00:03:32,000 --> 00:03:34,000
and for this I'll trade a new date object

70
00:03:34,000 --> 00:03:36,000
and pass date to it

71
00:03:36,000 --> 00:03:39,000
because date as we're getting it here

72
00:03:39,000 --> 00:03:44,000
we'll have this format which is kind of human readable

73
00:03:44,000 --> 00:03:46,000
but not really pretty.

74
00:03:46,000 --> 00:03:48,000
But thankfully that is a format

75
00:03:48,000 --> 00:03:51,000
which we can pass to the date constructor

76
00:03:51,000 --> 00:03:53,000
to turn it in a Java Scripted date object

77
00:03:53,000 --> 00:03:56,000
and on such a date object

78
00:03:56,000 --> 00:03:58,000
we can then call toLocaleDateString

79
00:03:59,000 --> 00:04:03,000
and then transform this into a human readable date string.

80
00:04:03,000 --> 00:04:06,000
The first argument here is to locale what we wanna use,

81
00:04:06,000 --> 00:04:09,000
and I will use en-US

82
00:04:09,000 --> 00:04:12,000
and the second argument then is an object

83
00:04:12,000 --> 00:04:14,000
where we can figure how the different parts

84
00:04:14,000 --> 00:04:17,000
of the date should be output.

85
00:04:17,000 --> 00:04:21,000
For example that a day should be output in numeric format

86
00:04:21,000 --> 00:04:24,000
month should be output in a long form

87
00:04:24,000 --> 00:04:29,000
and year should be output in numeric format as well.

88
00:04:30,000 --> 00:04:32,000
Now if you wanna learn more

89
00:04:32,000 --> 00:04:35,000
about this toLocaleDateString method

90
00:04:35,000 --> 00:04:38,000
you can of course search for mdn toLocaleDateString

91
00:04:38,000 --> 00:04:42,000
and find the kind of official docx on that

92
00:04:42,000 --> 00:04:44,000
and here you learn on how that works

93
00:04:44,000 --> 00:04:46,000
and which other options you would have

94
00:04:46,000 --> 00:04:49,000
when it comes to configuring the output.

95
00:04:49,000 --> 00:04:51,000
The configuration I chose here

96
00:04:51,000 --> 00:04:52,000
should work really well though

97
00:04:52,000 --> 00:04:55,000
and therefore now here instead of date,

98
00:04:55,000 --> 00:04:58,000
I'll put the human readable date like this.

99
00:05:01,000 --> 00:05:04,000
Now for the address I also want to format this

100
00:05:04,000 --> 00:05:08,000
and I'll create a formatted address where I use the location

101
00:05:08,000 --> 00:05:12,000
so this location proper getting, this one,

102
00:05:12,000 --> 00:05:14,000
and then on that I call replace

103
00:05:14,000 --> 00:05:19,000
and I replace comma wide space with backwards slash 'n'.

104
00:05:21,000 --> 00:05:24,000
Now all the locations, have such a comma in there

105
00:05:24,000 --> 00:05:28,000
to separate discrete from the postal code and city

106
00:05:28,000 --> 00:05:33,000
and I'm simply replacing that with backwards slash 'n'

107
00:05:33,000 --> 00:05:35,000
which adds a line break.

108
00:05:35,000 --> 00:05:37,000
So that's what I'm doing here.

109
00:05:39,000 --> 00:05:42,000
And therefore now we can use this forward method

110
00:05:42,000 --> 00:05:44,000
address down there.

111
00:05:44,000 --> 00:05:46,000
Now we'll need to add some styling

112
00:05:46,000 --> 00:05:48,000
for this line break to have an effect

113
00:05:48,000 --> 00:05:50,000
but we're going to do that later as well.

114
00:05:51,000 --> 00:05:53,000
Now we also have an image of course

115
00:05:53,000 --> 00:05:55,000
which we wanna set up here.

116
00:05:55,000 --> 00:05:59,000
And the image is just a string in the dummy data

117
00:05:59,000 --> 00:06:03,000
which is a path to an image which we added locally here.

118
00:06:03,000 --> 00:06:08,000
So we have that images slash image name path

119
00:06:08,000 --> 00:06:09,000
in our public folder.

120
00:06:11,000 --> 00:06:12,000
That's why you should make sure

121
00:06:12,000 --> 00:06:16,000
that this image path and name matches your path

122
00:06:16,000 --> 00:06:18,000
you added your imaging.

123
00:06:19,000 --> 00:06:22,000
But now that we do have this link here,

124
00:06:22,000 --> 00:06:27,000
we now can bind source to forward slash plus image.

125
00:06:28,000 --> 00:06:33,000
Image is our prop here and image will be a string like this

126
00:06:33,000 --> 00:06:35,000
and I'm just adding a forward slash at the beginning.

127
00:06:35,000 --> 00:06:38,000
And since all the content in the public folder

128
00:06:38,000 --> 00:06:42,000
will be served statically by Next.js,

129
00:06:42,000 --> 00:06:46,000
this request to slash images slash image name

130
00:06:46,000 --> 00:06:47,000
will succeed.

131
00:06:48,000 --> 00:06:52,000
We don't need to add public at the beginning here

132
00:06:52,000 --> 00:06:54,000
so it's not slash public slash

133
00:06:54,000 --> 00:06:59,000
but just slash because it's the content of the public folder

134
00:06:59,000 --> 00:07:01,000
which will be served statically.

135
00:07:01,000 --> 00:07:03,000
So public should be excluded,

136
00:07:03,000 --> 00:07:06,000
because we don't need to dive into that folder first

137
00:07:06,000 --> 00:07:08,000
it's the content of the folder

138
00:07:08,000 --> 00:07:10,000
which is being served by Next.js.

139
00:07:10,000 --> 00:07:12,000
So we can navigate

140
00:07:12,000 --> 00:07:15,000
as if we already were inside of that folder.

141
00:07:16,000 --> 00:07:19,000
Now for the alt text algorithm was my title again.

142
00:07:20,000 --> 00:07:22,000
With <div> we're almost done

143
00:07:22,000 --> 00:07:26,000
but we also wanna wire up that link address

144
00:07:26,000 --> 00:07:29,000
that link target here.

145
00:07:29,000 --> 00:07:31,000
And for this I wanna construct a link

146
00:07:31,000 --> 00:07:34,000
which takes this ID into account.

147
00:07:34,000 --> 00:07:39,000
I'll add a new constant here and named is exploreLink

148
00:07:39,000 --> 00:07:41,000
of course this name is up to you,

149
00:07:41,000 --> 00:07:44,000
and here I'll use a template literal and start with

150
00:07:44,000 --> 00:07:49,000
/events/ and then inject something dynamic into this spring

151
00:07:52,000 --> 00:07:53,000
I'll inject a the ID

152
00:07:54,000 --> 00:07:57,000
the value which we get on the ID prop here.

153
00:07:57,000 --> 00:08:01,000
So that exploreLink is a string that includes that ID

154
00:08:01,000 --> 00:08:03,000
and then it's just exploring

155
00:08:03,000 --> 00:08:07,000
which I bind here as a value to ref.

156
00:08:08,000 --> 00:08:11,000
And then with all that done,

157
00:08:11,000 --> 00:08:16,000
this component lacks styling but is generally ready to go.

158
00:08:17,000 --> 00:08:21,000
So now in event list we need to pass all that data

159
00:08:21,000 --> 00:08:24,000
which is expected by event item

160
00:08:24,000 --> 00:08:28,000
we need to pass those props into event item here now.

161
00:08:28,000 --> 00:08:33,000
So here I add the ID prop and pass in event.id.

162
00:08:33,000 --> 00:08:38,000
I add the title prop and pass in event.title.

163
00:08:38,000 --> 00:08:43,000
We add the location prop and pass in event.location

164
00:08:43,000 --> 00:08:44,000
and so on.

165
00:08:44,000 --> 00:08:47,000
It will be the same for the date, with event.date

166
00:08:47,000 --> 00:08:51,000
and the same for the image with event.image.

167
00:08:51,000 --> 00:08:53,000
And dozens for mapping here

168
00:08:53,000 --> 00:08:55,000
and since we are creating a list of items

169
00:08:55,000 --> 00:08:57,000
we should also set the key prop

170
00:08:57,000 --> 00:09:00,000
which is not expected by our component

171
00:09:00,000 --> 00:09:04,000
but by react whenever you output a list dynamically

172
00:09:04,000 --> 00:09:07,000
and here we pass in event ideas.

173
00:09:07,000 --> 00:09:09,000
Well since instead will be a unique identifier

174
00:09:09,000 --> 00:09:11,000
per list item.

175
00:09:12,000 --> 00:09:13,000
And now with all of that,

176
00:09:13,000 --> 00:09:16,000
we can use this EventList component

177
00:09:16,000 --> 00:09:18,000
in our starting page component.

178
00:09:18,000 --> 00:09:20,000
So in the home page component.

179
00:09:21,000 --> 00:09:26,000
For this we import the EventList component

180
00:09:26,000 --> 00:09:31,000
from going up one level diving into components, events,

181
00:09:31,000 --> 00:09:36,000
event list and then here instead of just unorder list,

182
00:09:36,000 --> 00:09:39,000
we can simply output event list like that.

183
00:09:40,000 --> 00:09:42,000
And now last but not least,

184
00:09:42,000 --> 00:09:43,000
we just need to make sure

185
00:09:43,000 --> 00:09:47,000
that we passed in items to event list.

186
00:09:47,000 --> 00:09:49,000
So here in the homepage component,

187
00:09:49,000 --> 00:09:50,000
we start with the items props

188
00:09:50,000 --> 00:09:54,000
and pass our featured events into EventList.

189
00:09:54,000 --> 00:09:57,000
And if we now save all files

190
00:09:57,000 --> 00:10:01,000
and reload I get an error numeric is not defined

191
00:10:01,000 --> 00:10:03,000
the cause an event item

192
00:10:03,000 --> 00:10:06,000
that should also be a string wrapped by quotes.

193
00:10:06,000 --> 00:10:11,000
Now if I save this, now we have a large image here

194
00:10:11,000 --> 00:10:12,000
and yeah.

195
00:10:12,000 --> 00:10:14,000
If we scroll we see the data is there

196
00:10:14,000 --> 00:10:17,000
but of course it's lacking styling

197
00:10:17,000 --> 00:10:20,000
and that's the effort which we're going to work on next