Original subtitles

1 1

Let's now add some EventListeners to our application, 2

2

and kind of simulate that we already have 3

3

some search results in place. 4

4

And let's start by taking a quick look 5

5

at our flowchart here. 6

6

So we already implemented this part here 7

7

of loading a recipe, and also of rendering it. 8

8

But now in this lecture, 9

9

we want to also hook up these two event listeners here, 10

10

so that the recipe is actually loaded 11

11

on one of these two events here. 12

12

So when the user selects a recipe from the results list, 13

13

or when the page loads with a certain recipe Id. 14

14

Okay, so let's do that. 15

15

And let's also take a quick look here at the demo version. 16

16

So searching for pizza again, 17

17

and let's click on any recipe here. 18

18

And so again, here, you see that we have this hash. 19

19

So everything that comes after 20

20

this hash symbol here is called the hash. 21

21

So this is the idea of the recipe. 22

22

And all of this together is called the hash. 23

23

And the way this is going to work 24

24

is that whenever this hash here changes, 25

25

a new recipe is going to be loaded. 26

26

So if we click here, now, 27

27

watch what happens there in the hash. 28

28

So you see that it changed. 29

29

And that changing of the hash 30

30

is actually an event that we can listen for. 31

31

So again, the hash here now changed, you see, 32

32

and so we can then listen for that event, 33

33

take the hash, and from there, 34

34

take the Id, and then load the recipe with that Id. 35

35

Okay, did you follow that. 36

36

And if not, that's not a big deal. 37

37

So let's just see in code, what I mean by that. 38

38

And to start, we actually need a way 39

39

of triggering a change of the hash. 40

40

All right, and we can do that 41

41

by adding a fake link here, in the search results. 42

42

So let's simply add a link here with the href of hash. 43

43

And then here as the hash, let's actually copy this one, 44

44

and you can copy any other Id, 45

45

this doesn't really matter. 46

46

This is just to show you how we can listen 47

47

for the event of that hash changing. 48

48

So give it a safe. 49

49

And so here now is that very small link. 50

50

And watch what happens when I click here. 51

51

So you see that the hash changed, right? 52

52

And actually, let's add another one here. 53

53

So one and two men are here from the controller, 54

54

I can get one of these Ids. 55

55

So let's say this one, 56

56

and put that one here. 57

57

So these are two Ids of two different recipes. 58

58

And now as we click each of them, 59

59

you see that the hash up there, 60

60

in the URL bar keeps changing. 61

61

And so again, we can listen for that event. 62

62

And so let's do that now. 63

63

So let's come down here. 64

64

And then window.addEeventListener. 65

65

And the name of the event is called hashchange. 66

66

Okay. 67

67

And the function that we want to run then is showrecipe. 68

68

So let's remove it from here 69

69

and only run the showrecipe function 70

70

whenever that hashchanges. 71

71

However, that is not really helpful yet. 72

72

Because the next step is that 73

73

we actually need to get the recipe Id from the hash. 74

74

Right. So let's go up here. 75

75

And so let me just show you what I mean. 76

76

So right now when we click here, 77

77

then some recipe will get shown. 78

78

So you see that it loaded this spicy chicken. 79

79

But now if I click here, 80

80

then it will load the same one, 81

81

because we are still hard coding this Id here. 82

82

But instead, here, 83

83

we want to show the recipe 84

84

with this Id in here with this other Id, right? 85

85

So we want to dynamically get the Id here from the hash. 86

86

And that's pretty easy to do, actually. 87

87

So we can actually do that out here of the try. 88

88

Or we can also do it inside. 89

89

So that's not really important. 90

90

So let's say the Id is window.location, 91

91

which is basically the entire URL, 92

92

and then from there, we can take to hash. 93

93

Now that's not yet everything. 94

94

But let me show you what the Id looks like right now. 95

95

So let's see. 96

96

And here it is. 97

97

So it's basically the Id plus this hash symbol. 98

98

And so we want to basically remove this first character. 99

99

Or in other words, 100

100

we only want to start reading from 101

101

the string basically, at the first position. 102

102

So we can do that easily, using the slice method, 103

103

starting at one, all the way to the end. 104

104

And so now, instead of having the Id hard coded here, 105

105

like we have, right now, 106

106

we can simply insert the Id right there. 107

107

So Id, 108

108

and so Let's now check. 109

109

Okay, and now it's Jay's signature pizza crust. 110

110

And if you go here, then it's the spicy chicken. 111

111

And as we click here, then again, it changes. 112

112

And you see that the Id that we get here, 113

113

of this recipe object 114

114

is indeed exactly this one here, 115

115

that is coming from the URL bar. 116

116

Great. 117

117

So this was actually already a pretty important part 118

118

of our applications functionality. 119

119

But now what happens if we take this entire URL 120

120

and copy it and want to open it in another tab? 121

121

Well, then no recipe at all shows up. 122

122

And so that's because this time, 123

123

the hash did not really change, right? 124

124

We simply opened this page here, 125

125

but we never changed the hash. 126

126

And so we also want to listen for the load event. 127

127

So basically, 128

128

for the event of the entire page loading. 129

129

Okay, and that's easy enough. 130

130

So all we would have to do is duplicate this, 131

131

and listen for the load event. 132

132

So this event here is fired off 133

133

immediately after the page has completed loading. 134

134

But here we have some duplicate code. 135

135

And so I actually wanted to show you a nice way 136

136

in which we can do all of this at the same time. 137

137

And imagine you had like 10 events 138

138

for which you wanted to run 139

139

the same event handler function. 140

140

So then it wouldn't be good 141

141

to have this same code here 10 times. 142

142

Right. And so instead, 143

143

what we can do 144

144

is a nice array, 145

145

which contains these two events. 146

146

So hashchange, 147

147

and load. 148

148

And then we can simply loop over 149

149

this array and do something. 150

150

And so for that we use forEach. 151

151

And in this array, each element is an event. 152

152

So e for event. 153

153

And then here, 154

154

all we have to do is window.addEventListener, 155

155

and then the event. 156

156

Let's call it ev, because usually, 157

157

the e is the actual event object. 158

158

So let's not get confused here. 159

159

So the event and then the handler function. 160

160

Okay, so this is not exactly the same 161

161

as having these two lines here. 162

162

So in the first iteration, 163

163

this ev will be hash change. 164

164

And in the second, it will be load. 165

165

Right? 166

166

Let's just comment this part out. 167

167

And, well, let's copy this again. 168

168

Close it, and open. 169

169

And indeed, 170

170

now it loaded the recipe right at the beginning. 171

171

Okay. 172

172

And now, just one more scenario, 173

173

let's say we dIdn't have any hash, 174

174

well, then we get an error. 175

175

Right? So something went wrong. 176

176

And then our spinner here keeps loading forever. 177

177

And so the problem is that right now, 178

178

we don't have any Id. 179

179

Right? 180

180

So right here, 181

181

we are trying to read the Id, 182

182

but then the location doesn't have any hash. 183

183

And so therefore, maybe you saw it here, 184

184

we have an empty string, basically. 185

185

And so then we are trying to find the recipe 186

186

for the empty string. 187

187

And so of course, then we get an error. 188

188

And that error will then trigger 189

189

the alert window that we saw. 190

190

And so let's put a simple guard clause right here, 191

191

saying that if there is no Id, 192

192

then return. 193

193

Then that's it. 194

194

And again, using guard clauses like this 195

195

is really the modern way of performing this test. 196

196

So the old way would have been to write if Id. 197

197

And then we would have to wrap all of 198

198

this code here into def block. 199

199

And so that would then create unnecessary nesting 200

200

and make our code harder to read. 201

201

So if we save it now, 202

202

and reload it now, well, 203

203

then we don't get any error, 204

204

and everything works fine. 205

205

And so we can now safely click here. 206

206

And then each of these different links 207

207

will load these different recipes. 208

208

Alright. 209

209

And that's actually it for 210

210

the very core functionality here 211

211

that we have in our flowchart. 212

212

So at least have this right side of the flowchart. 213

213

So this is now basically implemented at this point. 214

214

However, it is not implemented in a very clean way. 215

215

And so in the next lecture, 216

216

it is finally time to talk a little bit about 217

217

the architecture that we're going 218

218

to implement in this project.