Now admittedly, our To Do list at the moment looks pretty awful even though the functionality works where 1
we can add new items on the go and it will continuously get added to our list, but it doesn't look that 2
great right? 3
So in this lesson we're going to style our To Do list to make it look beautiful as well as function 4
well. 5
So the first thing I want to do is in the resources section of this lesson you'll find a link to download 6
a file called styles.css. 7
And I want to open up this file inside Atom. 8
I want you to take a look at what I've added in here. 9
Now the majority of this code you should already be pretty familiar with, for example things like color or 10
padding or targeting the h1 or targeting classes as we've talked about this extensively inside the 11
CSS module. 12
Now there might be a few things that will look new to you and I'll explain them as I go along 13
and as we implement this CSS in our project. 14
Now of course if you don't want to use the skeleton CSS that I've created for you and you want to create 15
this from scratch then you already have the ability and knowledge to do this yourself. 16
So while I recommend you use the styles that we provide, it's of course up to you if you wish to create 17
this yourself. 18
Now if you want to do that then simply take a look at the way that the website looks in the first lesson 19
of this module where I showed you what we're going to be building by the end of the module. And you can 20
create and write the CSS yourself. 21
Now through a lot of testing we find that students do best when we focus on one topic in one module. 22
So this topic we're talking about templating and EJS 23
so that's why I recommend using the CSS that I've already created for you so that you can speed up development 24
and your learning 25
but again I'm leaving the decision up to you. 26
Now once you've downloaded this styles.css file, I want you to go into your current project folder 27
and I want you to create a new folder called css and I want you to move this styles.css that 28
you downloaded into our css folder. 29
So now we want to be able to access those styles inside our list. 30
ej 31
s. 32
And the way that we would normally do that is we would add a link up here and it has a relationship 33
of stylesheet and it has an href of /css/styles.css. 34
And normally we've deleted that first forward slash and this is how we've normally structured our CSS 35
link. 36
Now if you save this file and you go ahead and try to reload your website you'll notice that absolutely 37
nothing from the CSS file has been implemented. 38
And in fact if you pull up the Chrome developer tools you'll see a warning in here that it could not 39
apply the style from css/styles 40
.css. Now the reason is because our styles.css lives in a folder called css which is in the 41
root of our project. 42
Now when you use Express, it doesn't automatically serve up all the files in your project. 43
No. 44
In fact it only serves up the main access point which we define in our packag.json as app.js 45
and it also serves up the views folder. 46
But everything else it chooses to ignore. 47
So you can't simply just go to localhost:3000 /css/styles.css because we're 48
no longer operating a static website and in fact all the files if we want to use them they have to 49
be served up by our server. 50
So even though we can see that that file exists at that pathway, we can't simply just use this as a href 51
to access it when we're creating a server based website. 52
So previously when we are creating static websites for example our Drum kit, you can actually simply 53
just put in the file path to the project in your browser and it will show you all of the files that 54
are there. 55
And when we're here we can navigate to the index. 56
html or we can navigate to another static file like the styles.css and we can modify this 57
URL or this file path as much as we want to in order to get hold of the relevant files. 58
But unfortunately we can't just replace this part with localhost: 3000 and hope that somehow we're able 59
to find this file at this location. In order to access the CSS for our website 60
we have to tell Express explicitly to serve up the CSS files. And we need to tell it the location of 61
our file and tell it to use it. 62
Now in the future, we might be creating other static files that are not CSS for example some plain Javascript 63
which we need to run on the browser side or images or sound assets or various other things. 64
So normally, developers will create a new folder called public and inside this public folder you can 65
have your CSS folder and you can have your Javascript folder, 66
you can have your images folder and we can tell Express to serve up this public folder as a static resource. 67
So in order to do that, we go over to app.js and just below where we said app.use body-parser, 68
we're going to say app.use another thing which is Express .static and then we specify the location 69
of our static files which is the folder called public. 70
So now we can save our app.js and make sure that you've got nodemon that's running in the background 71
rerunning our server whenever we make changes. And now if we head over to our browser and refresh our website 72
then you can see that our CSS styles have been applied. 73
Now if you don't see any changes when you've done all of that and you've refreshed the website, make 74
sure that you check your CSS file path and that it matches exactly with mine. 75
Namely there's no forward slash to begin with 76
and then it's css/styles.css 77
if you have a folder called css that has styles.css in it and all of this should be inside the 78
public folder. 79
Now while we've applied some backgrounds and styling, it still doesn't look that great right? And that's 80
because inside our CSS file we've added the styles to various classes and IDs and inputs etc.. 81
So we have to go ahead and change our list. 82
ejs so that we add in those divs with those classes so that we can actually get the styling that we 83
want. 84
So the first thing that I'm going to do is for the heading I'm going to give it a separate div. And the 85
class of the div is going to be called box because I want to apply the CSS from this box class to give 86
it a maxim width, to give it a margin, background, border radius etc.. 87
So I'm going to move my h1 into my brand new div. Now this div is also going to have an id to separate 88
it from the other divs that have the class of box because we're going to be reusing that class for 89
all of our to do list items. 90
So the id for this heading is just called heading and that allows us to apply the CSS that I've placed 91
into the id of heading giving it a different background color and making align center rather align left. 92
So now that we're done with our heading the next step is to move on to our items. 93
So again I'm going to create a div that has a class of box, 94
so we're reusing the class styles here. 95
And inside that div I'm going to move all of my items 96
that gets generated dynamically using Javascript and EJS. 97
Now instead of using uls and lis and having bullet points, I'm in fact going to get rid of the uls 98
and place each item into a div. And the div is going to have a class of item and this will apply the 99
CSS that is included under the class selector of item and item last-class child which targets the last item 100
because each item has a bottom border to separate it from the previous item 101
other than the last one because that's the end of our list of items. Each item is going to have its own 102
separate div called item. And instead of having an li which has a bullet point remember 103
I'm going to instead change it to a p element or a paragraph element and I'm going to move it into my 104
div. 105
Now for the paragraph element I've applied a margin of 0all sides given it some padding, changed the font 106
size, changed the font color etc. 107
just to make it look quite nice. 108
And we've gotten rid of that a bullet point. Instead of having a bullet point 109
I'm going to add a checkbox instead. 110
And if you remember we can add checkboxes by creating an input with type of checkbox and I don't 111
need to have a value or a name. So let's just quickly beautify our HTML. And we can move on to the next 112
step. 113
Now our form where we have our input and our submit button is going to be the last item in our box. 114
So if you click over here you can see that this is the end of our div class box and we want our form 115
to be inside the box and just below the other items. 116
So right here. And our form is also going to have a class of item just so that we style it similarly 117
to the other to do list items. 118
But it's still going to have an action of targeting the root route 119
and also it's going to have a method equal to post. 120
Now the next thing is our inputs. 121
And in addition to having a type as well as a name, I'm also going to add a placeholder. 122
And this allows us to tell the user that this input is for your and new items that you're going to add. 123
And the final thing I'm going to do is I'm going to change the submit button from saying Add to simply 124
being a plus sign so that when the user sees the button, it'll be very similar to the Google material 125
design buttons where you just have a round circle with a plus sign in it. 126
So now let's hit refresh and you can see that we've styled our to do list and we've done that through 127
using just a few lines of CSS. 128
Now if we test out our functionality and let's just see if we're happy with the way it looks. 129
So if I tick an item you can see that it gets crossed out. And if I add a new item then you can see that 130
we get this auto suggest box which I don't really like because nobody really needs auto-suggestion 131
for you to do list items. 132
So I'm going to remove that by going into the input and changing the autocomplete to off. And now if 133
I refreshed the website, you can see that it no longer gives me that autocomplete and I have a much 134
cleaner interface. 135
So now that we've implemented our styles into our HTML, I just want to quickly walk you through the CSS 136
and address anything that you might not have seen before. 137
So the first thing is this Web Kit Linear gradient and this is a very simple way of creating a gradient 138
and you specify the degree of your gradient and you add the the percentage of your different colors. 139
So mine is going to be 50% this purple color and 50% this light whitish color. 140
And then it's going to create a linear gradient at 45 degrees and that is where this background comes 141
from. 142
Now the next thing I want to talk about is this item :last-child. 143
So this is going to look at all the items inside a div and then it's going to target specifically the 144
last child item and it's going to apply a specific style to it. 145
The next thing is this input:checked. 146
And that means it's going to look for an input that is in a checked state, 147
so that means that we've ticked a checkbox, and the +p 148
if you take a look at the reference, the plus sign means that it selects all the elements that come at the 149
end of the plus and they are placed immediately after the beginning of the selecter. 150
So in this case we're targeting all of the paragraph elements that come after checked inputs. 151
And this allows us to apply this nice little purple line to our paragraphs when we change the checkbox 152
to the checked state. 153
Now the next thing you might not have seen is this type of selecter which is where we use an input and 154
then we have these square brackets. 155
And this allows us to specify our CSS for a particular value of an attribute. 156
So in this case we're saying that look at all the inputs that have an attribute type that's equal to 157
checkbox and apply this style only to those things. 158
So because currently in our file we have both an input that are checkboxes as well as inputs which are 159
text inputs, 160
so if we wanted to apply that style to only the checkboxes, then this is one way of doing it. 161
And the last one I want to draw your attention to is this pseudo selector which is called placeholder and this 162
simply just targets our placeholder which remember just says newItem and gives it a particular style 163
of gray and makes it completely opaque. 164
Now a lot of these selectors are available in the reference over here on w3schools.com as well as MDN's 165
reference and there are more selectors then you could possibly go through. 166
So some students might wonder, why it is 167
have I not gone through every single one of these selectors? And the reason is because that would take 168
over 40 hours and it's not really the way that developers work. 169
It's much better when you want to target something specific 170
and if you can't work out how to do it then simply just search for it on Google or on Stack Overflow 171
and somebody will point you to a specific combo of CSS selectors that will achieve what it is that you 172
want. 173
So that is a much better way rather than going through each of these individually one by one by which 174
point everybody will forget how to do it anyways. So don't worry if these look new or unfamiliar. 175
As long as you can find out how they work and how to use it and in the future when you want to select 176
something specific and you can't figure out how to do it then remember that the references and Stack 177
Overflow is always there for you. 178
Now in the next lesson I want to talk about EJS layouts, 179
so another way of templating essentially but approaching it slightly differently. 180
So for all of that and more, I'll see you on the next lesson.