0
1
00:00:00,420 --> 00:00:00,740
All right.
1

2
00:00:00,750 --> 00:00:05,210
So as always we're going to get started by creating a brand new project.
2

3
00:00:05,310 --> 00:00:11,520
So I'm going to cdover to my desktop and then my web development folder and inside here I'm going to
3

4
00:00:11,520 --> 00:00:16,140
create a new directory that's called todolist -v1.
4

5
00:00:16,410 --> 00:00:21,450
And this is because in this module we're going to be building version 1 of this to-do list which we
5

6
00:00:21,450 --> 00:00:25,350
will continue to improve in the next module.
6

7
00:00:25,350 --> 00:00:30,270
So we're going to call this todolist v1. Of course feel free to create your project any way you wish
7

8
00:00:30,630 --> 00:00:37,590
but once you're done let's cd over to it and we're going to create some files.
8

9
00:00:37,590 --> 00:00:42,120
So I'm going to use touch to create a index.html as well as an App.
9

10
00:00:42,130 --> 00:00:43,160
js.
10

11
00:00:43,200 --> 00:00:50,660
And finally I'm going to initialize npm. And I'm just going to keep all of the default options and hit
11

12
00:00:50,670 --> 00:00:51,520
Yes.
12

13
00:00:51,660 --> 00:00:56,800
And finally I'm going to npm install. So you can use npm i for short if you wish
13

14
00:00:56,850 --> 00:01:00,830
if you don't want to type out the entire long word that is install.
14

15
00:01:00,990 --> 00:01:04,120
So as you get used to this you can start using this as a shortcut.
15

16
00:01:04,320 --> 00:01:12,310
So we're going to install express as well as body-parser, our good old standard modules.
16

17
00:01:12,510 --> 00:01:21,270
So once that's done let's go ahead and open this project up using Atom and we are now ready to begin
17

18
00:01:21,270 --> 00:01:24,050
developing our brand new app.
18

19
00:01:24,060 --> 00:01:27,310
So let's head over to our App.js.
19

20
00:01:27,450 --> 00:01:34,080
Now we've already set up our App.js or our server a few times now and every single time you set up
20

21
00:01:34,170 --> 00:01:37,820
a new project you're pretty much doing the same thing.
21

22
00:01:37,860 --> 00:01:44,940
So sometimes you might find it helpful to simply create a template file that you can paste in here with
22

23
00:01:45,000 --> 00:01:47,580
all of the parts that you commonly use
23

24
00:01:47,700 --> 00:01:51,200
for example changing the jshint to ES version 6,
24

25
00:01:51,360 --> 00:01:59,240
adding in our express and body-parser, creating our app, creating the first get route on the home route
25

26
00:01:59,370 --> 00:02:02,500
and then writing the app.listen on port 3000.
26

27
00:02:02,520 --> 00:02:04,570
Now this is very repetitive
27

28
00:02:04,640 --> 00:02:10,650
and so if you don't want to type it out every single time then feel free to take a look inside the resources
28

29
00:02:10,650 --> 00:02:16,890
section of this lesson where I provided the App.js file that you can simply copy and paste into
29

30
00:02:16,890 --> 00:02:18,970
your own App.js. Now
30

31
00:02:18,970 --> 00:02:25,320
however some students find that they want to get extra practice and they want to write out more code.
31

32
00:02:25,320 --> 00:02:31,480
So both ways are equally fine and I'll leave it up to you to decide which path you want to choose.
32

33
00:02:31,500 --> 00:02:33,150
But let's just walk through this.
33

34
00:02:33,150 --> 00:02:37,850
We're requiring our two packages that we just installed: express and body-parser.
34

35
00:02:38,130 --> 00:02:41,810
And we're creating our app constant by using express.
35

36
00:02:42,030 --> 00:02:47,670
And then we create a simple get route that just sends the browser the word hello when a user tries to
36

37
00:02:47,670 --> 00:02:49,380
access the home route.
37

38
00:02:49,380 --> 00:02:53,870
And then finally we listen on port 3000 and we console log
38

39
00:02:53,910 --> 00:02:56,040
that our server has been started.
39

40
00:02:56,040 --> 00:03:02,340
Now if any part of this is confusing at all, make sure that you don't skip any of the previous modules
40

41
00:03:02,370 --> 00:03:08,400
because all the knowledge builds on each progressive module and it might get a little bit confusing
41

42
00:03:08,430 --> 00:03:10,530
if you jump around in the course.
42

43
00:03:10,590 --> 00:03:13,070
So take a look back at some of those lessons
43

44
00:03:13,080 --> 00:03:17,760
if this is confusing at all. It shouldn't be because by this point they should be pretty familiar to
44

45
00:03:17,760 --> 00:03:18,290
you.
45

46
00:03:18,630 --> 00:03:22,120
All right so let's talk about this res.send.
46

47
00:03:22,380 --> 00:03:31,410
Because so far we've been passing data from our server our App.js, to the browser via this send method.
47

48
00:03:31,620 --> 00:03:38,580
And we've been saying response as in the response from our server is send this message.
48

49
00:03:38,610 --> 00:03:42,060
So that's how we've been passing data around.
49

50
00:03:42,090 --> 00:03:45,660
Now this allows us to perform some logic on the server side.
50

51
00:03:45,660 --> 00:03:53,490
So for example we could you know do some calculations, say var a =  3 + 5 and then we
51

52
00:03:53,490 --> 00:04:00,640
can send this variable a back to the browser as a response to the browser.
52

53
00:04:00,810 --> 00:04:07,740
So that allows us to do a lot of calculations or processing on our server side and then only once that's
53

54
00:04:07,740 --> 00:04:10,740
done to send the result back to the browser.
54

55
00:04:10,830 --> 00:04:17,010
And this allows us render different results to the user depending on the logic that we include inside
55

56
00:04:17,370 --> 00:04:18,740
our server.
56

57
00:04:18,750 --> 00:04:27,780
Now let's write some logic to test if the current day of the week happens to be on a weekend and we're
57

58
00:04:27,780 --> 00:04:30,270
going to send a message depending on the day.
58

59
00:04:30,270 --> 00:04:36,360
So we're going to write some logic code inside our server where it's going to be processed and then
59

60
00:04:36,360 --> 00:04:39,830
we're just going to send the result back to the browser.
60

61
00:04:40,260 --> 00:04:43,160
So let's create a new variable called today.
61

62
00:04:43,430 --> 00:04:45,550
And this is going to be a new date.
62

63
00:04:45,570 --> 00:04:54,180
This is just bog standard Javascript. And then we're going to say if today.getDay which gets the
63

64
00:04:54,180 --> 00:04:57,260
day of the week as a number.
64

65
00:04:57,480 --> 00:05:01,860
So for example Monday will be 1 Saturday will be 6.
65

66
00:05:02,160 --> 00:05:09,780
And then we're going to test whether if this number is equal to the weekend which is Saturday for 6,
66

67
00:05:10,110 --> 00:05:18,050
or it could be-- or it could be Sunday which happens to be 0.
67

68
00:05:18,270 --> 00:05:27,810
So we'll say if today.getDay is equal to 6 or if today.getDay is equal to 0
68

69
00:05:27,930 --> 00:05:34,680
then in that case we're going to reas.send a message saying, 'Yay! It's the weekend'.
69

70
00:05:37,920 --> 00:05:51,400
Alternatively or other else, then it's going to be a weekday a working day and it will instead send...
70

71
00:05:51,420 --> 00:05:57,510
So we've created our conditional statement that tests whether if the current date when the request of
71

72
00:05:57,510 --> 00:06:05,400
the server is made is equal to a Saturday or a Sunday and then we send a different message depending
72

73
00:06:05,400 --> 00:06:07,670
on whether that is true or false.
73

74
00:06:07,890 --> 00:06:14,100
So today as you can see is currently a Thursday and hence that's why I'm recording this video because
74

75
00:06:14,130 --> 00:06:15,350
it is a working day.
75

76
00:06:15,360 --> 00:06:21,640
So let's see if we get this message triggered when we run our app.
76

77
00:06:21,720 --> 00:06:23,830
So I'm going to go over to hyper
77

78
00:06:23,840 --> 00:06:27,020
and I'm going to start off my nodemon on App.
78

79
00:06:27,060 --> 00:06:27,800
js.
79

80
00:06:27,960 --> 00:06:34,580
And then I'm going to head over to my localhost:3000 to see the message being sent.
80

81
00:06:34,670 --> 00:06:37,990
Boo! I have to work because today is a Thursday.
81

82
00:06:38,310 --> 00:06:45,080
So let's just make sure that this is actually working by checking to see if it is Thursday.
82

83
00:06:45,120 --> 00:06:50,720
So if today is equal to 4, which is Thursday, then it should send me this message.
83

84
00:06:50,850 --> 00:06:57,150
And of course it's not a weekend, I'm just pretending that it is to make myself feel better.
84

85
00:06:57,480 --> 00:07:03,830
So let's go over to our localhost and of course nodemon will be monitoring our changes and 
85

86
00:07:03,840 --> 00:07:05,650
it's already started the server.
86

87
00:07:05,790 --> 00:07:13,080
So if I just go ahead and refresh then we trigger the different message because today is indeed number
87

88
00:07:13,120 --> 00:07:15,300
4, Thursday.
88

89
00:07:15,390 --> 00:07:18,150
Now you might wonder where did I get this method from?
89

90
00:07:18,150 --> 00:07:20,310
How do I know how to do that?
90

91
00:07:20,430 --> 00:07:24,180
Then of course remember that this is just on the Javascript
91

92
00:07:24,180 --> 00:07:29,730
and if you don't want to search through MDN or you have trouble finding it, then there's always good
92

93
00:07:29,730 --> 00:07:30,820
old Google.
93

94
00:07:30,870 --> 00:07:40,380
So you could search with something like 'get date of the week javascript' and we get w3schools.com and
94

95
00:07:40,450 --> 00:07:47,760
mdn and Stack Overflow all telling us the same thing which is we need this getDay method.
95

96
00:07:47,760 --> 00:07:53,220
And if you want to look at how you can use it then of course head over to the documentation for that
96

97
00:07:53,310 --> 00:07:54,670
relevant method.
97

98
00:07:54,840 --> 00:08:03,000
Then you can see that we can create a new date and we can get the day on that date and it will tell
98

99
00:08:03,000 --> 00:08:07,380
us Sunday through to Saturday which 0 - 6.
99

100
00:08:07,380 --> 00:08:12,350
So just a quick reminder that the documentation is like your family.
100

101
00:08:12,450 --> 00:08:16,860
Sometimes you find them difficult to deal with but they're always there for you.
101

102
00:08:17,130 --> 00:08:18,660
So let's continue.
102

103
00:08:18,840 --> 00:08:22,820
So as you can see our code is now working.
103

104
00:08:23,220 --> 00:08:32,700
Now if you want to make this a little bit better you can for example say var current day = today
104

105
00:08:33,300 --> 00:08:35,700
.getDay.
105

106
00:08:36,660 --> 00:08:44,910
And that way you can reduce the amount of repetition over here by saying if current day is equal to
106

107
00:08:44,920 --> 00:08:50,450
6 or current day is equal to 0,
107

108
00:08:50,450 --> 00:08:56,360
Saturday or Sunday, then do this or if it's false then do that.
108

109
00:08:56,360 --> 00:08:58,460
That just reduces it by one step
109

110
00:08:58,460 --> 00:09:00,260
if you find that helpful.
110

111
00:09:00,260 --> 00:09:06,720
Now what if we wanted to send the data back to the browser as HTML?
111

112
00:09:07,040 --> 00:09:11,820
Well we can do that by still using res.send.
112

113
00:09:11,840 --> 00:09:21,530
But in this case we're adding our HTML elements in, so our tags. So I can add a opening tag and a closing
113

114
00:09:21,530 --> 00:09:24,430
tag to whatever we send back.
114

115
00:09:24,680 --> 00:09:31,700
And this, when we refresh our website, you will see who gets rendered as proper HTML.
115

116
00:09:31,700 --> 00:09:33,000
Now here's the next question.
116

117
00:09:33,020 --> 00:09:38,890
What if we want to send multiple pieces of HTML back to the browser?
117

118
00:09:39,140 --> 00:09:44,710
Well we can't use res.send anymore because this only allows you to send one piece of data.
118

119
00:09:44,720 --> 00:09:50,420
You can't write a whole bunch of res.sends. When the server sees res.send, it sees this as the
119

120
00:09:50,420 --> 00:09:52,510
final sending instruction.
120

121
00:09:52,790 --> 00:09:56,650
But we can use a different method called res.
121

122
00:09:56,740 --> 00:09:57,550
write
122

123
00:09:57,560 --> 00:10:00,040
to send multiple pieces of data.
123

124
00:10:00,230 --> 00:10:07,540
So for example we can say res.write, Boo! I have to work'. And we add another one above
124

125
00:10:07,580 --> 00:10:11,220
let's say this is a paragraph tag instead.
125

126
00:10:11,540 --> 00:10:20,430
And instead of saying, Boo! I  have to work', we're going to say 'It is not the weekend'. And once
126

127
00:10:20,430 --> 00:10:26,150
you're done with all of your res.writes, then you can write res.send.
127

128
00:10:26,430 --> 00:10:30,120
And this basically sends off all of our messages.
128

129
00:10:30,150 --> 00:10:34,490
So let's hit save and refresh.
129

130
00:10:34,490 --> 00:10:35,780
It's not the weekend
130

131
00:10:35,820 --> 00:10:39,300
Boo! I have to work. So we get two pieces of data.
131

132
00:10:39,620 --> 00:10:47,090
And the way to think about this is it's almost like writing in something like a messenger versus writing
132

133
00:10:47,090 --> 00:10:48,220
in e-mail.
133

134
00:10:48,230 --> 00:10:54,590
So when you write in messenger you're using res.send and you have to send all your message in one
134

135
00:10:54,590 --> 00:10:55,290
go.
135

136
00:10:55,550 --> 00:11:02,660
Whereas with something like e-mail you can write one line then write another line and finally hit send.
136

137
00:11:02,660 --> 00:11:09,710
So this is kind of a different process and it allows you to send over multiple pieces of HTML and only
137

138
00:11:09,710 --> 00:11:12,860
once you're done do you call res.send.
138

139
00:11:13,160 --> 00:11:20,090
Although it is a bit painful though to keep writing res.write for  every single line
139

140
00:11:20,090 --> 00:11:26,270
of HTML that we want to send. And that makes it really difficult if we want to send over a bunch of
140

141
00:11:26,270 --> 00:11:32,840
HTML for example like an HTML page right? Because then we have to add the boilerplate code in every
141

142
00:11:32,840 --> 00:11:37,220
single line of that boilerplate has to be added using a res.
142

143
00:11:37,270 --> 00:11:37,760
write.
143

144
00:11:37,910 --> 00:11:42,730
So good luck with not getting repetitive strain injury on that.
144

145
00:11:42,740 --> 00:11:50,060
So as we've seen before the way of getting around this is we can add a whole bunch of code to our index
145

146
00:11:50,150 --> 00:11:51,490
.html.
146

147
00:11:51,560 --> 00:11:54,070
So let's add in our boilerplate and 
147

148
00:11:54,350 --> 00:12:03,460
let's give our title a name, let's call it To Do List. And inside our body we will send
148

149
00:12:03,530 --> 00:12:05,330
Let's add an <h1>.
149

150
00:12:05,450 --> 00:12:09,390
It's a week day!
150

151
00:12:09,500 --> 00:12:12,420
Why are you not working!
151

152
00:12:12,590 --> 00:12:18,680
So just to show you we can basically paste this a few times and let's just pretend that we have a average
152

153
00:12:18,680 --> 00:12:26,550
sized HTML file and instead of doing this res.write res.write res.write, we can use res.
153

154
00:12:26,570 --> 00:12:38,160
send file to send over the entire file that is at the directory name plus a file name which is index
154

155
00:12:38,170 --> 00:12:40,370
.html.
155

156
00:12:40,400 --> 00:12:47,880
So now when this else statement is true it's going to send over this file.
156

157
00:12:47,930 --> 00:12:55,130
So let's refresh and you can see that it's sent over all of the HTML  in one go without us having
157

158
00:12:55,130 --> 00:12:56,250
to write
158

159
00:12:56,260 --> 00:13:01,800
res.write for however many lines, 25 lines of code.
159

160
00:13:01,820 --> 00:13:08,900
Now the problem here though that you might realize is if we wanted to send over a different response
160

161
00:13:09,290 --> 00:13:18,720
depending on the logic in our server, then we would have to write many different HTML pages.
161

162
00:13:18,830 --> 00:13:26,900
So we would need a HTML page that is called weekend.html. Then we would need another one that's
162

163
00:13:26,900 --> 00:13:29,730
called weekday.html
163

164
00:13:29,810 --> 00:13:36,380
and if you wanted a different response for each day of the week then you would have to make seven of
164

165
00:13:36,380 --> 00:13:39,680
these and send them over individually.
165

166
00:13:39,710 --> 00:13:45,980
So that's also pretty painful and you'll find that as you get better at programming, you'll find that
166

167
00:13:45,980 --> 00:13:51,570
your tolerance for pain becomes inversely proportional with your skill.
167

168
00:13:51,770 --> 00:13:58,610
So the more skilled you get, the less tolerance you have for repetition. And if you think about it if
168

169
00:13:58,610 --> 00:14:06,140
you wanted to create say a blog, then are you really going to make a post1.html, post2
169

170
00:14:06,140 --> 00:14:09,160
.html and so on and so forth.?
170

171
00:14:09,290 --> 00:14:13,930
And in our case we're making a to do list app which has the current date.
171

172
00:14:14,090 --> 00:14:20,310
Are we really going to make separate HTML files that have mostly the same code?
172

173
00:14:20,390 --> 00:14:20,720
No
173

174
00:14:20,720 --> 00:14:21,130
right?
174

175
00:14:21,140 --> 00:14:24,050
Because, remember what are we? We are programmers.
175

176
00:14:24,080 --> 00:14:26,310
What have we got? All the codes.
176

177
00:14:26,360 --> 00:14:32,240
So every time you're doing something repetitive, the reflex of a programmer should tell you to try and
177

178
00:14:32,240 --> 00:14:34,950
use code to make your life easier.
178

179
00:14:34,970 --> 00:14:36,340
That's what it's there for.
179

180
00:14:36,380 --> 00:14:38,510
That's why we use computers.
180

181
00:14:38,510 --> 00:14:41,740
So how do we make our lives easier in this case?
181

182
00:14:41,810 --> 00:14:44,620
Well, templating. That's what we need.
182

183
00:14:44,630 --> 00:14:53,360
We need to create a HTML template where we can change certain parts of the HTML depending on the logic
183

184
00:14:53,540 --> 00:14:54,930
in our server.
184

185
00:14:55,160 --> 00:15:02,180
So this is why we need to learn about templating. And in the next lesson we're going to be creating our
185

186
00:15:02,180 --> 00:15:06,730
very first template to solve this problem.
186

187
00:15:06,740 --> 00:15:09,520
So for all of that and more, I'll see you on the next lesson.