1 00:00:00,000 --> 00:00:01,928 2 00:00:01,928 --> 00:00:05,320 YULIIA ZHUKOVETS: OK, welcome to CS50. 3 00:00:05,320 --> 00:00:06,790 This is week eight. 4 00:00:06,790 --> 00:00:11,170 Today, we'll be covering a lot of stuff on web development-- 5 00:00:11,170 --> 00:00:13,660 HTML, CSS, and all the other good things. 6 00:00:13,660 --> 00:00:14,770 My name is Yuliia. 7 00:00:14,770 --> 00:00:17,950 I'm one of the preceptors here at CS50 at Harvard. 8 00:00:17,950 --> 00:00:21,140 And let's kick things in. 9 00:00:21,140 --> 00:00:26,050 So as you know, this past week, David was 10 00:00:26,050 --> 00:00:30,250 talking about all things about development, anything from how internet 11 00:00:30,250 --> 00:00:33,820 works to how we actually construct the web pages that we 12 00:00:33,820 --> 00:00:36,650 interact with on everyday basis. 13 00:00:36,650 --> 00:00:40,542 So just to recap some of the main things that David 14 00:00:40,542 --> 00:00:42,250 talked about in the lecture and something 15 00:00:42,250 --> 00:00:46,600 that we'll be covering today, HTTP, which 16 00:00:46,600 --> 00:00:49,390 does someone want to give us the definition 17 00:00:49,390 --> 00:00:52,030 of what HTTP is to get us started here? 18 00:00:52,030 --> 00:00:56,530 Feel free to type it in the chat as a direct message for everyone to see. 19 00:00:56,530 --> 00:01:05,200 20 00:01:05,200 --> 00:01:08,010 So yeah, I'm seeing some good answers. 21 00:01:08,010 --> 00:01:12,120 HTTP is a hypertext transfer protocol, which is essentially 22 00:01:12,120 --> 00:01:14,760 a thing that allows the servers and the computers 23 00:01:14,760 --> 00:01:19,320 to interact between each other and for us to access 24 00:01:19,320 --> 00:01:20,860 all the information on the web. 25 00:01:20,860 --> 00:01:24,600 Then we'll get going with HTML, which essentially 26 00:01:24,600 --> 00:01:29,040 is a tool and a language that allows us to build all these web pages. 27 00:01:29,040 --> 00:01:35,940 And we'll jump into CSS and JavaScript that makes things a little bit more 28 00:01:35,940 --> 00:01:37,780 interesting in our web pages. 29 00:01:37,780 --> 00:01:42,390 So as we already talked about, HTTP is the hypertext transfer protocol, 30 00:01:42,390 --> 00:01:45,630 which essentially allows the servers and the computers 31 00:01:45,630 --> 00:01:49,860 to interact between each other to send, get requests or post requests, 32 00:01:49,860 --> 00:01:54,610 and to get the information that the user might need from the internet. 33 00:01:54,610 --> 00:01:56,850 And as you might have seen in the lecture, 34 00:01:56,850 --> 00:02:01,710 David ran a command that's called http-server. 35 00:02:01,710 --> 00:02:08,590 Does anyone want to type in the chat what http-server actually does for us 36 00:02:08,590 --> 00:02:10,630 when we type it out in the terminal? 37 00:02:10,630 --> 00:02:18,690 38 00:02:18,690 --> 00:02:24,690 Exactly, yeah, so it creates a server that listens to the HTTP requests. 39 00:02:24,690 --> 00:02:28,890 And so when I click on something on the HTML page, 40 00:02:28,890 --> 00:02:33,120 I essentially send a request that a server can respond to and provide me 41 00:02:33,120 --> 00:02:36,120 with the information that I asked for. 42 00:02:36,120 --> 00:02:42,720 So we're going to move on to HTML and get a lot practice with how 43 00:02:42,720 --> 00:02:47,040 to build web pages, what components go into it, 44 00:02:47,040 --> 00:02:51,610 and how all the web pages are actually constructed that we see every day. 45 00:02:51,610 --> 00:02:55,920 So what I'm going to do is I'm going to open a scoreboard dot 46 00:02:55,920 --> 00:02:59,910 HTML that I already have in cs50.dev. 47 00:02:59,910 --> 00:03:03,360 You are free to, welcome to follow along. 48 00:03:03,360 --> 00:03:09,510 And later on, we'll post the resource, and you can access the file yourself. 49 00:03:09,510 --> 00:03:13,170 So essentially what is going on here is that we 50 00:03:13,170 --> 00:03:17,590 have an HTML file that's already prepopulated with some information. 51 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. 52 00:03:25,375 --> 00:03:33,380 53 00:03:33,380 --> 00:03:36,080 OK, so I'm going to zoom in a little bit so 54 00:03:36,080 --> 00:03:37,790 that everyone can see what's going on. 55 00:03:37,790 --> 00:03:40,790 Essentially, what we have is a quite simple HTML 56 00:03:40,790 --> 00:03:44,750 page where it is a table that has three rows and two columns. 57 00:03:44,750 --> 00:03:49,610 And what the page currently does is that I can click one of these buttons. 58 00:03:49,610 --> 00:03:54,320 And you can see that the score inside the table for a corresponding team 59 00:03:54,320 --> 00:03:55,820 will change. 60 00:03:55,820 --> 00:03:58,520 It doesn't really do much behind this, right? 61 00:03:58,520 --> 00:03:59,990 It's a pretty simple web page. 62 00:03:59,990 --> 00:04:04,470 But we will make some changes to make it more interactive. 63 00:04:04,470 --> 00:04:07,950 So to go back to the HTML code that we already have, 64 00:04:07,950 --> 00:04:10,400 let's just break down what's going on here. 65 00:04:10,400 --> 00:04:16,730 Currently, we only have the table code in the body tag 66 00:04:16,730 --> 00:04:21,500 that essentially just builds out the rows and the columns. 67 00:04:21,500 --> 00:04:26,760 And we also have some other components that we'll talk about later. 68 00:04:26,760 --> 00:04:30,800 So to actually go into the whole structure of the HTML, 69 00:04:30,800 --> 00:04:33,450 what we can see here is a thing that we call 70 00:04:33,450 --> 00:04:36,270 DOM, which is a Document Object Model. 71 00:04:36,270 --> 00:04:41,250 It is essentially a tree that builds the HTML files. 72 00:04:41,250 --> 00:04:46,090 It goes top to bottom as everything in programming. 73 00:04:46,090 --> 00:04:48,420 So at the very top, we see the document itself. 74 00:04:48,420 --> 00:04:51,550 And it has the HTML code in it. 75 00:04:51,550 --> 00:04:55,560 And so then it splits up into a head and a body. 76 00:04:55,560 --> 00:05:02,920 And we can see that it then goes into a different component of the HTML files. 77 00:05:02,920 --> 00:05:08,670 So in the head, we have information like title that goes on the tab 78 00:05:08,670 --> 00:05:11,400 that you open-- essentially the name of the web page. 79 00:05:11,400 --> 00:05:16,920 It takes in a style, so the different CSS components 80 00:05:16,920 --> 00:05:19,950 that we can modify to make our web page a little bit prettier. 81 00:05:19,950 --> 00:05:24,060 And then on the right side, we have the body of the HTML that contains, 82 00:05:24,060 --> 00:05:27,600 in this case, a table that has other components to it 83 00:05:27,600 --> 00:05:30,810 and also a script that would contain, in this case, 84 00:05:30,810 --> 00:05:35,290 some JavaScript code that makes the web page a little bit more interactive. 85 00:05:35,290 --> 00:05:37,290 So now let's actually examine what's going 86 00:05:37,290 --> 00:05:40,710 on underneath the hood for the table component. 87 00:05:40,710 --> 00:05:45,090 Well, as you saw in the code, it actually 88 00:05:45,090 --> 00:05:47,070 is a bunch of different things. 89 00:05:47,070 --> 00:05:54,690 Essentially, what is going on here is that we have our rows that have tag tr. 90 00:05:54,690 --> 00:05:58,890 And then each row has some td components, which 91 00:05:58,890 --> 00:06:01,330 essentially are like individual cells. 92 00:06:01,330 --> 00:06:04,740 So again, the structure goes top to bottom 93 00:06:04,740 --> 00:06:08,550 where we start with a big overarching tag. 94 00:06:08,550 --> 00:06:09,990 You can call it a parent. 95 00:06:09,990 --> 00:06:12,960 And then it goes into smaller children that 96 00:06:12,960 --> 00:06:16,020 have some smaller information in it. 97 00:06:16,020 --> 00:06:20,520 In such a way, we have, for example, the first row 98 00:06:20,520 --> 00:06:23,340 that contains the names of the teams-- 99 00:06:23,340 --> 00:06:24,720 Team 1 and Team 2-- 100 00:06:24,720 --> 00:06:28,120 the second row that will be storing our score. 101 00:06:28,120 --> 00:06:30,420 In this case, it's set to zero. 102 00:06:30,420 --> 00:06:33,660 And the third row, it contains the button. 103 00:06:33,660 --> 00:06:37,170 That actually splits up into two components 104 00:06:37,170 --> 00:06:42,780 where we specify that the tag actually has to be a button and not just text. 105 00:06:42,780 --> 00:06:46,770 But at the same time, we can set that text 106 00:06:46,770 --> 00:06:49,740 of the button to be something else. 107 00:06:49,740 --> 00:06:51,960 In this case, it is plus 1. 108 00:06:51,960 --> 00:06:57,390 So the overall structure of the HTML code is very top to bottom. 109 00:06:57,390 --> 00:07:03,720 You can think about it as a tree that starts from document HTML 110 00:07:03,720 --> 00:07:07,150 and goes into different parts of it. 111 00:07:07,150 --> 00:07:13,530 So before we move on to actually modifying our scoreboard HTML 112 00:07:13,530 --> 00:07:19,020 and adding some things to it, do we have any questions about the structure 113 00:07:19,020 --> 00:07:20,670 of the HTML for now? 114 00:07:20,670 --> 00:07:37,060 115 00:07:37,060 --> 00:07:39,010 OK, sounds good. 116 00:07:39,010 --> 00:07:47,120 So now let's move on into the scoreboard HTML where we will add some things. 117 00:07:47,120 --> 00:07:50,830 So these are some things that I laid out for us to do. 118 00:07:50,830 --> 00:07:55,270 But there's certainly so many other tags that you can explore on the web. 119 00:07:55,270 --> 00:07:59,560 W3Schools is a great resource to look into things. 120 00:07:59,560 --> 00:08:04,820 And let's switch to the code and change some things. 121 00:08:04,820 --> 00:08:11,800 So first, I am going to introduce some bigger, overarching kind of like parent 122 00:08:11,800 --> 00:08:16,910 tags that currently are not in our HTML code. 123 00:08:16,910 --> 00:08:19,600 So one thing that we're going to add first 124 00:08:19,600 --> 00:08:22,490 is you can see we still have our head and body. 125 00:08:22,490 --> 00:08:26,410 What we're going to introduce is some other tags. 126 00:08:26,410 --> 00:08:31,780 For example, we're going to introduce a tag header, which essentially 127 00:08:31,780 --> 00:08:34,780 is going to have a title of our page. 128 00:08:34,780 --> 00:08:38,210 And I'm going to leave that blank for just a second. 129 00:08:38,210 --> 00:08:40,760 Our next big overarching tag is going to be 130 00:08:40,760 --> 00:08:45,860 main, which is going to be kind of like the main part of our HTML page 131 00:08:45,860 --> 00:08:48,510 where we're going to store our table. 132 00:08:48,510 --> 00:08:54,410 And the last part is going to be a footer, so something that you 133 00:08:54,410 --> 00:08:59,120 see on the bottom of your web page. 134 00:08:59,120 --> 00:09:05,420 Usually, I think it's small copyright tags, that, for example, David 135 00:09:05,420 --> 00:09:06,450 introduced in lecture. 136 00:09:06,450 --> 00:09:08,480 So let's start populating these things. 137 00:09:08,480 --> 00:09:12,890 First, for the header, let's do something 138 00:09:12,890 --> 00:09:19,610 like H1, which is just one of the tags for our HTML file. 139 00:09:19,610 --> 00:09:32,670 And I'm going to say something like left team versus right team. 140 00:09:32,670 --> 00:09:35,640 And I'm going to close my tag. 141 00:09:35,640 --> 00:09:39,780 And then I'm going to maybe do a paragraph 142 00:09:39,780 --> 00:09:49,780 tag that says, hey, there, click a button to change the score. 143 00:09:49,780 --> 00:09:52,450 OK, so this is our header. 144 00:09:52,450 --> 00:09:56,050 And actually you can see that I'm still running my http-server here 145 00:09:56,050 --> 00:09:56,950 in the terminal. 146 00:09:56,950 --> 00:09:59,810 And it's listening to all the changes that I'm making. 147 00:09:59,810 --> 00:10:03,850 And so if I go back to my scoreboard web page, 148 00:10:03,850 --> 00:10:06,050 you can see the changes that we made. 149 00:10:06,050 --> 00:10:10,660 Now we have our big header that we just implemented. 150 00:10:10,660 --> 00:10:15,040 And we have our paragraph, kind of like the subtext 151 00:10:15,040 --> 00:10:17,350 that's giving a little bit more information of what's 152 00:10:17,350 --> 00:10:19,570 going on the HTML page. 153 00:10:19,570 --> 00:10:24,550 Now, since we already have a main part of our web page ready, 154 00:10:24,550 --> 00:10:30,640 I'm just going to copy and paste the table inside the main. 155 00:10:30,640 --> 00:10:32,510 So nothing is really changing. 156 00:10:32,510 --> 00:10:38,290 We're just introducing some bigger, overarching tags that really 157 00:10:38,290 --> 00:10:41,350 don't change much about HTML page. 158 00:10:41,350 --> 00:10:45,460 But we use it for better readability and for better design 159 00:10:45,460 --> 00:10:48,940 so that it is very clear to another user who might open 160 00:10:48,940 --> 00:10:51,720 your code that here's what's going on. 161 00:10:51,720 --> 00:10:55,370 We have a header, the main, and the footer separating the HTML 162 00:10:55,370 --> 00:10:57,860 into these three parts so that it's easier 163 00:10:57,860 --> 00:11:01,250 to find information or change the code later on. 164 00:11:01,250 --> 00:11:09,150 And in the footer, for example, I can say something like made by CS50-- 165 00:11:09,150 --> 00:11:11,640 something simple. 166 00:11:11,640 --> 00:11:16,440 It can be made by Juliia or if Carter was here, made by Carter, 167 00:11:16,440 --> 00:11:22,560 so still using the same paragraph tag that we've seen before. 168 00:11:22,560 --> 00:11:25,780 And let's just reload to make sure all the changes are here. 169 00:11:25,780 --> 00:11:32,100 And yes, you can see that we have the title, the subtext, 170 00:11:32,100 --> 00:11:37,650 and the footer present on the web page right now. 171 00:11:37,650 --> 00:11:47,620 Before we move on to other things, do we have any questions about HTML tags-- 172 00:11:47,620 --> 00:11:51,250 introducing different tags and modifying the code? 173 00:11:51,250 --> 00:11:54,410 There are certainly so many other things that you can do. 174 00:11:54,410 --> 00:11:57,760 And there are so many other tags that you can explore. 175 00:11:57,760 --> 00:12:01,330 One of the questions is, does footer make text smaller? 176 00:12:01,330 --> 00:12:02,800 Not necessarily. 177 00:12:02,800 --> 00:12:06,430 For example, I can remove the footer from here. 178 00:12:06,430 --> 00:12:10,430 And I will just keep my paragraph tag. 179 00:12:10,430 --> 00:12:12,310 And let's reload to see. 180 00:12:12,310 --> 00:12:16,960 It's still the same, right, because HTML structure goes top to bottom. 181 00:12:16,960 --> 00:12:22,780 And it really is only outputting on the web page itself-- 182 00:12:22,780 --> 00:12:25,060 the tags that I'm putting in. 183 00:12:25,060 --> 00:12:29,740 And footer main and the same way header is kind of just 184 00:12:29,740 --> 00:12:32,920 like breaking it down in the code so that it 185 00:12:32,920 --> 00:12:37,570 is easier for readability for the user who might open your code later on 186 00:12:37,570 --> 00:12:38,530 to make some changes. 187 00:12:38,530 --> 00:12:40,340 But that's a great question. 188 00:12:40,340 --> 00:12:43,540 I'm just going to revert to back to what we had. 189 00:12:43,540 --> 00:12:47,870 Is it normal for tables to be centered by default? 190 00:12:47,870 --> 00:12:49,970 Let's check. 191 00:12:49,970 --> 00:12:54,860 Actually, we've already modified the table style 192 00:12:54,860 --> 00:12:59,250 to be centered, which we'll get into just in a few moments. 193 00:12:59,250 --> 00:13:00,890 But that's a very great question. 194 00:13:00,890 --> 00:13:02,660 Yes. 195 00:13:02,660 --> 00:13:05,120 I think by default, everything is left centered. 196 00:13:05,120 --> 00:13:09,330 So you definitely need to go in and make the changes yourself. 197 00:13:09,330 --> 00:13:11,865 What other questions do we have before we move on? 198 00:13:11,865 --> 00:13:21,200 199 00:13:21,200 --> 00:13:26,450 OK, let's go back to our slides. 200 00:13:26,450 --> 00:13:32,630 And what we're going to talk about now is CSS. 201 00:13:32,630 --> 00:13:36,710 Does anyone know what CSS is, what it does, 202 00:13:36,710 --> 00:13:39,770 how does it make our web page a little bit better? 203 00:13:39,770 --> 00:13:45,900 204 00:13:45,900 --> 00:13:48,320 Great, yes, it's cascading style sheets. 205 00:13:48,320 --> 00:13:52,280 So CSS is what makes the web pages pretty, right? 206 00:13:52,280 --> 00:13:55,010 We barely have any style applied right now. 207 00:13:55,010 --> 00:13:56,630 It looks very black and white. 208 00:13:56,630 --> 00:14:00,830 But CSS is what makes all the websites look so pretty. 209 00:14:00,830 --> 00:14:07,170 And with the bootstraps and all the other resources that are out there, 210 00:14:07,170 --> 00:14:11,330 you can make the web pages really interactive and really user-friendly, 211 00:14:11,330 --> 00:14:13,350 improving their user experience. 212 00:14:13,350 --> 00:14:15,110 So let's jump into it. 213 00:14:15,110 --> 00:14:18,180 How actually do we use CSS? 214 00:14:18,180 --> 00:14:22,850 So the way that the syntax works is that you will have some kind of selector. 215 00:14:22,850 --> 00:14:24,210 It can be a tag. 216 00:14:24,210 --> 00:14:25,010 It can be an ID. 217 00:14:25,010 --> 00:14:26,180 It can be a class. 218 00:14:26,180 --> 00:14:31,520 And then in the curly braces, you would specify the property and the value. 219 00:14:31,520 --> 00:14:35,750 For example, as we've already talked about, it can be the text align. 220 00:14:35,750 --> 00:14:36,980 Or it can be a font. 221 00:14:36,980 --> 00:14:39,440 It can be the size of the font or the color 222 00:14:39,440 --> 00:14:47,870 and really so many other properties that you can change on the web page 223 00:14:47,870 --> 00:14:50,930 to make it a little bit prettier. 224 00:14:50,930 --> 00:15:00,400 So for example, here, I have all of my components of the table. 225 00:15:00,400 --> 00:15:06,070 So for example, if I wanted to apply some particular property 226 00:15:06,070 --> 00:15:14,650 to our tag td, what I could do is select all of the td tags. 227 00:15:14,650 --> 00:15:16,870 I'm specifying my tag right here. 228 00:15:16,870 --> 00:15:18,280 I'm opening the curly braces. 229 00:15:18,280 --> 00:15:24,900 And I can specify some particular properties in the same-- 230 00:15:24,900 --> 00:15:28,410 yeah, so it will go in and grab all of the td tags 231 00:15:28,410 --> 00:15:30,330 that it sees in the HTML file. 232 00:15:30,330 --> 00:15:34,770 And it will apply that same property to all of them. 233 00:15:34,770 --> 00:15:37,960 In the same way, I can do something a little bit different. 234 00:15:37,960 --> 00:15:41,640 And I can just pick one element that I want to modify. 235 00:15:41,640 --> 00:15:45,870 And I can do that by assigning a tag and ID. 236 00:15:45,870 --> 00:15:50,430 So in this case, I have ID score1. 237 00:15:50,430 --> 00:15:54,360 And I can specify that for this particular element that 238 00:15:54,360 --> 00:15:59,500 has an ID score1, I want the color to be red, for example. 239 00:15:59,500 --> 00:16:05,640 And so what it will do, it will look through the whole tree of our HTML 240 00:16:05,640 --> 00:16:06,390 tags. 241 00:16:06,390 --> 00:16:07,470 It will go in. 242 00:16:07,470 --> 00:16:10,890 And it will find an element that has an ID score of 1. 243 00:16:10,890 --> 00:16:17,720 And it will apply a particular property that we picked for it to this tag. 244 00:16:17,720 --> 00:16:22,760 In a similar way, if there are, for example, multiple tags 245 00:16:22,760 --> 00:16:25,040 that I want to apply the same property to 246 00:16:25,040 --> 00:16:28,160 but they're not necessarily the same tags-- 247 00:16:28,160 --> 00:16:33,200 for example, I want to apply the same property too-- 248 00:16:33,200 --> 00:16:37,010 I don't know-- say, like, all the tr tags and all the td tags, 249 00:16:37,010 --> 00:16:40,820 I want to, for example, modify the font-- 250 00:16:40,820 --> 00:16:45,270 I could do that by assigning them a specific class. 251 00:16:45,270 --> 00:16:49,130 So in this case, the class can specify by dot team. 252 00:16:49,130 --> 00:16:51,170 And I can assign some properties. 253 00:16:51,170 --> 00:16:55,400 For example, I want the font to be bold. 254 00:16:55,400 --> 00:16:58,340 So the main difference in syntax just to recap 255 00:16:58,340 --> 00:17:02,690 is that for the tags, when you want to specify it in CSS, 256 00:17:02,690 --> 00:17:06,770 it is just the tag name for IDs. 257 00:17:06,770 --> 00:17:09,349 It's hashtag ID name. 258 00:17:09,349 --> 00:17:15,480 And for the classes, it's dot class name. 259 00:17:15,480 --> 00:17:21,270 So moving on, let's go back to our scoreboard dot HTML. 260 00:17:21,270 --> 00:17:27,450 And let's look at some of the style that we've already modified. 261 00:17:27,450 --> 00:17:32,070 And before we jump into changing some things, what questions do 262 00:17:32,070 --> 00:17:40,470 we have about the syntax of CSS, how we can apply that to our HTML, 263 00:17:40,470 --> 00:17:42,890 or anything along those lines? 264 00:17:42,890 --> 00:17:55,030 265 00:17:55,030 --> 00:17:58,400 OK, let's get going then. 266 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. 267 00:18:04,060 --> 00:18:08,330 Before I do that, let's just go over what we already have here. 268 00:18:08,330 --> 00:18:12,070 So as you can see, we've already applied some stylistic changes 269 00:18:12,070 --> 00:18:13,610 to the tag table. 270 00:18:13,610 --> 00:18:18,370 So it means that it will apply to the entire table that we have. 271 00:18:18,370 --> 00:18:20,360 So we changed the border. 272 00:18:20,360 --> 00:18:22,240 And then we changed the margins a little bit. 273 00:18:22,240 --> 00:18:24,520 And we aligned it to be centered. 274 00:18:24,520 --> 00:18:30,400 And then we set a specific stylistic change 275 00:18:30,400 --> 00:18:34,990 to an element td, which makes the border a little bit bigger. 276 00:18:34,990 --> 00:18:38,500 But how about modifying other elements? 277 00:18:38,500 --> 00:18:45,370 Well, let's say that I want my header and my subtext 278 00:18:45,370 --> 00:18:49,520 and my footer to be aligned in the center. 279 00:18:49,520 --> 00:18:51,730 Well, how can I do that? 280 00:18:51,730 --> 00:18:56,140 My header and the other two components are different tags. 281 00:18:56,140 --> 00:18:59,560 Let me just start with the subtext and the footer. 282 00:18:59,560 --> 00:19:06,100 And if we go back, we can see that the subtext has tag p. 283 00:19:06,100 --> 00:19:09,160 And my footer also has tag p. 284 00:19:09,160 --> 00:19:15,220 So what I could do is go back to my style tag. 285 00:19:15,220 --> 00:19:18,910 And in here, I'm going to say for tag p, what 286 00:19:18,910 --> 00:19:24,560 I want to do is align it in the center. 287 00:19:24,560 --> 00:19:30,130 So I'm going to do text-align center semicolon. 288 00:19:30,130 --> 00:19:30,790 Save it. 289 00:19:30,790 --> 00:19:31,840 Reload the page. 290 00:19:31,840 --> 00:19:36,940 And boom, our subtext and our footer now is 291 00:19:36,940 --> 00:19:43,270 centered in the middle, which makes it a little easier to read. 292 00:19:43,270 --> 00:19:46,850 And everything is now in one place. 293 00:19:46,850 --> 00:19:56,800 So let's go back to our code and say I want to now modify 294 00:19:56,800 --> 00:20:02,040 the background color for my team names. 295 00:20:02,040 --> 00:20:03,630 It seems a little black and white. 296 00:20:03,630 --> 00:20:05,070 So I want to change it. 297 00:20:05,070 --> 00:20:10,980 Well, what can I do is if I apply it to tag td, 298 00:20:10,980 --> 00:20:14,010 it means that everything's going to change the color. 299 00:20:14,010 --> 00:20:17,620 But it's two elements, so ID doesn't really make sense. 300 00:20:17,620 --> 00:20:21,520 So what can I do in this case is assign it a class. 301 00:20:21,520 --> 00:20:24,910 So for example, I'm going to call it class team. 302 00:20:24,910 --> 00:20:28,510 Don't forget about the dot operator that we want to use in this case. 303 00:20:28,510 --> 00:20:33,480 I'm going to change the background color to be crimson. 304 00:20:33,480 --> 00:20:37,900 And I looked up the hex value for that. 305 00:20:37,900 --> 00:20:40,830 So this will make the background color crimson. 306 00:20:40,830 --> 00:20:41,940 I go in. 307 00:20:41,940 --> 00:20:43,410 I reload. 308 00:20:43,410 --> 00:20:45,150 It didn't change. 309 00:20:45,150 --> 00:20:48,111 What happened? 310 00:20:48,111 --> 00:20:51,730 What did we miss? 311 00:20:51,730 --> 00:20:52,420 I went in. 312 00:20:52,420 --> 00:20:53,530 And I did the style. 313 00:20:53,530 --> 00:20:55,420 I changed the color. 314 00:20:55,420 --> 00:20:56,935 But what am I missing here? 315 00:20:56,935 --> 00:21:04,120 316 00:21:04,120 --> 00:21:04,620 Right. 317 00:21:04,620 --> 00:21:08,130 I didn't specify that my class is now a team. 318 00:21:08,130 --> 00:21:08,940 Great catch. 319 00:21:08,940 --> 00:21:12,840 So what I'm going to do is I'm going to go into my element. 320 00:21:12,840 --> 00:21:14,640 And I'm going to say that I actually want 321 00:21:14,640 --> 00:21:21,810 to assign a class team here and then class team right here as well. 322 00:21:21,810 --> 00:21:23,130 Save it. 323 00:21:23,130 --> 00:21:24,030 Reload. 324 00:21:24,030 --> 00:21:33,680 And boom, now my background color is different but just for those two cells, 325 00:21:33,680 --> 00:21:35,900 not for any other row. 326 00:21:35,900 --> 00:21:39,110 327 00:21:39,110 --> 00:21:45,350 OK, so now what I want to do is maybe I want 328 00:21:45,350 --> 00:21:49,940 to have my buttons be different colors but not the background color, 329 00:21:49,940 --> 00:21:53,660 just the text so that I can distinguish it. 330 00:21:53,660 --> 00:21:57,140 And I can already see that they have IDs assigned 331 00:21:57,140 --> 00:21:59,600 to them, which is very useful to me because now I 332 00:21:59,600 --> 00:22:02,960 can just go to our style part. 333 00:22:02,960 --> 00:22:07,010 And all I need to do is specify the ID. 334 00:22:07,010 --> 00:22:09,660 I want to change just the text color. 335 00:22:09,660 --> 00:22:12,410 So for that, the property's going to be color. 336 00:22:12,410 --> 00:22:17,660 And I'm going to make team one crimson. 337 00:22:17,660 --> 00:22:26,015 And then for ID 2, I am going to make it blue. 338 00:22:26,015 --> 00:22:31,440 339 00:22:31,440 --> 00:22:33,630 OK, great. 340 00:22:33,630 --> 00:22:35,730 I think this is supposed to be zero. 341 00:22:35,730 --> 00:22:38,400 OK, I already have my ID specified. 342 00:22:38,400 --> 00:22:41,400 So there are no changes to be made. 343 00:22:41,400 --> 00:22:45,270 Right here I already have add1 and add2. 344 00:22:45,270 --> 00:22:48,870 So if I reload the page, oh-- 345 00:22:48,870 --> 00:22:52,050 346 00:22:52,050 --> 00:22:53,220 did I miss something? 347 00:22:53,220 --> 00:22:57,650 348 00:22:57,650 --> 00:22:58,310 Nice catch. 349 00:22:58,310 --> 00:23:01,160 [LAUGHS] Wrong spelling. 350 00:23:01,160 --> 00:23:02,180 Let's reload. 351 00:23:02,180 --> 00:23:09,320 352 00:23:09,320 --> 00:23:09,820 Hm. 353 00:23:09,820 --> 00:23:13,610 354 00:23:13,610 --> 00:23:16,290 Let's try something different. 355 00:23:16,290 --> 00:23:20,120 I tested it with score1 and score2. 356 00:23:20,120 --> 00:23:24,530 So let's see if that might work. 357 00:23:24,530 --> 00:23:27,480 A-ha, OK, this worked. 358 00:23:27,480 --> 00:23:32,240 So now we have 0 and 0 in crimson and in blue. 359 00:23:32,240 --> 00:23:36,613 I wonder why it didn't quite work out for the buttons. 360 00:23:36,613 --> 00:23:38,280 This is something for me to debug later. 361 00:23:38,280 --> 00:23:42,470 But as you can see, you can also change the font 362 00:23:42,470 --> 00:23:47,540 of the color for different IDs. 363 00:23:47,540 --> 00:23:56,800 Before we move on, do we have any questions about this? 364 00:23:56,800 --> 00:23:59,320 Oh, thank you so much for catching that-- 365 00:23:59,320 --> 00:24:00,970 add1 and id1. 366 00:24:00,970 --> 00:24:05,530 OK, let's maybe make these changes as well so 367 00:24:05,530 --> 00:24:09,930 that it can reflect on the rest of the web page. 368 00:24:09,930 --> 00:24:16,560 369 00:24:16,560 --> 00:24:19,230 I'm going to copy this. 370 00:24:19,230 --> 00:24:21,270 OK, yay. 371 00:24:21,270 --> 00:24:24,660 Boom, it works for the button as well. 372 00:24:24,660 --> 00:24:27,190 Thank you for catching it. 373 00:24:27,190 --> 00:24:33,990 Any questions that we have about CSS applying properties, changing 374 00:24:33,990 --> 00:24:35,350 the values? 375 00:24:35,350 --> 00:24:37,680 There are a lot of the things that you can do with it. 376 00:24:37,680 --> 00:24:39,810 And there's certainly resources like Bootstrap 377 00:24:39,810 --> 00:24:43,260 that already have all these stylistic changes premade for you 378 00:24:43,260 --> 00:24:46,950 that you can kind of just import into your own code. 379 00:24:46,950 --> 00:24:52,380 But there is a question about how to change a button color. 380 00:24:52,380 --> 00:24:59,070 So here, we've already changed the color of the text. 381 00:24:59,070 --> 00:25:02,850 To change the button color, you can do something very similar-- 382 00:25:02,850 --> 00:25:07,020 for example, change the background color. 383 00:25:07,020 --> 00:25:12,000 And since it has the button tag to it, I believe 384 00:25:12,000 --> 00:25:19,510 you can just specify button tag on top of your code in the style part. 385 00:25:19,510 --> 00:25:22,900 And it should apply the changes to all of the buttons. 386 00:25:22,900 --> 00:25:28,960 387 00:25:28,960 --> 00:25:29,980 We have a question. 388 00:25:29,980 --> 00:25:33,550 How did you use CSS in an HTML file? 389 00:25:33,550 --> 00:25:35,470 So there are two ways to go about it. 390 00:25:35,470 --> 00:25:38,620 And we will talk about the second way a little bit later. 391 00:25:38,620 --> 00:25:43,260 But for now, what I'm doing is that in my head that contains title. 392 00:25:43,260 --> 00:25:51,360 I also have my tag style that essentially incorporates all the CSS 393 00:25:51,360 --> 00:25:53,700 changes that I am making. 394 00:25:53,700 --> 00:26:00,330 But we will talk about other alternative way of storing CSS properties later on. 395 00:26:00,330 --> 00:26:05,130 396 00:26:05,130 --> 00:26:14,580 OK, so let's go back to our slides for now. 397 00:26:14,580 --> 00:26:16,680 The next topic we're going to be talking about 398 00:26:16,680 --> 00:26:21,600 is JavaScript, which makes our web pages a little bit more interactive. 399 00:26:21,600 --> 00:26:25,170 Right now, you can see that all I'm really doing 400 00:26:25,170 --> 00:26:26,490 is I'm clicking the button. 401 00:26:26,490 --> 00:26:29,610 And it's changing the score, what is already JavaScript. 402 00:26:29,610 --> 00:26:33,210 But there are actually so many other things that you can do. 403 00:26:33,210 --> 00:26:36,280 And actually, every time you see a change 404 00:26:36,280 --> 00:26:38,280 on the web page, that doesn't necessarily, like, 405 00:26:38,280 --> 00:26:41,130 refresh the page for you and bring you to the next one over. 406 00:26:41,130 --> 00:26:43,170 That's where JavaScript is working. 407 00:26:43,170 --> 00:26:45,540 It's, like, modifying some things on the web page 408 00:26:45,540 --> 00:26:49,290 for you immediately to see without necessarily sending it back 409 00:26:49,290 --> 00:26:51,750 as a request to the server. 410 00:26:51,750 --> 00:26:55,320 So what's going on underneath the hood? 411 00:26:55,320 --> 00:26:58,410 Let's go back to our code and see what changes 412 00:26:58,410 --> 00:27:01,470 we've already made in our JavaScript. 413 00:27:01,470 --> 00:27:07,250 So as you can see on the bottom of my body tag, 414 00:27:07,250 --> 00:27:11,920 so still in the body not outside, I have a separate part 415 00:27:11,920 --> 00:27:15,580 that is surrounded by script tag. 416 00:27:15,580 --> 00:27:18,250 This is where all of my JavaScript is happening. 417 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. 418 00:27:28,120 --> 00:27:32,300 And once it's clicked, I'm going to apply some things. 419 00:27:32,300 --> 00:27:35,980 And the same thing is going on with add2, 420 00:27:35,980 --> 00:27:42,040 which are essentially our tags right here, the buttons. 421 00:27:42,040 --> 00:27:48,400 So JavaScript code is looking for ID add1, ID add2. 422 00:27:48,400 --> 00:27:52,360 Once it's clicked, it's doing the function 423 00:27:52,360 --> 00:27:57,880 of adding one point to the existing score of Team 1 and Team 2. 424 00:27:57,880 --> 00:28:04,420 And then it goes on to find ID score1. 425 00:28:04,420 --> 00:28:10,630 It goes into the inner HTML, which essentially is the text 426 00:28:10,630 --> 00:28:12,610 that you see, the text you specified. 427 00:28:12,610 --> 00:28:14,540 And it's updating the score. 428 00:28:14,540 --> 00:28:18,430 So if we go back right here, what I'm doing 429 00:28:18,430 --> 00:28:24,840 is once I click button plus one that has ID add1, 430 00:28:24,840 --> 00:28:30,510 JavaScript now records the new score and updates the text 431 00:28:30,510 --> 00:28:35,580 that we are storing right here under the tag score1. 432 00:28:35,580 --> 00:28:41,310 And the same thing is happening for Team 2, where as many times as I click, 433 00:28:41,310 --> 00:28:45,600 the score is now changing. 434 00:28:45,600 --> 00:28:51,960 So now that we kind of parsed what's going on in our code, 435 00:28:51,960 --> 00:28:57,970 let's go back and see how actually all of these changes are happening. 436 00:28:57,970 --> 00:29:01,860 So for example, we have a statement-- document 437 00:29:01,860 --> 00:29:06,720 dot query selector, parentheses, quotes, hashtag add1. 438 00:29:06,720 --> 00:29:10,120 So add1 is an ID, as we already talked about. 439 00:29:10,120 --> 00:29:14,460 So what JavaScript actually does, it searches 440 00:29:14,460 --> 00:29:19,650 for the entire tree top to bottom looking for that particular ID. 441 00:29:19,650 --> 00:29:24,180 So as we've seen this structure before, it first goes into the document 442 00:29:24,180 --> 00:29:26,310 and then goes into the HTML. 443 00:29:26,310 --> 00:29:31,050 Then it goes into the body, down to the table. 444 00:29:31,050 --> 00:29:34,500 And then we have our table structure. 445 00:29:34,500 --> 00:29:38,040 And it keeps going down, down, down until it 446 00:29:38,040 --> 00:29:42,180 finds the ID that we're looking for. 447 00:29:42,180 --> 00:29:46,690 In this case, ID is add1, which is a button. 448 00:29:46,690 --> 00:29:49,990 And so it had found it. 449 00:29:49,990 --> 00:29:54,670 In the same way, when we have onclick, what it does 450 00:29:54,670 --> 00:29:58,930 is that it looks for the ID 1-- 451 00:29:58,930 --> 00:30:05,630 sorry-- for the add1 ID once we clicked that particular tag. 452 00:30:05,630 --> 00:30:08,306 Another statement that we just saw is document 453 00:30:08,306 --> 00:30:15,170 dot query selector, hashtag score1 and dot, innerHTML. 454 00:30:15,170 --> 00:30:21,560 So what innerHTML now stands for is really the text that we've 455 00:30:21,560 --> 00:30:24,500 specified in our HTML file previously. 456 00:30:24,500 --> 00:30:27,620 And in the same way, the whole code is going 457 00:30:27,620 --> 00:30:32,960 to search the entire tree looking for that particular ID, score1 458 00:30:32,960 --> 00:30:39,920 and going then into the innerHTML or the text of that tag 459 00:30:39,920 --> 00:30:47,420 to do the necessary changes, so a very top to bottom approach. 460 00:30:47,420 --> 00:30:50,510 It has a lot of things to look for. 461 00:30:50,510 --> 00:30:58,800 But that's what's going on underneath the hood for JavaScript. 462 00:30:58,800 --> 00:31:04,350 What questions do we have before we jump back into our code 463 00:31:04,350 --> 00:31:08,505 and add on some other JavaScript features? 464 00:31:08,505 --> 00:31:19,050 465 00:31:19,050 --> 00:31:23,280 And again, kind of just to mention is that we're touching 466 00:31:23,280 --> 00:31:26,070 on just a few basic things today. 467 00:31:26,070 --> 00:31:30,310 And David covered some more extensive examples in the lecture. 468 00:31:30,310 --> 00:31:33,810 But there's certainly so many other things you can do with JavaScript. 469 00:31:33,810 --> 00:31:37,590 And definitely everything that you see on the web page utilizes-- 470 00:31:37,590 --> 00:31:41,250 all the web pages regularly utilizes all of these languages 471 00:31:41,250 --> 00:31:43,830 to make the user experience much better. 472 00:31:43,830 --> 00:31:48,020 473 00:31:48,020 --> 00:31:54,280 So Python is compatible with CSS and HTML. 474 00:31:54,280 --> 00:31:56,660 It just, it works a little bit differently. 475 00:31:56,660 --> 00:32:01,960 So for example, JavaScript can be embedded directly into the HTML file 476 00:32:01,960 --> 00:32:08,980 while with Python, it will have to be through some different kind of, like, 477 00:32:08,980 --> 00:32:09,940 framework. 478 00:32:09,940 --> 00:32:13,450 It's something that we'll see next week when we're working with Flask 479 00:32:13,450 --> 00:32:16,360 and we're implementing more extensive website 480 00:32:16,360 --> 00:32:21,410 where we have actually the interaction between the server 481 00:32:21,410 --> 00:32:22,930 and the web page going on. 482 00:32:22,930 --> 00:32:26,650 In that case, we're using kind of, like, Python 483 00:32:26,650 --> 00:32:30,970 on the back end where we're managing the server requests, while JavaScript, 484 00:32:30,970 --> 00:32:34,630 HTML, and CSS are all working on the front end, 485 00:32:34,630 --> 00:32:40,030 really making the changes to the web page and to the visual things 486 00:32:40,030 --> 00:32:43,150 that folks see on the screen. 487 00:32:43,150 --> 00:32:46,060 That's a great question. 488 00:32:46,060 --> 00:32:49,960 All righty, so moving on, what we're going to do 489 00:32:49,960 --> 00:32:53,830 is we're going to go into scoreboard dot HTML. 490 00:32:53,830 --> 00:33:00,220 And we're going to alert the user when a certain team won the game. 491 00:33:00,220 --> 00:33:04,030 So I'm going to go back into my code. 492 00:33:04,030 --> 00:33:08,020 I already have some code pre-written here as we already talked about. 493 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 494 00:33:14,710 --> 00:33:18,320 see other visual changes on the screen. 495 00:33:18,320 --> 00:33:26,930 So for example, I decided that my team would win if it has 5 points. 496 00:33:26,930 --> 00:33:28,520 That seems somewhat fair. 497 00:33:28,520 --> 00:33:31,720 [CHUCKLES] It seems enough of points to get to be considered a winner. 498 00:33:31,720 --> 00:33:36,740 So what I'm going to do is make some conditions. 499 00:33:36,740 --> 00:33:40,740 I'm already tracking my score using Team 1 and Team 2 variables. 500 00:33:40,740 --> 00:33:42,530 So I already took care of that. 501 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, 502 00:33:48,770 --> 00:34:02,770 is equal to 5, I am going to set an alert saying Team 1 won. 503 00:34:02,770 --> 00:34:07,030 Then I save the changes, reload the page. 504 00:34:07,030 --> 00:34:11,259 Click, click, click, click, click, boom, you can see I'm going-- 505 00:34:11,259 --> 00:34:12,650 I can't zoom in more. 506 00:34:12,650 --> 00:34:15,100 But you can see that on the top, I now have 507 00:34:15,100 --> 00:34:19,570 an alert window that says Team 1 won. 508 00:34:19,570 --> 00:34:26,530 Now, if I do it for the Team 2, nothing is happening, although I'm definitely 509 00:34:26,530 --> 00:34:28,639 reaching a lot of points. 510 00:34:28,639 --> 00:34:32,630 So let's just go back and make the necessary changes here. 511 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-- 512 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. 513 00:34:50,529 --> 00:34:55,159 514 00:34:55,159 --> 00:35:01,340 And now if I go back and I reload, Team 1 won. 515 00:35:01,340 --> 00:35:02,300 I got an alert. 516 00:35:02,300 --> 00:35:05,920 And Team 2 won. 517 00:35:05,920 --> 00:35:07,620 I get an alert. 518 00:35:07,620 --> 00:35:17,020 And it's actually interesting to see that the alert happens when I click. 519 00:35:17,020 --> 00:35:18,370 And the score is technically 5. 520 00:35:18,370 --> 00:35:23,485 But alert appears before the HTML actually changes it to a score of 5. 521 00:35:23,485 --> 00:35:29,360 522 00:35:29,360 --> 00:35:30,950 I have a question in the chat. 523 00:35:30,950 --> 00:35:36,930 Could you not use the kind of [? CLion ?] line operator for the or? 524 00:35:36,930 --> 00:35:43,290 So because it is separated in our JavaScript code by IDs-- 525 00:35:43,290 --> 00:35:46,050 we're looking at one element at the time-- 526 00:35:46,050 --> 00:35:48,710 527 00:35:48,710 --> 00:35:52,760 I could not do the or operator to minimize 528 00:35:52,760 --> 00:35:56,180 the code because in this JavaScript setup, 529 00:35:56,180 --> 00:36:00,240 it is looking at one particular element at a time. 530 00:36:00,240 --> 00:36:05,890 So it listens for the onclick for the tag add1 531 00:36:05,890 --> 00:36:09,280 and then makes all the necessary changes within kind of that branch. 532 00:36:09,280 --> 00:36:13,990 So there are definitely ways to optimize. 533 00:36:13,990 --> 00:36:16,660 I'm sure you can click more than 5 because we didn't really 534 00:36:16,660 --> 00:36:18,190 set any restrictions. 535 00:36:18,190 --> 00:36:22,090 We kind of just said, like, once it's 5, Team 1, 536 00:36:22,090 --> 00:36:25,120 but we can certainly keep going. 537 00:36:25,120 --> 00:36:31,570 And before we move on, I want to show you one more feature. 538 00:36:31,570 --> 00:36:35,290 Do we have any questions about this part? 539 00:36:35,290 --> 00:36:39,260 The syntax is certainly somewhat similar to what we saw. 540 00:36:39,260 --> 00:36:44,440 For example, we have same way of kind of setting the variables. 541 00:36:44,440 --> 00:36:47,530 Semicolons are back, unfortunately. 542 00:36:47,530 --> 00:36:50,470 But for example, we don't need to specify 543 00:36:50,470 --> 00:36:55,090 a data type or some of those things. 544 00:36:55,090 --> 00:37:01,100 545 00:37:01,100 --> 00:37:02,480 So we have a question. 546 00:37:02,480 --> 00:37:05,980 Is it better to select an HTML element with query selector 547 00:37:05,980 --> 00:37:10,990 instead of get element by ID? 548 00:37:10,990 --> 00:37:14,810 I'm pretty sure both are interchangeable. 549 00:37:14,810 --> 00:37:17,320 It just depends on what syntax you're using. 550 00:37:17,320 --> 00:37:22,630 Query selector would allow you to use it on the IDs, on the classes, 551 00:37:22,630 --> 00:37:27,718 and on tags, versus get element by ID is just with those specific-- 552 00:37:27,718 --> 00:37:32,485 like for a specific ID, so depending on how you want to set up your code. 553 00:37:32,485 --> 00:37:36,040 554 00:37:36,040 --> 00:37:42,250 OK, so what I'm going to do here now is I'm still 555 00:37:42,250 --> 00:37:46,130 going to announce the winner, just a little bit differently. 556 00:37:46,130 --> 00:37:48,170 So I'm just going to [INAUDIBLE] this out. 557 00:37:48,170 --> 00:37:56,650 What I'm instead going to do is create a paragraph tag up here. 558 00:37:56,650 --> 00:38:00,800 But I'm actually not specifying anything. 559 00:38:00,800 --> 00:38:03,790 I'm just giving it an ID. 560 00:38:03,790 --> 00:38:13,520 I'm going to give it an ID result, so result. Great. 561 00:38:13,520 --> 00:38:16,820 So if I go back in here, there's nothing, right? 562 00:38:16,820 --> 00:38:19,370 I specified a paragraph tag. 563 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 564 00:38:23,570 --> 00:38:24,620 right now. 565 00:38:24,620 --> 00:38:29,810 What I'm going to do instead is instead of creating 566 00:38:29,810 --> 00:38:32,660 an alert that's kind of like a browser thing, 567 00:38:32,660 --> 00:38:36,920 I'm going to modify something within our HTML page. 568 00:38:36,920 --> 00:38:41,240 I'm going to do document query selector. 569 00:38:41,240 --> 00:38:50,390 And I'm going to grab my ID result. And I'm 570 00:38:50,390 --> 00:38:53,910 going to change an innerHTML for that. 571 00:38:53,910 --> 00:38:59,030 So it's a very similar structure to what we're doing up here. 572 00:38:59,030 --> 00:39:03,380 We're grabbing, for example, score of 1 and changing the innerHTML 573 00:39:03,380 --> 00:39:05,180 to a specific number. 574 00:39:05,180 --> 00:39:07,340 I'm going to do exact same thing here. 575 00:39:07,340 --> 00:39:12,000 But I'm just going to put in text instead of numbers. 576 00:39:12,000 --> 00:39:17,670 And now if we go back, reload, we still see nothing. 577 00:39:17,670 --> 00:39:18,540 The tag is there. 578 00:39:18,540 --> 00:39:19,710 But text isn't. 579 00:39:19,710 --> 00:39:23,100 But once I click-- 580 00:39:23,100 --> 00:39:25,790 oops. 581 00:39:25,790 --> 00:39:26,810 What's going on? 582 00:39:26,810 --> 00:39:35,630 583 00:39:35,630 --> 00:39:39,065 Let me see where I might have messed up. 584 00:39:39,065 --> 00:39:45,040 585 00:39:45,040 --> 00:39:45,540 Hm. 586 00:39:45,540 --> 00:39:55,830 587 00:39:55,830 --> 00:39:59,390 And I didn't change anything here. 588 00:39:59,390 --> 00:40:00,710 That is very true. 589 00:40:00,710 --> 00:40:04,613 You're not doing it right if you don't get bugs once in a while. 590 00:40:04,613 --> 00:40:07,970 591 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. 592 00:40:16,770 --> 00:40:20,940 OK, so there's definitely something with my if statement that wasn't working. 593 00:40:20,940 --> 00:40:26,970 So let's just maybe delete this part. 594 00:40:26,970 --> 00:40:29,010 And let's check our syntax-- 595 00:40:29,010 --> 00:40:31,470 document dot query selector. 596 00:40:31,470 --> 00:40:34,500 A-ah, a dot-- that's why it wasn't working. 597 00:40:34,500 --> 00:40:37,830 OK, so let's go back. 598 00:40:37,830 --> 00:40:40,150 I can now make the changes. 599 00:40:40,150 --> 00:40:44,010 So we click 2, 3, 4, 5. 600 00:40:44,010 --> 00:40:52,290 And now I see my innerHTML changed to Team 1 won in the paragraph tag 601 00:40:52,290 --> 00:40:54,900 that I specified earlier but that was empty. 602 00:40:54,900 --> 00:41:00,360 I can now go in and do exact same thing for Team 2. 603 00:41:00,360 --> 00:41:04,980 I'm just going to change it to Team 2 won. 604 00:41:04,980 --> 00:41:10,830 And now if we go back and refresh, Team 2 won. 605 00:41:10,830 --> 00:41:13,950 So these are some of the things that you can do. 606 00:41:13,950 --> 00:41:18,700 As you can see, I didn't necessarily specify any text in the beginning. 607 00:41:18,700 --> 00:41:20,850 I just put in a plain tag. 608 00:41:20,850 --> 00:41:24,450 But you can go in later on using JavaScript 609 00:41:24,450 --> 00:41:29,700 to make the necessary changes to update your innerHTML 610 00:41:29,700 --> 00:41:32,580 or even change the color. 611 00:41:32,580 --> 00:41:35,470 612 00:41:35,470 --> 00:41:39,600 I'm going to Zoom out a little bit so that it's fully visible. 613 00:41:39,600 --> 00:41:47,970 But what questions do we have about, at this point, HTML, CSS, JavaScript-- 614 00:41:47,970 --> 00:41:50,985 kind of all of that we've talked about today? 615 00:41:50,985 --> 00:41:54,550 616 00:41:54,550 --> 00:41:59,680 These are certainly just small bits and pieces that I'm showing today. 617 00:41:59,680 --> 00:42:03,295 But it definitely has a lot of potential for a lot more things. 618 00:42:03,295 --> 00:42:06,670 619 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 620 00:42:11,345 --> 00:42:12,220 appear on the screen? 621 00:42:12,220 --> 00:42:13,780 Or will the first one get priority? 622 00:42:13,780 --> 00:42:14,985 That is a great question. 623 00:42:14,985 --> 00:42:16,610 And we can test it out. 624 00:42:16,610 --> 00:42:20,530 So for example, if I go evenly, right-- 625 00:42:20,530 --> 00:42:22,810 I'm updating it one after another-- 626 00:42:22,810 --> 00:42:23,920 I reach 4. 627 00:42:23,920 --> 00:42:29,860 So if I add a score to Team 1, we'll see Team 1 won. 628 00:42:29,860 --> 00:42:33,820 But now if I add the score to Team 2, it changes 629 00:42:33,820 --> 00:42:37,660 to Team 2 won because that's the sequence that it happened in. 630 00:42:37,660 --> 00:42:40,300 And then you can actually see that it doesn't disappear. 631 00:42:40,300 --> 00:42:44,330 Once you keep clicking the buttons, it's kind of, like, static. 632 00:42:44,330 --> 00:42:46,450 It doesn't really go anywhere at this point. 633 00:42:46,450 --> 00:42:51,340 There's certainly changes that you can make where you kind of, like, restrict. 634 00:42:51,340 --> 00:42:54,790 You don't allow a user to click more buttons 635 00:42:54,790 --> 00:42:56,710 after they reach the score of 5. 636 00:42:56,710 --> 00:43:01,930 Or you make the tag that we've created, Team 2 637 00:43:01,930 --> 00:43:07,220 won, disappear after a few seconds after you clicked it. 638 00:43:07,220 --> 00:43:12,260 There are a lot of components to JavaScript and to HTML that 639 00:43:12,260 --> 00:43:14,860 can make all of these things possible. 640 00:43:14,860 --> 00:43:18,980 And we're certainly just, like, scratching the surface of these three 641 00:43:18,980 --> 00:43:22,445 languages today but introducing some of the most common features. 642 00:43:22,445 --> 00:43:26,230 643 00:43:26,230 --> 00:43:28,660 All righty, if we don't have any questions, 644 00:43:28,660 --> 00:43:32,390 there's just one last thing that I wanted to show you. 645 00:43:32,390 --> 00:43:36,970 So we've made a lot of changes to our HTML file. 646 00:43:36,970 --> 00:43:44,650 We started by modifying our HTML body, adding some new tags, 647 00:43:44,650 --> 00:43:48,040 as well as introducing some overarching tags that 648 00:43:48,040 --> 00:43:50,720 help us break out the code better. 649 00:43:50,720 --> 00:43:57,010 We've made some changes to the JavaScript to make it more interactive 650 00:43:57,010 --> 00:43:59,950 so that the web page is a little bit more dynamic. 651 00:43:59,950 --> 00:44:05,590 And we certainly made a lot of changes to our style tag. 652 00:44:05,590 --> 00:44:09,490 And as you can see, it is getting very long. 653 00:44:09,490 --> 00:44:15,260 We have 1, 2, 3, 4, 5, 6, 7, 8 different changes. 654 00:44:15,260 --> 00:44:22,010 So does anyone have an idea how we can make this look a little bit better? 655 00:44:22,010 --> 00:44:26,180 How can we make our current code look a little bit shorter 656 00:44:26,180 --> 00:44:27,725 in the dot HTML file? 657 00:44:27,725 --> 00:44:31,630 658 00:44:31,630 --> 00:44:33,070 That's a great idea. 659 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. 660 00:44:39,990 --> 00:44:43,340 So why don't we go and do that. 661 00:44:43,340 --> 00:44:49,690 So I am going to create a new terminal so that I 662 00:44:49,690 --> 00:44:53,200 don't stop my website from running. 663 00:44:53,200 --> 00:44:59,470 I am going to create a file called styles dot CSS. 664 00:44:59,470 --> 00:45:04,480 And I'm just going to copy over-- 665 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 666 00:45:11,290 --> 00:45:17,840 dot CSS, save it, go back to scoreboard dot title. 667 00:45:17,840 --> 00:45:22,340 Now I can get rid of these tags because I already 668 00:45:22,340 --> 00:45:24,770 moved my styles to the other place. 669 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 670 00:45:29,630 --> 00:45:31,980 and my CSS file together. 671 00:45:31,980 --> 00:45:39,760 So I'm going to create a tag link and specify 672 00:45:39,760 --> 00:45:44,470 that the relationship is stylesheet. 673 00:45:44,470 --> 00:45:52,350 And I'm going to reference file styles dot CSS. 674 00:45:52,350 --> 00:45:59,700 Close the tag, save it, save this again, go back, reload. 675 00:45:59,700 --> 00:46:02,160 And you can see that all of the changes still apply. 676 00:46:02,160 --> 00:46:08,070 So we still have the color change for the background. 677 00:46:08,070 --> 00:46:16,710 We still change the color of the fonts by moving the styles-- 678 00:46:16,710 --> 00:46:19,650 kind of like CSS properties-- out of the way. 679 00:46:19,650 --> 00:46:22,620 We also made our HTML look a little bit cleaner. 680 00:46:22,620 --> 00:46:25,980 Instead of now having rows and rows of different properties, 681 00:46:25,980 --> 00:46:31,130 we now just have our HTML tags and our HTML body. 682 00:46:31,130 --> 00:46:35,110 There's also a way to move JavaScript out of the way 683 00:46:35,110 --> 00:46:42,100 so that it doesn't make your HTML file look a little bit more complex. 684 00:46:42,100 --> 00:46:45,150 But for now, we can just keep it in here as we just 685 00:46:45,150 --> 00:46:48,420 have maybe like a dozen lines. 686 00:46:48,420 --> 00:46:54,470 And it's not really abstracting our HTML for now. 687 00:46:54,470 --> 00:46:59,540 But what questions do we have about anything 688 00:46:59,540 --> 00:47:03,410 that we've done today about changing the styles, 689 00:47:03,410 --> 00:47:09,810 linking the sheets together, creating classes, IDs, new tags? 690 00:47:09,810 --> 00:47:14,470 691 00:47:14,470 --> 00:47:15,930 So we have a question in the chat. 692 00:47:15,930 --> 00:47:18,690 Is it necessary to keep the script tag at the bottom? 693 00:47:18,690 --> 00:47:24,930 For now, yes, because we still have our JavaScript code and our HTML file. 694 00:47:24,930 --> 00:47:29,880 If we decide to move JavaScript to a different file, 695 00:47:29,880 --> 00:47:32,140 it's going to be slightly different syntax. 696 00:47:32,140 --> 00:47:34,900 Unfortunately, I don't have an example on me. 697 00:47:34,900 --> 00:47:40,155 But I'm sure this is something that you can look up very easily. 698 00:47:40,155 --> 00:47:46,680 699 00:47:46,680 --> 00:47:48,830 Do we have any other questions? 700 00:47:48,830 --> 00:47:54,730 701 00:47:54,730 --> 00:47:57,460 The question is, is this session going to be posted after it? 702 00:47:57,460 --> 00:48:04,010 And, yes, certainly we will post it on the website a little bit later. 703 00:48:04,010 --> 00:48:08,940 And you all should have access to it, yes. 704 00:48:08,940 --> 00:48:15,340 705 00:48:15,340 --> 00:48:17,330 All right, sounds good. 706 00:48:17,330 --> 00:48:20,260 Well, thank you so much for joining. 707 00:48:20,260 --> 00:48:25,720 This was Section 8 of really delving into the web development-- 708 00:48:25,720 --> 00:48:28,270 HTML, CSS, internet, things related. 709 00:48:28,270 --> 00:48:30,920 Thank you so much for joining us today. 710 00:48:30,920 --> 00:48:35,050 I hope I lived up to your expectations and I was a good for Carter. 711 00:48:35,050 --> 00:48:40,680 But I'm looking forward to seeing you all in the next sessions. 712 00:48:40,680 --> 00:48:42,000