Now admittedly, our To Do list at the moment looks pretty awful even though the functionality works where
we can add new items on the go and it will continuously get added to our list, but it doesn't look that
great right?
So in this lesson we're going to style our To Do list to make it look beautiful as well as function
well.
So the first thing I want to do is in the resources section of this lesson you'll find a link to download
a file called styles.css.
And I want to open up this file inside Atom.
I want you to take a look at what I've added in here.
Now the majority of this code you should already be pretty familiar with, for example things like color or
padding or targeting the h1 or targeting classes as we've talked about this extensively inside the
CSS module.
Now there might be a few things that will look new to you and I'll explain them as I go along
and as we implement this CSS in our project.
Now of course if you don't want to use the skeleton CSS that I've created for you and you want to create
this from scratch then you already have the ability and knowledge to do this yourself.
So while I recommend you use the styles that we provide, it's of course up to you if you wish to create
this yourself.
Now if you want to do that then simply take a look at the way that the website looks in the first lesson
of this module where I showed you what we're going to be building by the end of the module. And you can
create and write the CSS yourself.
Now through a lot of testing we find that students do best when we focus on one topic in one module.
So this topic we're talking about templating and EJS
so that's why I recommend using the CSS that I've already created for you so that you can speed up development
and your learning
but again I'm leaving the decision up to you.
Now once you've downloaded this styles.css file, I want you to go into your current project folder
and I want you to create a new folder called css and I want you to move this styles.css that
you downloaded into our css folder.
So now we want to be able to access those styles inside our list.
ej
s.
And the way that we would normally do that is we would add a link up here and it has a relationship
of stylesheet and it has an href of /css/styles.css.
And normally we've deleted that first forward slash and this is how we've normally structured our CSS
link.
Now if you save this file and you go ahead and try to reload your website you'll notice that absolutely
nothing from the CSS file has been implemented.
And in fact if you pull up the Chrome developer tools you'll see a warning in here that it could not
apply the style from css/styles
.css. Now the reason is because our styles.css lives in a folder called css which is in the
root of our project.
Now when you use Express, it doesn't automatically serve up all the files in your project.
No.
In fact it only serves up the main access point which we define in our packag.json as app.js
and it also serves up the views folder.
But everything else it chooses to ignore.
So you can't simply just go to localhost:3000 /css/styles.css because we're
no longer operating a static website and in fact all the files if we want to use them they have to
be served up by our server.
So even though we can see that that file exists at that pathway, we can't simply just use this as a href
to access it when we're creating a server based website.
So previously when we are creating static websites for example our Drum kit, you can actually simply
just put in the file path to the project in your browser and it will show you all of the files that
are there.
And when we're here we can navigate to the index.
html or we can navigate to another static file like the styles.css and we can modify this
URL or this file path as much as we want to in order to get hold of the relevant files.
But unfortunately we can't just replace this part with localhost: 3000 and hope that somehow we're able
to find this file at this location. In order to access the CSS for our website
we have to tell Express explicitly to serve up the CSS files. And we need to tell it the location of
our file and tell it to use it.
Now in the future, we might be creating other static files that are not CSS for example some plain Javascript
which we need to run on the browser side or images or sound assets or various other things.
So normally, developers will create a new folder called public and inside this public folder you can
have your CSS folder and you can have your Javascript folder,
you can have your images folder and we can tell Express to serve up this public folder as a static resource.
So in order to do that, we go over to app.js and just below where we said app.use body-parser,
we're going to say app.use another thing which is Express .static and then we specify the location
of our static files which is the folder called public.
So now we can save our app.js and make sure that you've got nodemon that's running in the background
rerunning our server whenever we make changes. And now if we head over to our browser and refresh our website
then you can see that our CSS styles have been applied.
Now if you don't see any changes when you've done all of that and you've refreshed the website, make
sure that you check your CSS file path and that it matches exactly with mine.
Namely there's no forward slash to begin with
and then it's css/styles.css
if you have a folder called css that has styles.css in it and all of this should be inside the
public folder.
Now while we've applied some backgrounds and styling, it still doesn't look that great right? And that's
because inside our CSS file we've added the styles to various classes and IDs and inputs etc..
So we have to go ahead and change our list.
ejs so that we add in those divs with those classes so that we can actually get the styling that we
want.
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
class of the div is going to be called box because I want to apply the CSS from this box class to give
it a maxim width, to give it a margin, background, border radius etc..
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
it from the other divs that have the class of box because we're going to be reusing that class for
all of our to do list items.
So the id for this heading is just called heading and that allows us to apply the CSS that I've placed
into the id of heading giving it a different background color and making align center rather align left.
So now that we're done with our heading the next step is to move on to our items.
So again I'm going to create a div that has a class of box,
so we're reusing the class styles here.
And inside that div I'm going to move all of my items
that gets generated dynamically using Javascript and EJS.
Now instead of using uls and lis and having bullet points, I'm in fact going to get rid of the uls
and place each item into a div. And the div is going to have a class of item and this will apply the
CSS that is included under the class selector of item and item last-class child which targets the last item
because each item has a bottom border to separate it from the previous item
other than the last one because that's the end of our list of items. Each item is going to have its own
separate div called item. And instead of having an li which has a bullet point remember
I'm going to instead change it to a p element or a paragraph element and I'm going to move it into my
div.
Now for the paragraph element I've applied a margin of 0all sides given it some padding, changed the font
size, changed the font color etc.
just to make it look quite nice.
And we've gotten rid of that a bullet point. Instead of having a bullet point
I'm going to add a checkbox instead.
And if you remember we can add checkboxes by creating an input with type of checkbox and I don't
need to have a value or a name. So let's just quickly beautify our HTML. And we can move on to the next
step.
Now our form where we have our input and our submit button is going to be the last item in our box.
So if you click over here you can see that this is the end of our div class box and we want our form
to be inside the box and just below the other items.
So right here. And our form is also going to have a class of item just so that we style it similarly
to the other to do list items.
But it's still going to have an action of targeting the root route
and also it's going to have a method equal to post.
Now the next thing is our inputs.
And in addition to having a type as well as a name, I'm also going to add a placeholder.
And this allows us to tell the user that this input is for your and new items that you're going to add.
And the final thing I'm going to do is I'm going to change the submit button from saying Add to simply
being a plus sign so that when the user sees the button, it'll be very similar to the Google material
design buttons where you just have a round circle with a plus sign in it.
So now let's hit refresh and you can see that we've styled our to do list and we've done that through
using just a few lines of CSS.
Now if we test out our functionality and let's just see if we're happy with the way it looks.
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
we get this auto suggest box which I don't really like because nobody really needs auto-suggestion
for you to do list items.
So I'm going to remove that by going into the input and changing the autocomplete to off. And now if
I refreshed the website, you can see that it no longer gives me that autocomplete and I have a much
cleaner interface.
So now that we've implemented our styles into our HTML, I just want to quickly walk you through the CSS
and address anything that you might not have seen before.
So the first thing is this Web Kit Linear gradient and this is a very simple way of creating a gradient
and you specify the degree of your gradient and you add the the percentage of your different colors.
So mine is going to be 50% this purple color and 50% this light whitish color.
And then it's going to create a linear gradient at 45 degrees and that is where this background comes
from.
Now the next thing I want to talk about is this item :last-child.
So this is going to look at all the items inside a div and then it's going to target specifically the
last child item and it's going to apply a specific style to it.
The next thing is this input:checked.
And that means it's going to look for an input that is in a checked state,
so that means that we've ticked a checkbox, and the +p
if you take a look at the reference, the plus sign means that it selects all the elements that come at the
end of the plus and they are placed immediately after the beginning of the selecter.
So in this case we're targeting all of the paragraph elements that come after checked inputs.
And this allows us to apply this nice little purple line to our paragraphs when we change the checkbox
to the checked state.
Now the next thing you might not have seen is this type of selecter which is where we use an input and
then we have these square brackets.
And this allows us to specify our CSS for a particular value of an attribute.
So in this case we're saying that look at all the inputs that have an attribute type that's equal to
checkbox and apply this style only to those things.
So because currently in our file we have both an input that are checkboxes as well as inputs which are
text inputs,
so if we wanted to apply that style to only the checkboxes, then this is one way of doing it.
And the last one I want to draw your attention to is this pseudo selector which is called placeholder and this
simply just targets our placeholder which remember just says newItem and gives it a particular style
of gray and makes it completely opaque.
Now a lot of these selectors are available in the reference over here on w3schools.com as well as MDN's
reference and there are more selectors then you could possibly go through.
So some students might wonder, why it is
have I not gone through every single one of these selectors? And the reason is because that would take
over 40 hours and it's not really the way that developers work.
It's much better when you want to target something specific
and if you can't work out how to do it then simply just search for it on Google or on Stack Overflow
and somebody will point you to a specific combo of CSS selectors that will achieve what it is that you
want.
So that is a much better way rather than going through each of these individually one by one by which
point everybody will forget how to do it anyways. So don't worry if these look new or unfamiliar.
As long as you can find out how they work and how to use it and in the future when you want to select
something specific and you can't figure out how to do it then remember that the references and Stack
Overflow is always there for you.
Now in the next lesson I want to talk about EJS layouts,
so another way of templating essentially but approaching it slightly differently.
So for all of that and more, I'll see you on the next lesson.