WEBVTT 0 00:01.010 --> 00:09.160 Now admittedly, our To Do list at the moment looks pretty awful even though the functionality works where 1 00:09.170 --> 00:17.240 we can add new items on the go and it will continuously get added to our list, but it doesn't look that 2 00:17.240 --> 00:18.680 great right? 3 00:18.710 --> 00:25.730 So in this lesson we're going to style our To Do list to make it look beautiful as well as function 4 00:25.760 --> 00:26.700 well. 5 00:26.750 --> 00:34.370 So the first thing I want to do is in the resources section of this lesson you'll find a link to download 6 00:34.400 --> 00:36.930 a file called styles.css. 7 00:37.310 --> 00:41.260 And I want to open up this file inside Atom. 8 00:41.410 --> 00:44.480 I want you to take a look at what I've added in here. 9 00:44.510 --> 00:50.300 Now the majority of this code you should already be pretty familiar with, for example things like color or 10 00:50.300 --> 00:57.440 padding or targeting the h1 or targeting classes as we've talked about this extensively inside the 11 00:57.440 --> 00:58.950 CSS module. 12 00:58.970 --> 01:05.870 Now there might be a few things that will look new to you and I'll explain them as I go along 13 01:05.900 --> 01:10.040 and as we implement this CSS in our project. 14 01:10.040 --> 01:17.180 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 01:17.180 --> 01:23.450 this from scratch then you already have the ability and knowledge to do this yourself. 16 01:23.450 --> 01:29.810 So while I recommend you use the styles that we provide, it's of course up to you if you wish to create 17 01:29.810 --> 01:31.130 this yourself. 18 01:31.130 --> 01:37.520 Now if you want to do that then simply take a look at the way that the website looks in the first lesson 19 01:37.700 --> 01:42.980 of this module where I showed you what we're going to be building by the end of the module. And you can 20 01:42.980 --> 01:45.790 create and write the CSS yourself. 21 01:45.920 --> 01:52.580 Now through a lot of testing we find that students do best when we focus on one topic in one module. 22 01:52.580 --> 01:55.960 So this topic we're talking about templating and EJS 23 01:56.060 --> 02:02.420 so that's why I recommend using the CSS that I've already created for you so that you can speed up development 24 02:02.510 --> 02:03.720 and your learning 25 02:03.740 --> 02:06.660 but again I'm leaving the decision up to you. 26 02:07.040 --> 02:14.270 Now once you've downloaded this styles.css file, I want you to go into your current project folder 27 02:14.390 --> 02:22.010 and I want you to create a new folder called css and I want you to move this styles.css that 28 02:22.010 --> 02:25.900 you downloaded into our css folder. 29 02:26.090 --> 02:31.750 So now we want to be able to access those styles inside our list. 30 02:31.780 --> 02:32.110 ej 31 02:32.120 --> 02:32.990 s. 32 02:33.080 --> 02:39.380 And the way that we would normally do that is we would add a link up here and it has a relationship 33 02:39.410 --> 02:48.790 of stylesheet and it has an href of /css/styles.css. 34 02:48.980 --> 02:55.760 And normally we've deleted that first forward slash and this is how we've normally structured our CSS 35 02:55.850 --> 02:56.820 link. 36 02:56.840 --> 03:03.980 Now if you save this file and you go ahead and try to reload your website you'll notice that absolutely 37 03:03.980 --> 03:08.300 nothing from the CSS file has been implemented. 38 03:08.300 --> 03:15.320 And in fact if you pull up the Chrome developer tools you'll see a warning in here that it could not 39 03:15.410 --> 03:18.940 apply the style from css/styles 40 03:19.020 --> 03:27.350 .css. Now the reason is because our styles.css lives in a folder called css which is in the 41 03:27.350 --> 03:29.240 root of our project. 42 03:29.270 --> 03:36.480 Now when you use Express, it doesn't automatically serve up all the files in your project. 43 03:36.560 --> 03:36.840 No. 44 03:36.860 --> 03:45.520 In fact it only serves up the main access point which we define in our packag.json as app.js 45 03:45.680 --> 03:48.560 and it also serves up the views folder. 46 03:49.040 --> 03:51.860 But everything else it chooses to ignore. 47 03:51.890 --> 03:59.480 So you can't simply just go to localhost:3000 /css/styles.css because we're 48 03:59.480 --> 04:06.080 no longer operating a static website and in fact all the files if we want to use them they have to 49 04:06.080 --> 04:08.620 be served up by our server. 50 04:08.810 --> 04:16.390 So even though we can see that that file exists at that pathway, we can't simply just use this as a href 51 04:16.550 --> 04:19.870 to access it when we're creating a server based website. 52 04:19.880 --> 04:25.820 So previously when we are creating static websites for example our Drum kit, you can actually simply 53 04:25.820 --> 04:32.750 just put in the file path to the project in your browser and it will show you all of the files that 54 04:32.750 --> 04:33.650 are there. 55 04:33.920 --> 04:37.140 And when we're here we can navigate to the index. 56 04:37.190 --> 04:44.420 html or we can navigate to another static file like the styles.css and we can modify this 57 04:44.420 --> 04:52.760 URL or this file path as much as we want to in order to get hold of the relevant files. 58 04:52.760 --> 05:01.190 But unfortunately we can't just replace this part with localhost: 3000 and hope that somehow we're able 59 05:01.190 --> 05:08.210 to find this file at this location. In order to access the CSS for our website 60 05:08.270 --> 05:16.820 we have to tell Express explicitly to serve up the CSS files. And we need to tell it the location of 61 05:16.820 --> 05:19.420 our file and tell it to use it. 62 05:19.550 --> 05:27.380 Now in the future, we might be creating other static files that are not CSS for example some plain Javascript 63 05:27.400 --> 05:34.330 which we need to run on the browser side or images or sound assets or various other things. 64 05:34.340 --> 05:41.420 So normally, developers will create a new folder called public and inside this public folder you can 65 05:41.420 --> 05:45.990 have your CSS folder and you can have your Javascript folder, 66 05:46.010 --> 05:56.480 you can have your images folder and we can tell Express to serve up this public folder as a static resource. 67 05:56.480 --> 06:02.640 So in order to do that, we go over to app.js and just below where we said app.use body-parser, 68 06:02.690 --> 06:11.720 we're going to say app.use another thing which is Express .static and then we specify the location 69 06:11.810 --> 06:16.100 of our static files which is the folder called public. 70 06:16.460 --> 06:23.070 So now we can save our app.js and make sure that you've got nodemon that's running in the background 71 06:23.150 --> 06:30.110 rerunning our server whenever we make changes. And now if we head over to our browser and refresh our website 72 06:30.590 --> 06:34.960 then you can see that our CSS styles have been applied. 73 06:35.030 --> 06:40.400 Now if you don't see any changes when you've done all of that and you've refreshed the website, make 74 06:40.400 --> 06:46.750 sure that you check your CSS file path and that it matches exactly with mine. 75 06:46.790 --> 06:49.360 Namely there's no forward slash to begin with 76 06:49.550 --> 06:52.880 and then it's css/styles.css 77 06:53.150 --> 06:59.360 if you have a folder called css that has styles.css in it and all of this should be inside the 78 06:59.360 --> 07:00.670 public folder. 79 07:00.680 --> 07:08.510 Now while we've applied some backgrounds and styling, it still doesn't look that great right? And that's 80 07:08.510 --> 07:18.530 because inside our CSS file we've added the styles to various classes and IDs and inputs etc.. 81 07:18.560 --> 07:21.320 So we have to go ahead and change our list. 82 07:21.350 --> 07:26.810 ejs so that we add in those divs with those classes so that we can actually get the styling that we 83 07:26.810 --> 07:27.880 want. 84 07:27.890 --> 07:34.490 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 07:34.490 --> 07:42.710 class of the div is going to be called box because I want to apply the CSS from this box class to give 86 07:42.710 --> 07:47.720 it a maxim width, to give it a margin, background, border radius etc.. 87 07:47.930 --> 07:57.530 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 07:57.530 --> 08:02.300 it from the other divs that have the class of box because we're going to be reusing that class for 89 08:02.300 --> 08:04.340 all of our to do list items. 90 08:04.340 --> 08:13.610 So the id for this heading is just called heading and that allows us to apply the CSS that I've placed 91 08:13.730 --> 08:20.840 into the id of heading giving it a different background color and making align center rather align left. 92 08:20.840 --> 08:26.130 So now that we're done with our heading the next step is to move on to our items. 93 08:26.150 --> 08:30.870 So again I'm going to create a div that has a class of box, 94 08:30.920 --> 08:33.830 so we're reusing the class styles here. 95 08:34.610 --> 08:38.590 And inside that div I'm going to move all of my items 96 08:38.720 --> 08:43.780 that gets generated dynamically using Javascript and EJS. 97 08:43.820 --> 08:51.080 Now instead of using uls and lis and having bullet points, I'm in fact going to get rid of the uls 98 08:51.350 --> 08:59.150 and place each item into a div. And the div is going to have a class of item and this will apply the 99 08:59.210 --> 09:07.430 CSS that is included under the class selector of item and item last-class child which targets the last item 100 09:07.790 --> 09:13.590 because each item has a bottom border to separate it from the previous item 101 09:13.700 --> 09:19.940 other than the last one because that's the end of our list of items. Each item is going to have its own 102 09:19.940 --> 09:26.290 separate div called item. And instead of having an li which has a bullet point remember 103 09:26.540 --> 09:33.380 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 09:33.380 --> 09:34.110 div. 105 09:34.370 --> 09:40.730 Now for the paragraph element I've applied a margin of 0all sides given it some padding, changed the font 106 09:40.730 --> 09:43.210 size, changed the font color etc. 107 09:43.220 --> 09:45.330 just to make it look quite nice. 108 09:45.440 --> 09:50.470 And we've gotten rid of that a bullet point. Instead of having a bullet point 109 09:50.510 --> 09:53.810 I'm going to add a checkbox instead. 110 09:53.870 --> 10:01.110 And if you remember we can add checkboxes by creating an input with type of checkbox and I don't 111 10:01.110 --> 10:09.780 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 10:09.780 --> 10:10.480 step. 113 10:10.590 --> 10:18.910 Now our form where we have our input and our submit button is going to be the last item in our box. 114 10:18.930 --> 10:25.350 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 10:25.380 --> 10:30.540 to be inside the box and just below the other items. 116 10:30.570 --> 10:37.860 So right here. And our form is also going to have a class of item just so that we style it similarly 117 10:37.860 --> 10:39.770 to the other to do list items. 118 10:40.020 --> 10:43.890 But it's still going to have an action of targeting the root route 119 10:44.100 --> 10:47.670 and also it's going to have a method equal to post. 120 10:47.730 --> 10:49.970 Now the next thing is our inputs. 121 10:50.010 --> 10:55.760 And in addition to having a type as well as a name, I'm also going to add a placeholder. 122 10:56.070 --> 11:02.350 And this allows us to tell the user that this input is for your and new items that you're going to add. 123 11:02.730 --> 11:09.000 And the final thing I'm going to do is I'm going to change the submit button from saying Add to simply 124 11:09.000 --> 11:15.420 being a plus sign so that when the user sees the button, it'll be very similar to the Google material 125 11:15.420 --> 11:20.030 design buttons where you just have a round circle with a plus sign in it. 126 11:20.040 --> 11:26.910 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 11:26.910 --> 11:29.700 using just a few lines of CSS. 128 11:29.700 --> 11:34.830 Now if we test out our functionality and let's just see if we're happy with the way it looks. 129 11:35.010 --> 11:41.880 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 11:41.880 --> 11:48.750 we get this auto suggest box which I don't really like because nobody really needs auto-suggestion 131 11:48.930 --> 11:50.500 for you to do list items. 132 11:50.640 --> 12:02.980 So I'm going to remove that by going into the input and changing the autocomplete to off. And now if 133 12:02.980 --> 12:08.440 I refreshed the website, you can see that it no longer gives me that autocomplete and I have a much 134 12:08.560 --> 12:09.930 cleaner interface. 135 12:10.000 --> 12:15.700 So now that we've implemented our styles into our HTML, I just want to quickly walk you through the CSS 136 12:16.090 --> 12:19.220 and address anything that you might not have seen before. 137 12:19.510 --> 12:27.010 So the first thing is this Web Kit Linear gradient and this is a very simple way of creating a gradient 138 12:27.460 --> 12:34.990 and you specify the degree of your gradient and you add the the percentage of your different colors. 139 12:35.080 --> 12:40.710 So mine is going to be 50% this purple color and 50% this light whitish color. 140 12:40.960 --> 12:46.690 And then it's going to create a linear gradient at 45 degrees and that is where this background comes 141 12:46.690 --> 12:47.380 from. 142 12:47.380 --> 12:52.030 Now the next thing I want to talk about is this item :last-child. 143 12:52.240 --> 12:59.710 So this is going to look at all the items inside a div and then it's going to target specifically the 144 12:59.710 --> 13:05.250 last child item and it's going to apply a specific style to it. 145 13:05.260 --> 13:08.570 The next thing is this input:checked. 146 13:08.830 --> 13:13.990 And that means it's going to look for an input that is in a checked state, 147 13:14.050 --> 13:18.050 so that means that we've ticked a checkbox, and the +p 148 13:18.190 --> 13:25.750 if you take a look at the reference, the plus sign means that it selects all the elements that come at the 149 13:25.750 --> 13:32.280 end of the plus and they are placed immediately after the beginning of the selecter. 150 13:32.680 --> 13:39.720 So in this case we're targeting all of the paragraph elements that come after checked inputs. 151 13:39.910 --> 13:47.560 And this allows us to apply this nice little purple line to our paragraphs when we change the checkbox 152 13:47.830 --> 13:49.900 to the checked state. 153 13:49.900 --> 13:56.440 Now the next thing you might not have seen is this type of selecter which is where we use an input and 154 13:56.440 --> 13:59.110 then we have these square brackets. 155 13:59.260 --> 14:05.860 And this allows us to specify our CSS for a particular value of an attribute. 156 14:05.950 --> 14:12.370 So in this case we're saying that look at all the inputs that have an attribute type that's equal to 157 14:12.400 --> 14:16.580 checkbox and apply this style only to those things. 158 14:16.780 --> 14:24.880 So because currently in our file we have both an input that are checkboxes as well as inputs which are 159 14:25.060 --> 14:26.620 text inputs, 160 14:26.620 --> 14:32.840 so if we wanted to apply that style to only the checkboxes, then this is one way of doing it. 161 14:33.010 --> 14:39.160 And the last one I want to draw your attention to is this pseudo selector which is called placeholder and this 162 14:39.160 --> 14:46.630 simply just targets our placeholder which remember just says newItem and gives it a particular style 163 14:46.690 --> 14:49.950 of gray and makes it completely opaque. 164 14:50.170 --> 14:57.700 Now a lot of these selectors are available in the reference over here on w3schools.com as well as MDN's 165 14:57.790 --> 15:03.710 reference and there are more selectors then you could possibly go through. 166 15:03.850 --> 15:06.420 So some students might wonder, why it is 167 15:06.460 --> 15:12.070 have I not gone through every single one of these selectors? And the reason is because that would take 168 15:12.070 --> 15:17.010 over 40 hours and it's not really the way that developers work. 169 15:17.140 --> 15:20.700 It's much better when you want to target something specific 170 15:20.860 --> 15:26.680 and if you can't work out how to do it then simply just search for it on Google or on Stack Overflow 171 15:27.010 --> 15:33.610 and somebody will point you to a specific combo of CSS selectors that will achieve what it is that you 172 15:33.610 --> 15:34.190 want. 173 15:34.210 --> 15:40.240 So that is a much better way rather than going through each of these individually one by one by which 174 15:40.240 --> 15:46.700 point everybody will forget how to do it anyways. So don't worry if these look new or unfamiliar. 175 15:46.930 --> 15:52.990 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 15:52.990 --> 15:58.480 something specific and you can't figure out how to do it then remember that the references and Stack 177 15:58.480 --> 16:00.690 Overflow is always there for you. 178 16:00.750 --> 16:04.420 Now in the next lesson I want to talk about EJS layouts, 179 16:04.570 --> 16:10.460 so another way of templating essentially but approaching it slightly differently. 180 16:10.540 --> 16:13.630 So for all of that and more, I'll see you on the next lesson.