WEBVTT X-TIMESTAMP-MAP=LOCAL:00:00:00.000,MPEGTS:900000 00:00:01.928 --> 00:00:05.320 YULIIA ZHUKOVETS: OK, welcome to CS50. 00:00:05.320 --> 00:00:06.790 This is week eight. 00:00:06.790 --> 00:00:11.170 Today, we'll be covering a lot of stuff on web development-- 00:00:11.170 --> 00:00:13.660 HTML, CSS, and all the other good things. 00:00:13.660 --> 00:00:14.770 My name is Yuliia. 00:00:14.770 --> 00:00:17.950 I'm one of the preceptors here at CS50 at Harvard. 00:00:17.950 --> 00:00:21.140 And let's kick things in. 00:00:21.140 --> 00:00:26.050 So as you know, this past week, David was 00:00:26.050 --> 00:00:30.250 talking about all things about development, anything from how internet 00:00:30.250 --> 00:00:33.820 works to how we actually construct the web pages that we 00:00:33.820 --> 00:00:36.650 interact with on everyday basis. 00:00:36.650 --> 00:00:40.542 So just to recap some of the main things that David 00:00:40.542 --> 00:00:42.250 talked about in the lecture and something 00:00:42.250 --> 00:00:46.600 that we'll be covering today, HTTP, which 00:00:46.600 --> 00:00:49.390 does someone want to give us the definition 00:00:49.390 --> 00:00:52.030 of what HTTP is to get us started here? 00:00:52.030 --> 00:00:56.530 Feel free to type it in the chat as a direct message for everyone to see. 00:01:05.200 --> 00:01:08.010 So yeah, I'm seeing some good answers. 00:01:08.010 --> 00:01:12.120 HTTP is a hypertext transfer protocol, which is essentially 00:01:12.120 --> 00:01:14.760 a thing that allows the servers and the computers 00:01:14.760 --> 00:01:19.320 to interact between each other and for us to access 00:01:19.320 --> 00:01:20.860 all the information on the web. 00:01:20.860 --> 00:01:24.600 Then we'll get going with HTML, which essentially 00:01:24.600 --> 00:01:29.040 is a tool and a language that allows us to build all these web pages. 00:01:29.040 --> 00:01:35.940 And we'll jump into CSS and JavaScript that makes things a little bit more 00:01:35.940 --> 00:01:37.780 interesting in our web pages. 00:01:37.780 --> 00:01:42.390 So as we already talked about, HTTP is the hypertext transfer protocol, 00:01:42.390 --> 00:01:45.630 which essentially allows the servers and the computers 00:01:45.630 --> 00:01:49.860 to interact between each other to send, get requests or post requests, 00:01:49.860 --> 00:01:54.610 and to get the information that the user might need from the internet. 00:01:54.610 --> 00:01:56.850 And as you might have seen in the lecture, 00:01:56.850 --> 00:02:01.710 David ran a command that's called http-server. 00:02:01.710 --> 00:02:08.590 Does anyone want to type in the chat what http-server actually does for us 00:02:08.590 --> 00:02:10.630 when we type it out in the terminal? 00:02:18.690 --> 00:02:24.690 Exactly, yeah, so it creates a server that listens to the HTTP requests. 00:02:24.690 --> 00:02:28.890 And so when I click on something on the HTML page, 00:02:28.890 --> 00:02:33.120 I essentially send a request that a server can respond to and provide me 00:02:33.120 --> 00:02:36.120 with the information that I asked for. 00:02:36.120 --> 00:02:42.720 So we're going to move on to HTML and get a lot practice with how 00:02:42.720 --> 00:02:47.040 to build web pages, what components go into it, 00:02:47.040 --> 00:02:51.610 and how all the web pages are actually constructed that we see every day. 00:02:51.610 --> 00:02:55.920 So what I'm going to do is I'm going to open a scoreboard dot 00:02:55.920 --> 00:02:59.910 HTML that I already have in cs50.dev. 00:02:59.910 --> 00:03:03.360 You are free to, welcome to follow along. 00:03:03.360 --> 00:03:09.510 And later on, we'll post the resource, and you can access the file yourself. 00:03:09.510 --> 00:03:13.170 So essentially what is going on here is that we 00:03:13.170 --> 00:03:17.590 have an HTML file that's already prepopulated with some information. 00:03:17.590 --> 00:03:25.375 So first I'm going to run http-server to see what is actually going on here. 00:03:33.380 --> 00:03:36.080 OK, so I'm going to zoom in a little bit so 00:03:36.080 --> 00:03:37.790 that everyone can see what's going on. 00:03:37.790 --> 00:03:40.790 Essentially, what we have is a quite simple HTML 00:03:40.790 --> 00:03:44.750 page where it is a table that has three rows and two columns. 00:03:44.750 --> 00:03:49.610 And what the page currently does is that I can click one of these buttons. 00:03:49.610 --> 00:03:54.320 And you can see that the score inside the table for a corresponding team 00:03:54.320 --> 00:03:55.820 will change. 00:03:55.820 --> 00:03:58.520 It doesn't really do much behind this, right? 00:03:58.520 --> 00:03:59.990 It's a pretty simple web page. 00:03:59.990 --> 00:04:04.470 But we will make some changes to make it more interactive. 00:04:04.470 --> 00:04:07.950 So to go back to the HTML code that we already have, 00:04:07.950 --> 00:04:10.400 let's just break down what's going on here. 00:04:10.400 --> 00:04:16.730 Currently, we only have the table code in the body tag 00:04:16.730 --> 00:04:21.500 that essentially just builds out the rows and the columns. 00:04:21.500 --> 00:04:26.760 And we also have some other components that we'll talk about later. 00:04:26.760 --> 00:04:30.800 So to actually go into the whole structure of the HTML, 00:04:30.800 --> 00:04:33.450 what we can see here is a thing that we call 00:04:33.450 --> 00:04:36.270 DOM, which is a Document Object Model. 00:04:36.270 --> 00:04:41.250 It is essentially a tree that builds the HTML files. 00:04:41.250 --> 00:04:46.090 It goes top to bottom as everything in programming. 00:04:46.090 --> 00:04:48.420 So at the very top, we see the document itself. 00:04:48.420 --> 00:04:51.550 And it has the HTML code in it. 00:04:51.550 --> 00:04:55.560 And so then it splits up into a head and a body. 00:04:55.560 --> 00:05:02.920 And we can see that it then goes into a different component of the HTML files. 00:05:02.920 --> 00:05:08.670 So in the head, we have information like title that goes on the tab 00:05:08.670 --> 00:05:11.400 that you open-- essentially the name of the web page. 00:05:11.400 --> 00:05:16.920 It takes in a style, so the different CSS components 00:05:16.920 --> 00:05:19.950 that we can modify to make our web page a little bit prettier. 00:05:19.950 --> 00:05:24.060 And then on the right side, we have the body of the HTML that contains, 00:05:24.060 --> 00:05:27.600 in this case, a table that has other components to it 00:05:27.600 --> 00:05:30.810 and also a script that would contain, in this case, 00:05:30.810 --> 00:05:35.290 some JavaScript code that makes the web page a little bit more interactive. 00:05:35.290 --> 00:05:37.290 So now let's actually examine what's going 00:05:37.290 --> 00:05:40.710 on underneath the hood for the table component. 00:05:40.710 --> 00:05:45.090 Well, as you saw in the code, it actually 00:05:45.090 --> 00:05:47.070 is a bunch of different things. 00:05:47.070 --> 00:05:54.690 Essentially, what is going on here is that we have our rows that have tag tr. 00:05:54.690 --> 00:05:58.890 And then each row has some td components, which 00:05:58.890 --> 00:06:01.330 essentially are like individual cells. 00:06:01.330 --> 00:06:04.740 So again, the structure goes top to bottom 00:06:04.740 --> 00:06:08.550 where we start with a big overarching tag. 00:06:08.550 --> 00:06:09.990 You can call it a parent. 00:06:09.990 --> 00:06:12.960 And then it goes into smaller children that 00:06:12.960 --> 00:06:16.020 have some smaller information in it. 00:06:16.020 --> 00:06:20.520 In such a way, we have, for example, the first row 00:06:20.520 --> 00:06:23.340 that contains the names of the teams-- 00:06:23.340 --> 00:06:24.720 Team 1 and Team 2-- 00:06:24.720 --> 00:06:28.120 the second row that will be storing our score. 00:06:28.120 --> 00:06:30.420 In this case, it's set to zero. 00:06:30.420 --> 00:06:33.660 And the third row, it contains the button. 00:06:33.660 --> 00:06:37.170 That actually splits up into two components 00:06:37.170 --> 00:06:42.780 where we specify that the tag actually has to be a button and not just text. 00:06:42.780 --> 00:06:46.770 But at the same time, we can set that text 00:06:46.770 --> 00:06:49.740 of the button to be something else. 00:06:49.740 --> 00:06:51.960 In this case, it is plus 1. 00:06:51.960 --> 00:06:57.390 So the overall structure of the HTML code is very top to bottom. 00:06:57.390 --> 00:07:03.720 You can think about it as a tree that starts from document HTML 00:07:03.720 --> 00:07:07.150 and goes into different parts of it. 00:07:07.150 --> 00:07:13.530 So before we move on to actually modifying our scoreboard HTML 00:07:13.530 --> 00:07:19.020 and adding some things to it, do we have any questions about the structure 00:07:19.020 --> 00:07:20.670 of the HTML for now? 00:07:37.060 --> 00:07:39.010 OK, sounds good. 00:07:39.010 --> 00:07:47.120 So now let's move on into the scoreboard HTML where we will add some things. 00:07:47.120 --> 00:07:50.830 So these are some things that I laid out for us to do. 00:07:50.830 --> 00:07:55.270 But there's certainly so many other tags that you can explore on the web. 00:07:55.270 --> 00:07:59.560 W3Schools is a great resource to look into things. 00:07:59.560 --> 00:08:04.820 And let's switch to the code and change some things. 00:08:04.820 --> 00:08:11.800 So first, I am going to introduce some bigger, overarching kind of like parent 00:08:11.800 --> 00:08:16.910 tags that currently are not in our HTML code. 00:08:16.910 --> 00:08:19.600 So one thing that we're going to add first 00:08:19.600 --> 00:08:22.490 is you can see we still have our head and body. 00:08:22.490 --> 00:08:26.410 What we're going to introduce is some other tags. 00:08:26.410 --> 00:08:31.780 For example, we're going to introduce a tag header, which essentially 00:08:31.780 --> 00:08:34.780 is going to have a title of our page. 00:08:34.780 --> 00:08:38.210 And I'm going to leave that blank for just a second. 00:08:38.210 --> 00:08:40.760 Our next big overarching tag is going to be 00:08:40.760 --> 00:08:45.860 main, which is going to be kind of like the main part of our HTML page 00:08:45.860 --> 00:08:48.510 where we're going to store our table. 00:08:48.510 --> 00:08:54.410 And the last part is going to be a footer, so something that you 00:08:54.410 --> 00:08:59.120 see on the bottom of your web page. 00:08:59.120 --> 00:09:05.420 Usually, I think it's small copyright tags, that, for example, David 00:09:05.420 --> 00:09:06.450 introduced in lecture. 00:09:06.450 --> 00:09:08.480 So let's start populating these things. 00:09:08.480 --> 00:09:12.890 First, for the header, let's do something 00:09:12.890 --> 00:09:19.610 like H1, which is just one of the tags for our HTML file. 00:09:19.610 --> 00:09:32.670 And I'm going to say something like left team versus right team. 00:09:32.670 --> 00:09:35.640 And I'm going to close my tag. 00:09:35.640 --> 00:09:39.780 And then I'm going to maybe do a paragraph 00:09:39.780 --> 00:09:49.780 tag that says, hey, there, click a button to change the score. 00:09:49.780 --> 00:09:52.450 OK, so this is our header. 00:09:52.450 --> 00:09:56.050 And actually you can see that I'm still running my http-server here 00:09:56.050 --> 00:09:56.950 in the terminal. 00:09:56.950 --> 00:09:59.810 And it's listening to all the changes that I'm making. 00:09:59.810 --> 00:10:03.850 And so if I go back to my scoreboard web page, 00:10:03.850 --> 00:10:06.050 you can see the changes that we made. 00:10:06.050 --> 00:10:10.660 Now we have our big header that we just implemented. 00:10:10.660 --> 00:10:15.040 And we have our paragraph, kind of like the subtext 00:10:15.040 --> 00:10:17.350 that's giving a little bit more information of what's 00:10:17.350 --> 00:10:19.570 going on the HTML page. 00:10:19.570 --> 00:10:24.550 Now, since we already have a main part of our web page ready, 00:10:24.550 --> 00:10:30.640 I'm just going to copy and paste the table inside the main. 00:10:30.640 --> 00:10:32.510 So nothing is really changing. 00:10:32.510 --> 00:10:38.290 We're just introducing some bigger, overarching tags that really 00:10:38.290 --> 00:10:41.350 don't change much about HTML page. 00:10:41.350 --> 00:10:45.460 But we use it for better readability and for better design 00:10:45.460 --> 00:10:48.940 so that it is very clear to another user who might open 00:10:48.940 --> 00:10:51.720 your code that here's what's going on. 00:10:51.720 --> 00:10:55.370 We have a header, the main, and the footer separating the HTML 00:10:55.370 --> 00:10:57.860 into these three parts so that it's easier 00:10:57.860 --> 00:11:01.250 to find information or change the code later on. 00:11:01.250 --> 00:11:09.150 And in the footer, for example, I can say something like made by CS50-- 00:11:09.150 --> 00:11:11.640 something simple. 00:11:11.640 --> 00:11:16.440 It can be made by Juliia or if Carter was here, made by Carter, 00:11:16.440 --> 00:11:22.560 so still using the same paragraph tag that we've seen before. 00:11:22.560 --> 00:11:25.780 And let's just reload to make sure all the changes are here. 00:11:25.780 --> 00:11:32.100 And yes, you can see that we have the title, the subtext, 00:11:32.100 --> 00:11:37.650 and the footer present on the web page right now. 00:11:37.650 --> 00:11:47.620 Before we move on to other things, do we have any questions about HTML tags-- 00:11:47.620 --> 00:11:51.250 introducing different tags and modifying the code? 00:11:51.250 --> 00:11:54.410 There are certainly so many other things that you can do. 00:11:54.410 --> 00:11:57.760 And there are so many other tags that you can explore. 00:11:57.760 --> 00:12:01.330 One of the questions is, does footer make text smaller? 00:12:01.330 --> 00:12:02.800 Not necessarily. 00:12:02.800 --> 00:12:06.430 For example, I can remove the footer from here. 00:12:06.430 --> 00:12:10.430 And I will just keep my paragraph tag. 00:12:10.430 --> 00:12:12.310 And let's reload to see. 00:12:12.310 --> 00:12:16.960 It's still the same, right, because HTML structure goes top to bottom. 00:12:16.960 --> 00:12:22.780 And it really is only outputting on the web page itself-- 00:12:22.780 --> 00:12:25.060 the tags that I'm putting in. 00:12:25.060 --> 00:12:29.740 And footer main and the same way header is kind of just 00:12:29.740 --> 00:12:32.920 like breaking it down in the code so that it 00:12:32.920 --> 00:12:37.570 is easier for readability for the user who might open your code later on 00:12:37.570 --> 00:12:38.530 to make some changes. 00:12:38.530 --> 00:12:40.340 But that's a great question. 00:12:40.340 --> 00:12:43.540 I'm just going to revert to back to what we had. 00:12:43.540 --> 00:12:47.870 Is it normal for tables to be centered by default? 00:12:47.870 --> 00:12:49.970 Let's check. 00:12:49.970 --> 00:12:54.860 Actually, we've already modified the table style 00:12:54.860 --> 00:12:59.250 to be centered, which we'll get into just in a few moments. 00:12:59.250 --> 00:13:00.890 But that's a very great question. 00:13:00.890 --> 00:13:02.660 Yes. 00:13:02.660 --> 00:13:05.120 I think by default, everything is left centered. 00:13:05.120 --> 00:13:09.330 So you definitely need to go in and make the changes yourself. 00:13:09.330 --> 00:13:11.865 What other questions do we have before we move on? 00:13:21.200 --> 00:13:26.450 OK, let's go back to our slides. 00:13:26.450 --> 00:13:32.630 And what we're going to talk about now is CSS. 00:13:32.630 --> 00:13:36.710 Does anyone know what CSS is, what it does, 00:13:36.710 --> 00:13:39.770 how does it make our web page a little bit better? 00:13:45.900 --> 00:13:48.320 Great, yes, it's cascading style sheets. 00:13:48.320 --> 00:13:52.280 So CSS is what makes the web pages pretty, right? 00:13:52.280 --> 00:13:55.010 We barely have any style applied right now. 00:13:55.010 --> 00:13:56.630 It looks very black and white. 00:13:56.630 --> 00:14:00.830 But CSS is what makes all the websites look so pretty. 00:14:00.830 --> 00:14:07.170 And with the bootstraps and all the other resources that are out there, 00:14:07.170 --> 00:14:11.330 you can make the web pages really interactive and really user-friendly, 00:14:11.330 --> 00:14:13.350 improving their user experience. 00:14:13.350 --> 00:14:15.110 So let's jump into it. 00:14:15.110 --> 00:14:18.180 How actually do we use CSS? 00:14:18.180 --> 00:14:22.850 So the way that the syntax works is that you will have some kind of selector. 00:14:22.850 --> 00:14:24.210 It can be a tag. 00:14:24.210 --> 00:14:25.010 It can be an ID. 00:14:25.010 --> 00:14:26.180 It can be a class. 00:14:26.180 --> 00:14:31.520 And then in the curly braces, you would specify the property and the value. 00:14:31.520 --> 00:14:35.750 For example, as we've already talked about, it can be the text align. 00:14:35.750 --> 00:14:36.980 Or it can be a font. 00:14:36.980 --> 00:14:39.440 It can be the size of the font or the color 00:14:39.440 --> 00:14:47.870 and really so many other properties that you can change on the web page 00:14:47.870 --> 00:14:50.930 to make it a little bit prettier. 00:14:50.930 --> 00:15:00.400 So for example, here, I have all of my components of the table. 00:15:00.400 --> 00:15:06.070 So for example, if I wanted to apply some particular property 00:15:06.070 --> 00:15:14.650 to our tag td, what I could do is select all of the td tags. 00:15:14.650 --> 00:15:16.870 I'm specifying my tag right here. 00:15:16.870 --> 00:15:18.280 I'm opening the curly braces. 00:15:18.280 --> 00:15:24.900 And I can specify some particular properties in the same-- 00:15:24.900 --> 00:15:28.410 yeah, so it will go in and grab all of the td tags 00:15:28.410 --> 00:15:30.330 that it sees in the HTML file. 00:15:30.330 --> 00:15:34.770 And it will apply that same property to all of them. 00:15:34.770 --> 00:15:37.960 In the same way, I can do something a little bit different. 00:15:37.960 --> 00:15:41.640 And I can just pick one element that I want to modify. 00:15:41.640 --> 00:15:45.870 And I can do that by assigning a tag and ID. 00:15:45.870 --> 00:15:50.430 So in this case, I have ID score1. 00:15:50.430 --> 00:15:54.360 And I can specify that for this particular element that 00:15:54.360 --> 00:15:59.500 has an ID score1, I want the color to be red, for example. 00:15:59.500 --> 00:16:05.640 And so what it will do, it will look through the whole tree of our HTML 00:16:05.640 --> 00:16:06.390 tags. 00:16:06.390 --> 00:16:07.470 It will go in. 00:16:07.470 --> 00:16:10.890 And it will find an element that has an ID score of 1. 00:16:10.890 --> 00:16:17.720 And it will apply a particular property that we picked for it to this tag. 00:16:17.720 --> 00:16:22.760 In a similar way, if there are, for example, multiple tags 00:16:22.760 --> 00:16:25.040 that I want to apply the same property to 00:16:25.040 --> 00:16:28.160 but they're not necessarily the same tags-- 00:16:28.160 --> 00:16:33.200 for example, I want to apply the same property too-- 00:16:33.200 --> 00:16:37.010 I don't know-- say, like, all the tr tags and all the td tags, 00:16:37.010 --> 00:16:40.820 I want to, for example, modify the font-- 00:16:40.820 --> 00:16:45.270 I could do that by assigning them a specific class. 00:16:45.270 --> 00:16:49.130 So in this case, the class can specify by dot team. 00:16:49.130 --> 00:16:51.170 And I can assign some properties. 00:16:51.170 --> 00:16:55.400 For example, I want the font to be bold. 00:16:55.400 --> 00:16:58.340 So the main difference in syntax just to recap 00:16:58.340 --> 00:17:02.690 is that for the tags, when you want to specify it in CSS, 00:17:02.690 --> 00:17:06.770 it is just the tag name for IDs. 00:17:06.770 --> 00:17:09.349 It's hashtag ID name. 00:17:09.349 --> 00:17:15.480 And for the classes, it's dot class name. 00:17:15.480 --> 00:17:21.270 So moving on, let's go back to our scoreboard dot HTML. 00:17:21.270 --> 00:17:27.450 And let's look at some of the style that we've already modified. 00:17:27.450 --> 00:17:32.070 And before we jump into changing some things, what questions do 00:17:32.070 --> 00:17:40.470 we have about the syntax of CSS, how we can apply that to our HTML, 00:17:40.470 --> 00:17:42.890 or anything along those lines? 00:17:55.030 --> 00:17:58.400 OK, let's get going then. 00:17:58.400 --> 00:18:04.060 So what I'm going to do here is I'm just going to modify a few things. 00:18:04.060 --> 00:18:08.330 Before I do that, let's just go over what we already have here. 00:18:08.330 --> 00:18:12.070 So as you can see, we've already applied some stylistic changes 00:18:12.070 --> 00:18:13.610 to the tag table. 00:18:13.610 --> 00:18:18.370 So it means that it will apply to the entire table that we have. 00:18:18.370 --> 00:18:20.360 So we changed the border. 00:18:20.360 --> 00:18:22.240 And then we changed the margins a little bit. 00:18:22.240 --> 00:18:24.520 And we aligned it to be centered. 00:18:24.520 --> 00:18:30.400 And then we set a specific stylistic change 00:18:30.400 --> 00:18:34.990 to an element td, which makes the border a little bit bigger. 00:18:34.990 --> 00:18:38.500 But how about modifying other elements? 00:18:38.500 --> 00:18:45.370 Well, let's say that I want my header and my subtext 00:18:45.370 --> 00:18:49.520 and my footer to be aligned in the center. 00:18:49.520 --> 00:18:51.730 Well, how can I do that? 00:18:51.730 --> 00:18:56.140 My header and the other two components are different tags. 00:18:56.140 --> 00:18:59.560 Let me just start with the subtext and the footer. 00:18:59.560 --> 00:19:06.100 And if we go back, we can see that the subtext has tag p. 00:19:06.100 --> 00:19:09.160 And my footer also has tag p. 00:19:09.160 --> 00:19:15.220 So what I could do is go back to my style tag. 00:19:15.220 --> 00:19:18.910 And in here, I'm going to say for tag p, what 00:19:18.910 --> 00:19:24.560 I want to do is align it in the center. 00:19:24.560 --> 00:19:30.130 So I'm going to do text-align center semicolon. 00:19:30.130 --> 00:19:30.790 Save it. 00:19:30.790 --> 00:19:31.840 Reload the page. 00:19:31.840 --> 00:19:36.940 And boom, our subtext and our footer now is 00:19:36.940 --> 00:19:43.270 centered in the middle, which makes it a little easier to read. 00:19:43.270 --> 00:19:46.850 And everything is now in one place. 00:19:46.850 --> 00:19:56.800 So let's go back to our code and say I want to now modify 00:19:56.800 --> 00:20:02.040 the background color for my team names. 00:20:02.040 --> 00:20:03.630 It seems a little black and white. 00:20:03.630 --> 00:20:05.070 So I want to change it. 00:20:05.070 --> 00:20:10.980 Well, what can I do is if I apply it to tag td, 00:20:10.980 --> 00:20:14.010 it means that everything's going to change the color. 00:20:14.010 --> 00:20:17.620 But it's two elements, so ID doesn't really make sense. 00:20:17.620 --> 00:20:21.520 So what can I do in this case is assign it a class. 00:20:21.520 --> 00:20:24.910 So for example, I'm going to call it class team. 00:20:24.910 --> 00:20:28.510 Don't forget about the dot operator that we want to use in this case. 00:20:28.510 --> 00:20:33.480 I'm going to change the background color to be crimson. 00:20:33.480 --> 00:20:37.900 And I looked up the hex value for that. 00:20:37.900 --> 00:20:40.830 So this will make the background color crimson. 00:20:40.830 --> 00:20:41.940 I go in. 00:20:41.940 --> 00:20:43.410 I reload. 00:20:43.410 --> 00:20:45.150 It didn't change. 00:20:45.150 --> 00:20:48.111 What happened? 00:20:48.111 --> 00:20:51.730 What did we miss? 00:20:51.730 --> 00:20:52.420 I went in. 00:20:52.420 --> 00:20:53.530 And I did the style. 00:20:53.530 --> 00:20:55.420 I changed the color. 00:20:55.420 --> 00:20:56.935 But what am I missing here? 00:21:04.120 --> 00:21:04.620 Right. 00:21:04.620 --> 00:21:08.130 I didn't specify that my class is now a team. 00:21:08.130 --> 00:21:08.940 Great catch. 00:21:08.940 --> 00:21:12.840 So what I'm going to do is I'm going to go into my element. 00:21:12.840 --> 00:21:14.640 And I'm going to say that I actually want 00:21:14.640 --> 00:21:21.810 to assign a class team here and then class team right here as well. 00:21:21.810 --> 00:21:23.130 Save it. 00:21:23.130 --> 00:21:24.030 Reload. 00:21:24.030 --> 00:21:33.680 And boom, now my background color is different but just for those two cells, 00:21:33.680 --> 00:21:35.900 not for any other row. 00:21:39.110 --> 00:21:45.350 OK, so now what I want to do is maybe I want 00:21:45.350 --> 00:21:49.940 to have my buttons be different colors but not the background color, 00:21:49.940 --> 00:21:53.660 just the text so that I can distinguish it. 00:21:53.660 --> 00:21:57.140 And I can already see that they have IDs assigned 00:21:57.140 --> 00:21:59.600 to them, which is very useful to me because now I 00:21:59.600 --> 00:22:02.960 can just go to our style part. 00:22:02.960 --> 00:22:07.010 And all I need to do is specify the ID. 00:22:07.010 --> 00:22:09.660 I want to change just the text color. 00:22:09.660 --> 00:22:12.410 So for that, the property's going to be color. 00:22:12.410 --> 00:22:17.660 And I'm going to make team one crimson. 00:22:17.660 --> 00:22:26.015 And then for ID 2, I am going to make it blue. 00:22:31.440 --> 00:22:33.630 OK, great. 00:22:33.630 --> 00:22:35.730 I think this is supposed to be zero. 00:22:35.730 --> 00:22:38.400 OK, I already have my ID specified. 00:22:38.400 --> 00:22:41.400 So there are no changes to be made. 00:22:41.400 --> 00:22:45.270 Right here I already have add1 and add2. 00:22:45.270 --> 00:22:48.870 So if I reload the page, oh-- 00:22:52.050 --> 00:22:53.220 did I miss something? 00:22:57.650 --> 00:22:58.310 Nice catch. 00:22:58.310 --> 00:23:01.160 [LAUGHS] Wrong spelling. 00:23:01.160 --> 00:23:02.180 Let's reload. 00:23:09.320 --> 00:23:09.820 Hm. 00:23:13.610 --> 00:23:16.290 Let's try something different. 00:23:16.290 --> 00:23:20.120 I tested it with score1 and score2. 00:23:20.120 --> 00:23:24.530 So let's see if that might work. 00:23:24.530 --> 00:23:27.480 A-ha, OK, this worked. 00:23:27.480 --> 00:23:32.240 So now we have 0 and 0 in crimson and in blue. 00:23:32.240 --> 00:23:36.613 I wonder why it didn't quite work out for the buttons. 00:23:36.613 --> 00:23:38.280 This is something for me to debug later. 00:23:38.280 --> 00:23:42.470 But as you can see, you can also change the font 00:23:42.470 --> 00:23:47.540 of the color for different IDs. 00:23:47.540 --> 00:23:56.800 Before we move on, do we have any questions about this? 00:23:56.800 --> 00:23:59.320 Oh, thank you so much for catching that-- 00:23:59.320 --> 00:24:00.970 add1 and id1. 00:24:00.970 --> 00:24:05.530 OK, let's maybe make these changes as well so 00:24:05.530 --> 00:24:09.930 that it can reflect on the rest of the web page. 00:24:16.560 --> 00:24:19.230 I'm going to copy this. 00:24:19.230 --> 00:24:21.270 OK, yay. 00:24:21.270 --> 00:24:24.660 Boom, it works for the button as well. 00:24:24.660 --> 00:24:27.190 Thank you for catching it. 00:24:27.190 --> 00:24:33.990 Any questions that we have about CSS applying properties, changing 00:24:33.990 --> 00:24:35.350 the values? 00:24:35.350 --> 00:24:37.680 There are a lot of the things that you can do with it. 00:24:37.680 --> 00:24:39.810 And there's certainly resources like Bootstrap 00:24:39.810 --> 00:24:43.260 that already have all these stylistic changes premade for you 00:24:43.260 --> 00:24:46.950 that you can kind of just import into your own code. 00:24:46.950 --> 00:24:52.380 But there is a question about how to change a button color. 00:24:52.380 --> 00:24:59.070 So here, we've already changed the color of the text. 00:24:59.070 --> 00:25:02.850 To change the button color, you can do something very similar-- 00:25:02.850 --> 00:25:07.020 for example, change the background color. 00:25:07.020 --> 00:25:12.000 And since it has the button tag to it, I believe 00:25:12.000 --> 00:25:19.510 you can just specify button tag on top of your code in the style part. 00:25:19.510 --> 00:25:22.900 And it should apply the changes to all of the buttons. 00:25:28.960 --> 00:25:29.980 We have a question. 00:25:29.980 --> 00:25:33.550 How did you use CSS in an HTML file? 00:25:33.550 --> 00:25:35.470 So there are two ways to go about it. 00:25:35.470 --> 00:25:38.620 And we will talk about the second way a little bit later. 00:25:38.620 --> 00:25:43.260 But for now, what I'm doing is that in my head that contains title. 00:25:43.260 --> 00:25:51.360 I also have my tag style that essentially incorporates all the CSS 00:25:51.360 --> 00:25:53.700 changes that I am making. 00:25:53.700 --> 00:26:00.330 But we will talk about other alternative way of storing CSS properties later on. 00:26:05.130 --> 00:26:14.580 OK, so let's go back to our slides for now. 00:26:14.580 --> 00:26:16.680 The next topic we're going to be talking about 00:26:16.680 --> 00:26:21.600 is JavaScript, which makes our web pages a little bit more interactive. 00:26:21.600 --> 00:26:25.170 Right now, you can see that all I'm really doing 00:26:25.170 --> 00:26:26.490 is I'm clicking the button. 00:26:26.490 --> 00:26:29.610 And it's changing the score, what is already JavaScript. 00:26:29.610 --> 00:26:33.210 But there are actually so many other things that you can do. 00:26:33.210 --> 00:26:36.280 And actually, every time you see a change 00:26:36.280 --> 00:26:38.280 on the web page, that doesn't necessarily, like, 00:26:38.280 --> 00:26:41.130 refresh the page for you and bring you to the next one over. 00:26:41.130 --> 00:26:43.170 That's where JavaScript is working. 00:26:43.170 --> 00:26:45.540 It's, like, modifying some things on the web page 00:26:45.540 --> 00:26:49.290 for you immediately to see without necessarily sending it back 00:26:49.290 --> 00:26:51.750 as a request to the server. 00:26:51.750 --> 00:26:55.320 So what's going on underneath the hood? 00:26:55.320 --> 00:26:58.410 Let's go back to our code and see what changes 00:26:58.410 --> 00:27:01.470 we've already made in our JavaScript. 00:27:01.470 --> 00:27:07.250 So as you can see on the bottom of my body tag, 00:27:07.250 --> 00:27:11.920 so still in the body not outside, I have a separate part 00:27:11.920 --> 00:27:15.580 that is surrounded by script tag. 00:27:15.580 --> 00:27:18.250 This is where all of my JavaScript is happening. 00:27:18.250 --> 00:27:28.120 What I'm doing here is I'm saying, OK, I'm going to look at ID add1. 00:27:28.120 --> 00:27:32.300 And once it's clicked, I'm going to apply some things. 00:27:32.300 --> 00:27:35.980 And the same thing is going on with add2, 00:27:35.980 --> 00:27:42.040 which are essentially our tags right here, the buttons. 00:27:42.040 --> 00:27:48.400 So JavaScript code is looking for ID add1, ID add2. 00:27:48.400 --> 00:27:52.360 Once it's clicked, it's doing the function 00:27:52.360 --> 00:27:57.880 of adding one point to the existing score of Team 1 and Team 2. 00:27:57.880 --> 00:28:04.420 And then it goes on to find ID score1. 00:28:04.420 --> 00:28:10.630 It goes into the inner HTML, which essentially is the text 00:28:10.630 --> 00:28:12.610 that you see, the text you specified. 00:28:12.610 --> 00:28:14.540 And it's updating the score. 00:28:14.540 --> 00:28:18.430 So if we go back right here, what I'm doing 00:28:18.430 --> 00:28:24.840 is once I click button plus one that has ID add1, 00:28:24.840 --> 00:28:30.510 JavaScript now records the new score and updates the text 00:28:30.510 --> 00:28:35.580 that we are storing right here under the tag score1. 00:28:35.580 --> 00:28:41.310 And the same thing is happening for Team 2, where as many times as I click, 00:28:41.310 --> 00:28:45.600 the score is now changing. 00:28:45.600 --> 00:28:51.960 So now that we kind of parsed what's going on in our code, 00:28:51.960 --> 00:28:57.970 let's go back and see how actually all of these changes are happening. 00:28:57.970 --> 00:29:01.860 So for example, we have a statement-- document 00:29:01.860 --> 00:29:06.720 dot query selector, parentheses, quotes, hashtag add1. 00:29:06.720 --> 00:29:10.120 So add1 is an ID, as we already talked about. 00:29:10.120 --> 00:29:14.460 So what JavaScript actually does, it searches 00:29:14.460 --> 00:29:19.650 for the entire tree top to bottom looking for that particular ID. 00:29:19.650 --> 00:29:24.180 So as we've seen this structure before, it first goes into the document 00:29:24.180 --> 00:29:26.310 and then goes into the HTML. 00:29:26.310 --> 00:29:31.050 Then it goes into the body, down to the table. 00:29:31.050 --> 00:29:34.500 And then we have our table structure. 00:29:34.500 --> 00:29:38.040 And it keeps going down, down, down until it 00:29:38.040 --> 00:29:42.180 finds the ID that we're looking for. 00:29:42.180 --> 00:29:46.690 In this case, ID is add1, which is a button. 00:29:46.690 --> 00:29:49.990 And so it had found it. 00:29:49.990 --> 00:29:54.670 In the same way, when we have onclick, what it does 00:29:54.670 --> 00:29:58.930 is that it looks for the ID 1-- 00:29:58.930 --> 00:30:05.630 sorry-- for the add1 ID once we clicked that particular tag. 00:30:05.630 --> 00:30:08.306 Another statement that we just saw is document 00:30:08.306 --> 00:30:15.170 dot query selector, hashtag score1 and dot, innerHTML. 00:30:15.170 --> 00:30:21.560 So what innerHTML now stands for is really the text that we've 00:30:21.560 --> 00:30:24.500 specified in our HTML file previously. 00:30:24.500 --> 00:30:27.620 And in the same way, the whole code is going 00:30:27.620 --> 00:30:32.960 to search the entire tree looking for that particular ID, score1 00:30:32.960 --> 00:30:39.920 and going then into the innerHTML or the text of that tag 00:30:39.920 --> 00:30:47.420 to do the necessary changes, so a very top to bottom approach. 00:30:47.420 --> 00:30:50.510 It has a lot of things to look for. 00:30:50.510 --> 00:30:58.800 But that's what's going on underneath the hood for JavaScript. 00:30:58.800 --> 00:31:04.350 What questions do we have before we jump back into our code 00:31:04.350 --> 00:31:08.505 and add on some other JavaScript features? 00:31:19.050 --> 00:31:23.280 And again, kind of just to mention is that we're touching 00:31:23.280 --> 00:31:26.070 on just a few basic things today. 00:31:26.070 --> 00:31:30.310 And David covered some more extensive examples in the lecture. 00:31:30.310 --> 00:31:33.810 But there's certainly so many other things you can do with JavaScript. 00:31:33.810 --> 00:31:37.590 And definitely everything that you see on the web page utilizes-- 00:31:37.590 --> 00:31:41.250 all the web pages regularly utilizes all of these languages 00:31:41.250 --> 00:31:43.830 to make the user experience much better. 00:31:48.020 --> 00:31:54.280 So Python is compatible with CSS and HTML. 00:31:54.280 --> 00:31:56.660 It just, it works a little bit differently. 00:31:56.660 --> 00:32:01.960 So for example, JavaScript can be embedded directly into the HTML file 00:32:01.960 --> 00:32:08.980 while with Python, it will have to be through some different kind of, like, 00:32:08.980 --> 00:32:09.940 framework. 00:32:09.940 --> 00:32:13.450 It's something that we'll see next week when we're working with Flask 00:32:13.450 --> 00:32:16.360 and we're implementing more extensive website 00:32:16.360 --> 00:32:21.410 where we have actually the interaction between the server 00:32:21.410 --> 00:32:22.930 and the web page going on. 00:32:22.930 --> 00:32:26.650 In that case, we're using kind of, like, Python 00:32:26.650 --> 00:32:30.970 on the back end where we're managing the server requests, while JavaScript, 00:32:30.970 --> 00:32:34.630 HTML, and CSS are all working on the front end, 00:32:34.630 --> 00:32:40.030 really making the changes to the web page and to the visual things 00:32:40.030 --> 00:32:43.150 that folks see on the screen. 00:32:43.150 --> 00:32:46.060 That's a great question. 00:32:46.060 --> 00:32:49.960 All righty, so moving on, what we're going to do 00:32:49.960 --> 00:32:53.830 is we're going to go into scoreboard dot HTML. 00:32:53.830 --> 00:33:00.220 And we're going to alert the user when a certain team won the game. 00:33:00.220 --> 00:33:04.030 So I'm going to go back into my code. 00:33:04.030 --> 00:33:08.020 I already have some code pre-written here as we already talked about. 00:33:08.020 --> 00:33:14.710 And what I'm going to do is that modify it a little bit so that we can actually 00:33:14.710 --> 00:33:18.320 see other visual changes on the screen. 00:33:18.320 --> 00:33:26.930 So for example, I decided that my team would win if it has 5 points. 00:33:26.930 --> 00:33:28.520 That seems somewhat fair. 00:33:28.520 --> 00:33:31.720 [CHUCKLES] It seems enough of points to get to be considered a winner. 00:33:31.720 --> 00:33:36.740 So what I'm going to do is make some conditions. 00:33:36.740 --> 00:33:40.740 I'm already tracking my score using Team 1 and Team 2 variables. 00:33:40.740 --> 00:33:42.530 So I already took care of that. 00:33:42.530 --> 00:33:48.770 What I'm going to do here is I'm going to say if Team 1, which is the score, 00:33:48.770 --> 00:34:02.770 is equal to 5, I am going to set an alert saying Team 1 won. 00:34:02.770 --> 00:34:07.030 Then I save the changes, reload the page. 00:34:07.030 --> 00:34:11.259 Click, click, click, click, click, boom, you can see I'm going-- 00:34:11.259 --> 00:34:12.650 I can't zoom in more. 00:34:12.650 --> 00:34:15.100 But you can see that on the top, I now have 00:34:15.100 --> 00:34:19.570 an alert window that says Team 1 won. 00:34:19.570 --> 00:34:26.530 Now, if I do it for the Team 2, nothing is happening, although I'm definitely 00:34:26.530 --> 00:34:28.639 reaching a lot of points. 00:34:28.639 --> 00:34:32.630 So let's just go back and make the necessary changes here. 00:34:32.630 --> 00:34:42.940 So I'm just going to do the same thing where I'm going to say if Team 2 now-- 00:34:42.940 --> 00:34:50.529 if Team 2 score is now equal to 5, I am going to create an alert for Team 2. 00:34:55.159 --> 00:35:01.340 And now if I go back and I reload, Team 1 won. 00:35:01.340 --> 00:35:02.300 I got an alert. 00:35:02.300 --> 00:35:05.920 And Team 2 won. 00:35:05.920 --> 00:35:07.620 I get an alert. 00:35:07.620 --> 00:35:17.020 And it's actually interesting to see that the alert happens when I click. 00:35:17.020 --> 00:35:18.370 And the score is technically 5. 00:35:18.370 --> 00:35:23.485 But alert appears before the HTML actually changes it to a score of 5. 00:35:29.360 --> 00:35:30.950 I have a question in the chat. 00:35:30.950 --> 00:35:36.930 Could you not use the kind of [? CLion ?] line operator for the or? 00:35:36.930 --> 00:35:43.290 So because it is separated in our JavaScript code by IDs-- 00:35:43.290 --> 00:35:46.050 we're looking at one element at the time-- 00:35:48.710 --> 00:35:52.760 I could not do the or operator to minimize 00:35:52.760 --> 00:35:56.180 the code because in this JavaScript setup, 00:35:56.180 --> 00:36:00.240 it is looking at one particular element at a time. 00:36:00.240 --> 00:36:05.890 So it listens for the onclick for the tag add1 00:36:05.890 --> 00:36:09.280 and then makes all the necessary changes within kind of that branch. 00:36:09.280 --> 00:36:13.990 So there are definitely ways to optimize. 00:36:13.990 --> 00:36:16.660 I'm sure you can click more than 5 because we didn't really 00:36:16.660 --> 00:36:18.190 set any restrictions. 00:36:18.190 --> 00:36:22.090 We kind of just said, like, once it's 5, Team 1, 00:36:22.090 --> 00:36:25.120 but we can certainly keep going. 00:36:25.120 --> 00:36:31.570 And before we move on, I want to show you one more feature. 00:36:31.570 --> 00:36:35.290 Do we have any questions about this part? 00:36:35.290 --> 00:36:39.260 The syntax is certainly somewhat similar to what we saw. 00:36:39.260 --> 00:36:44.440 For example, we have same way of kind of setting the variables. 00:36:44.440 --> 00:36:47.530 Semicolons are back, unfortunately. 00:36:47.530 --> 00:36:50.470 But for example, we don't need to specify 00:36:50.470 --> 00:36:55.090 a data type or some of those things. 00:37:01.100 --> 00:37:02.480 So we have a question. 00:37:02.480 --> 00:37:05.980 Is it better to select an HTML element with query selector 00:37:05.980 --> 00:37:10.990 instead of get element by ID? 00:37:10.990 --> 00:37:14.810 I'm pretty sure both are interchangeable. 00:37:14.810 --> 00:37:17.320 It just depends on what syntax you're using. 00:37:17.320 --> 00:37:22.630 Query selector would allow you to use it on the IDs, on the classes, 00:37:22.630 --> 00:37:27.718 and on tags, versus get element by ID is just with those specific-- 00:37:27.718 --> 00:37:32.485 like for a specific ID, so depending on how you want to set up your code. 00:37:36.040 --> 00:37:42.250 OK, so what I'm going to do here now is I'm still 00:37:42.250 --> 00:37:46.130 going to announce the winner, just a little bit differently. 00:37:46.130 --> 00:37:48.170 So I'm just going to [INAUDIBLE] this out. 00:37:48.170 --> 00:37:56.650 What I'm instead going to do is create a paragraph tag up here. 00:37:56.650 --> 00:38:00.800 But I'm actually not specifying anything. 00:38:00.800 --> 00:38:03.790 I'm just giving it an ID. 00:38:03.790 --> 00:38:13.520 I'm going to give it an ID result, so result. Great. 00:38:13.520 --> 00:38:16.820 So if I go back in here, there's nothing, right? 00:38:16.820 --> 00:38:19.370 I specified a paragraph tag. 00:38:19.370 --> 00:38:23.570 But I didn't put any text in, so you can't really see it on the web page 00:38:23.570 --> 00:38:24.620 right now. 00:38:24.620 --> 00:38:29.810 What I'm going to do instead is instead of creating 00:38:29.810 --> 00:38:32.660 an alert that's kind of like a browser thing, 00:38:32.660 --> 00:38:36.920 I'm going to modify something within our HTML page. 00:38:36.920 --> 00:38:41.240 I'm going to do document query selector. 00:38:41.240 --> 00:38:50.390 And I'm going to grab my ID result. And I'm 00:38:50.390 --> 00:38:53.910 going to change an innerHTML for that. 00:38:53.910 --> 00:38:59.030 So it's a very similar structure to what we're doing up here. 00:38:59.030 --> 00:39:03.380 We're grabbing, for example, score of 1 and changing the innerHTML 00:39:03.380 --> 00:39:05.180 to a specific number. 00:39:05.180 --> 00:39:07.340 I'm going to do exact same thing here. 00:39:07.340 --> 00:39:12.000 But I'm just going to put in text instead of numbers. 00:39:12.000 --> 00:39:17.670 And now if we go back, reload, we still see nothing. 00:39:17.670 --> 00:39:18.540 The tag is there. 00:39:18.540 --> 00:39:19.710 But text isn't. 00:39:19.710 --> 00:39:23.100 But once I click-- 00:39:23.100 --> 00:39:25.790 oops. 00:39:25.790 --> 00:39:26.810 What's going on? 00:39:35.630 --> 00:39:39.065 Let me see where I might have messed up. 00:39:45.040 --> 00:39:45.540 Hm. 00:39:55.830 --> 00:39:59.390 And I didn't change anything here. 00:39:59.390 --> 00:40:00.710 That is very true. 00:40:00.710 --> 00:40:04.613 You're not doing it right if you don't get bugs once in a while. 00:40:07.970 --> 00:40:16.770 Let me cut out this whole part and just test it out as we've had before. 00:40:16.770 --> 00:40:20.940 OK, so there's definitely something with my if statement that wasn't working. 00:40:20.940 --> 00:40:26.970 So let's just maybe delete this part. 00:40:26.970 --> 00:40:29.010 And let's check our syntax-- 00:40:29.010 --> 00:40:31.470 document dot query selector. 00:40:31.470 --> 00:40:34.500 A-ah, a dot-- that's why it wasn't working. 00:40:34.500 --> 00:40:37.830 OK, so let's go back. 00:40:37.830 --> 00:40:40.150 I can now make the changes. 00:40:40.150 --> 00:40:44.010 So we click 2, 3, 4, 5. 00:40:44.010 --> 00:40:52.290 And now I see my innerHTML changed to Team 1 won in the paragraph tag 00:40:52.290 --> 00:40:54.900 that I specified earlier but that was empty. 00:40:54.900 --> 00:41:00.360 I can now go in and do exact same thing for Team 2. 00:41:00.360 --> 00:41:04.980 I'm just going to change it to Team 2 won. 00:41:04.980 --> 00:41:10.830 And now if we go back and refresh, Team 2 won. 00:41:10.830 --> 00:41:13.950 So these are some of the things that you can do. 00:41:13.950 --> 00:41:18.700 As you can see, I didn't necessarily specify any text in the beginning. 00:41:18.700 --> 00:41:20.850 I just put in a plain tag. 00:41:20.850 --> 00:41:24.450 But you can go in later on using JavaScript 00:41:24.450 --> 00:41:29.700 to make the necessary changes to update your innerHTML 00:41:29.700 --> 00:41:32.580 or even change the color. 00:41:35.470 --> 00:41:39.600 I'm going to Zoom out a little bit so that it's fully visible. 00:41:39.600 --> 00:41:47.970 But what questions do we have about, at this point, HTML, CSS, JavaScript-- 00:41:47.970 --> 00:41:50.985 kind of all of that we've talked about today? 00:41:54.550 --> 00:41:59.680 These are certainly just small bits and pieces that I'm showing today. 00:41:59.680 --> 00:42:03.295 But it definitely has a lot of potential for a lot more things. 00:42:06.670 --> 00:42:11.345 If you get a score of 5 on both, will the Team 1 and Team 2 won both 00:42:11.345 --> 00:42:12.220 appear on the screen? 00:42:12.220 --> 00:42:13.780 Or will the first one get priority? 00:42:13.780 --> 00:42:14.985 That is a great question. 00:42:14.985 --> 00:42:16.610 And we can test it out. 00:42:16.610 --> 00:42:20.530 So for example, if I go evenly, right-- 00:42:20.530 --> 00:42:22.810 I'm updating it one after another-- 00:42:22.810 --> 00:42:23.920 I reach 4. 00:42:23.920 --> 00:42:29.860 So if I add a score to Team 1, we'll see Team 1 won. 00:42:29.860 --> 00:42:33.820 But now if I add the score to Team 2, it changes 00:42:33.820 --> 00:42:37.660 to Team 2 won because that's the sequence that it happened in. 00:42:37.660 --> 00:42:40.300 And then you can actually see that it doesn't disappear. 00:42:40.300 --> 00:42:44.330 Once you keep clicking the buttons, it's kind of, like, static. 00:42:44.330 --> 00:42:46.450 It doesn't really go anywhere at this point. 00:42:46.450 --> 00:42:51.340 There's certainly changes that you can make where you kind of, like, restrict. 00:42:51.340 --> 00:42:54.790 You don't allow a user to click more buttons 00:42:54.790 --> 00:42:56.710 after they reach the score of 5. 00:42:56.710 --> 00:43:01.930 Or you make the tag that we've created, Team 2 00:43:01.930 --> 00:43:07.220 won, disappear after a few seconds after you clicked it. 00:43:07.220 --> 00:43:12.260 There are a lot of components to JavaScript and to HTML that 00:43:12.260 --> 00:43:14.860 can make all of these things possible. 00:43:14.860 --> 00:43:18.980 And we're certainly just, like, scratching the surface of these three 00:43:18.980 --> 00:43:22.445 languages today but introducing some of the most common features. 00:43:26.230 --> 00:43:28.660 All righty, if we don't have any questions, 00:43:28.660 --> 00:43:32.390 there's just one last thing that I wanted to show you. 00:43:32.390 --> 00:43:36.970 So we've made a lot of changes to our HTML file. 00:43:36.970 --> 00:43:44.650 We started by modifying our HTML body, adding some new tags, 00:43:44.650 --> 00:43:48.040 as well as introducing some overarching tags that 00:43:48.040 --> 00:43:50.720 help us break out the code better. 00:43:50.720 --> 00:43:57.010 We've made some changes to the JavaScript to make it more interactive 00:43:57.010 --> 00:43:59.950 so that the web page is a little bit more dynamic. 00:43:59.950 --> 00:44:05.590 And we certainly made a lot of changes to our style tag. 00:44:05.590 --> 00:44:09.490 And as you can see, it is getting very long. 00:44:09.490 --> 00:44:15.260 We have 1, 2, 3, 4, 5, 6, 7, 8 different changes. 00:44:15.260 --> 00:44:22.010 So does anyone have an idea how we can make this look a little bit better? 00:44:22.010 --> 00:44:26.180 How can we make our current code look a little bit shorter 00:44:26.180 --> 00:44:27.725 in the dot HTML file? 00:44:31.630 --> 00:44:33.070 That's a great idea. 00:44:33.070 --> 00:44:39.990 Yes, we can move it to a different file, so completely move CSS out of the way. 00:44:39.990 --> 00:44:43.340 So why don't we go and do that. 00:44:43.340 --> 00:44:49.690 So I am going to create a new terminal so that I 00:44:49.690 --> 00:44:53.200 don't stop my website from running. 00:44:53.200 --> 00:44:59.470 I am going to create a file called styles dot CSS. 00:44:59.470 --> 00:45:04.480 And I'm just going to copy over-- 00:45:04.480 --> 00:45:11.290 oop-- I'm going to copy over all of the changes that we made to our styles 00:45:11.290 --> 00:45:17.840 dot CSS, save it, go back to scoreboard dot title. 00:45:17.840 --> 00:45:22.340 Now I can get rid of these tags because I already 00:45:22.340 --> 00:45:24.770 moved my styles to the other place. 00:45:24.770 --> 00:45:29.630 And what I'm going to do instead is I'm going to link my HTML file 00:45:29.630 --> 00:45:31.980 and my CSS file together. 00:45:31.980 --> 00:45:39.760 So I'm going to create a tag link and specify 00:45:39.760 --> 00:45:44.470 that the relationship is stylesheet. 00:45:44.470 --> 00:45:52.350 And I'm going to reference file styles dot CSS. 00:45:52.350 --> 00:45:59.700 Close the tag, save it, save this again, go back, reload. 00:45:59.700 --> 00:46:02.160 And you can see that all of the changes still apply. 00:46:02.160 --> 00:46:08.070 So we still have the color change for the background. 00:46:08.070 --> 00:46:16.710 We still change the color of the fonts by moving the styles-- 00:46:16.710 --> 00:46:19.650 kind of like CSS properties-- out of the way. 00:46:19.650 --> 00:46:22.620 We also made our HTML look a little bit cleaner. 00:46:22.620 --> 00:46:25.980 Instead of now having rows and rows of different properties, 00:46:25.980 --> 00:46:31.130 we now just have our HTML tags and our HTML body. 00:46:31.130 --> 00:46:35.110 There's also a way to move JavaScript out of the way 00:46:35.110 --> 00:46:42.100 so that it doesn't make your HTML file look a little bit more complex. 00:46:42.100 --> 00:46:45.150 But for now, we can just keep it in here as we just 00:46:45.150 --> 00:46:48.420 have maybe like a dozen lines. 00:46:48.420 --> 00:46:54.470 And it's not really abstracting our HTML for now. 00:46:54.470 --> 00:46:59.540 But what questions do we have about anything 00:46:59.540 --> 00:47:03.410 that we've done today about changing the styles, 00:47:03.410 --> 00:47:09.810 linking the sheets together, creating classes, IDs, new tags? 00:47:14.470 --> 00:47:15.930 So we have a question in the chat. 00:47:15.930 --> 00:47:18.690 Is it necessary to keep the script tag at the bottom? 00:47:18.690 --> 00:47:24.930 For now, yes, because we still have our JavaScript code and our HTML file. 00:47:24.930 --> 00:47:29.880 If we decide to move JavaScript to a different file, 00:47:29.880 --> 00:47:32.140 it's going to be slightly different syntax. 00:47:32.140 --> 00:47:34.900 Unfortunately, I don't have an example on me. 00:47:34.900 --> 00:47:40.155 But I'm sure this is something that you can look up very easily. 00:47:46.680 --> 00:47:48.830 Do we have any other questions? 00:47:54.730 --> 00:47:57.460 The question is, is this session going to be posted after it? 00:47:57.460 --> 00:48:04.010 And, yes, certainly we will post it on the website a little bit later. 00:48:04.010 --> 00:48:08.940 And you all should have access to it, yes. 00:48:15.340 --> 00:48:17.330 All right, sounds good. 00:48:17.330 --> 00:48:20.260 Well, thank you so much for joining. 00:48:20.260 --> 00:48:25.720 This was Section 8 of really delving into the web development-- 00:48:25.720 --> 00:48:28.270 HTML, CSS, internet, things related. 00:48:28.270 --> 00:48:30.920 Thank you so much for joining us today. 00:48:30.920 --> 00:48:35.050 I hope I lived up to your expectations and I was a good for Carter. 00:48:35.050 --> 00:48:40.680 But I'm looking forward to seeing you all in the next sessions.