All right. 1
So as always we're going to get started by creating a brand new project. 2
So I'm going to cdover to my desktop and then my web development folder and inside here I'm going to 3
create a new directory that's called todolist -v1. 4
And this is because in this module we're going to be building version 1 of this to-do list which we 5
will continue to improve in the next module. 6
So we're going to call this todolist v1. Of course feel free to create your project any way you wish 7
but once you're done let's cd over to it and we're going to create some files. 8
So I'm going to use touch to create a index.html as well as an App. 9
js. 10
And finally I'm going to initialize npm. And I'm just going to keep all of the default options and hit 11
Yes. 12
And finally I'm going to npm install. So you can use npm i for short if you wish 13
if you don't want to type out the entire long word that is install. 14
So as you get used to this you can start using this as a shortcut. 15
So we're going to install express as well as body-parser, our good old standard modules. 16
So once that's done let's go ahead and open this project up using Atom and we are now ready to begin 17
developing our brand new app. 18
So let's head over to our App.js. 19
Now we've already set up our App.js or our server a few times now and every single time you set up 20
a new project you're pretty much doing the same thing. 21
So sometimes you might find it helpful to simply create a template file that you can paste in here with 22
all of the parts that you commonly use 23
for example changing the jshint to ES version 6, 24
adding in our express and body-parser, creating our app, creating the first get route on the home route 25
and then writing the app.listen on port 3000. 26
Now this is very repetitive 27
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
section of this lesson where I provided the App.js file that you can simply copy and paste into 29
your own App.js. Now 30
however some students find that they want to get extra practice and they want to write out more code. 31
So both ways are equally fine and I'll leave it up to you to decide which path you want to choose. 32
But let's just walk through this. 33
We're requiring our two packages that we just installed: express and body-parser. 34
And we're creating our app constant by using express. 35
And then we create a simple get route that just sends the browser the word hello when a user tries to 36
access the home route. 37
And then finally we listen on port 3000 and we console log 38
that our server has been started. 39
Now if any part of this is confusing at all, make sure that you don't skip any of the previous modules 40
because all the knowledge builds on each progressive module and it might get a little bit confusing 41
if you jump around in the course. 42
So take a look back at some of those lessons 43
if this is confusing at all. It shouldn't be because by this point they should be pretty familiar to 44
you. 45
All right so let's talk about this res.send. 46
Because so far we've been passing data from our server our App.js, to the browser via this send method. 47
And we've been saying response as in the response from our server is send this message. 48
So that's how we've been passing data around. 49
Now this allows us to perform some logic on the server side. 50
So for example we could you know do some calculations, say var a = 3 + 5 and then we 51
can send this variable a back to the browser as a response to the browser. 52
So that allows us to do a lot of calculations or processing on our server side and then only once that's 53
done to send the result back to the browser. 54
And this allows us render different results to the user depending on the logic that we include inside 55
our server. 56
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
going to send a message depending on the day. 58
So we're going to write some logic code inside our server where it's going to be processed and then 59
we're just going to send the result back to the browser. 60
So let's create a new variable called today. 61
And this is going to be a new date. 62
This is just bog standard Javascript. And then we're going to say if today.getDay which gets the 63
day of the week as a number. 64
So for example Monday will be 1 Saturday will be 6. 65
And then we're going to test whether if this number is equal to the weekend which is Saturday for 6, 66
or it could be-- or it could be Sunday which happens to be 0. 67
So we'll say if today.getDay is equal to 6 or if today.getDay is equal to 0 68
then in that case we're going to reas.send a message saying, 'Yay! It's the weekend'. 69
Alternatively or other else, then it's going to be a weekday a working day and it will instead send... 70
So we've created our conditional statement that tests whether if the current date when the request of 71
the server is made is equal to a Saturday or a Sunday and then we send a different message depending 72
on whether that is true or false. 73
So today as you can see is currently a Thursday and hence that's why I'm recording this video because 74
it is a working day. 75
So let's see if we get this message triggered when we run our app. 76
So I'm going to go over to hyper 77
and I'm going to start off my nodemon on App. 78
js. 79
And then I'm going to head over to my localhost:3000 to see the message being sent. 80
Boo! I have to work because today is a Thursday. 81
So let's just make sure that this is actually working by checking to see if it is Thursday. 82
So if today is equal to 4, which is Thursday, then it should send me this message. 83
And of course it's not a weekend, I'm just pretending that it is to make myself feel better. 84
So let's go over to our localhost and of course nodemon will be monitoring our changes and 85
it's already started the server. 86
So if I just go ahead and refresh then we trigger the different message because today is indeed number 87
4, Thursday. 88
Now you might wonder where did I get this method from? 89
How do I know how to do that? 90
Then of course remember that this is just on the Javascript 91
and if you don't want to search through MDN or you have trouble finding it, then there's always good 92
old Google. 93
So you could search with something like 'get date of the week javascript' and we get w3schools.com and 94
mdn and Stack Overflow all telling us the same thing which is we need this getDay method. 95
And if you want to look at how you can use it then of course head over to the documentation for that 96
relevant method. 97
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
us Sunday through to Saturday which 0 - 6. 99
So just a quick reminder that the documentation is like your family. 100
Sometimes you find them difficult to deal with but they're always there for you. 101
So let's continue. 102
So as you can see our code is now working. 103
Now if you want to make this a little bit better you can for example say var current day = today 104
.getDay. 105
And that way you can reduce the amount of repetition over here by saying if current day is equal to 106
6 or current day is equal to 0, 107
Saturday or Sunday, then do this or if it's false then do that. 108
That just reduces it by one step 109
if you find that helpful. 110
Now what if we wanted to send the data back to the browser as HTML? 111
Well we can do that by still using res.send. 112
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
tag to whatever we send back. 114
And this, when we refresh our website, you will see who gets rendered as proper HTML. 115
Now here's the next question. 116
What if we want to send multiple pieces of HTML back to the browser? 117
Well we can't use res.send anymore because this only allows you to send one piece of data. 118
You can't write a whole bunch of res.sends. When the server sees res.send, it sees this as the 119
final sending instruction. 120
But we can use a different method called res. 121
write 122
to send multiple pieces of data. 123
So for example we can say res.write, Boo! I have to work'. And we add another one above 124
let's say this is a paragraph tag instead. 125
And instead of saying, Boo! I have to work', we're going to say 'It is not the weekend'. And once 126
you're done with all of your res.writes, then you can write res.send. 127
And this basically sends off all of our messages. 128
So let's hit save and refresh. 129
It's not the weekend 130
Boo! I have to work. So we get two pieces of data. 131
And the way to think about this is it's almost like writing in something like a messenger versus writing 132
in e-mail. 133
So when you write in messenger you're using res.send and you have to send all your message in one 134
go. 135
Whereas with something like e-mail you can write one line then write another line and finally hit send. 136
So this is kind of a different process and it allows you to send over multiple pieces of HTML and only 137
once you're done do you call res.send. 138
Although it is a bit painful though to keep writing res.write for every single line 139
of HTML that we want to send. And that makes it really difficult if we want to send over a bunch of 140
HTML for example like an HTML page right? Because then we have to add the boilerplate code in every 141
single line of that boilerplate has to be added using a res. 142
write. 143
So good luck with not getting repetitive strain injury on that. 144
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
.html. 146
So let's add in our boilerplate and 147
let's give our title a name, let's call it To Do List. And inside our body we will send 148
Let's add an . 149
It's a week day! 150
Why are you not working! 151
So just to show you we can basically paste this a few times and let's just pretend that we have a average 152
sized HTML file and instead of doing this res.write res.write res.write, we can use res. 153
send file to send over the entire file that is at the directory name plus a file name which is index 154
.html. 155
So now when this else statement is true it's going to send over this file. 156
So let's refresh and you can see that it's sent over all of the HTML in one go without us having 157
to write 158
res.write for however many lines, 25 lines of code. 159
Now the problem here though that you might realize is if we wanted to send over a different response 160
depending on the logic in our server, then we would have to write many different HTML pages. 161
So we would need a HTML page that is called weekend.html. Then we would need another one that's 162
called weekday.html 163
and if you wanted a different response for each day of the week then you would have to make seven of 164
these and send them over individually. 165
So that's also pretty painful and you'll find that as you get better at programming, you'll find that 166
your tolerance for pain becomes inversely proportional with your skill. 167
So the more skilled you get, the less tolerance you have for repetition. And if you think about it if 168
you wanted to create say a blog, then are you really going to make a post1.html, post2 169
.html and so on and so forth.? 170
And in our case we're making a to do list app which has the current date. 171
Are we really going to make separate HTML files that have mostly the same code? 172
No 173
right? 174
Because, remember what are we? We are programmers. 175
What have we got? All the codes. 176
So every time you're doing something repetitive, the reflex of a programmer should tell you to try and 177
use code to make your life easier. 178
That's what it's there for. 179
That's why we use computers. 180
So how do we make our lives easier in this case? 181
Well, templating. That's what we need. 182
We need to create a HTML template where we can change certain parts of the HTML depending on the logic 183
in our server. 184
So this is why we need to learn about templating. And in the next lesson we're going to be creating our 185
very first template to solve this problem. 186
So for all of that and more, I'll see you on the next lesson.