1 00:00:02,090 --> 00:00:04,830 So for this demo website here, 2 00:00:04,830 --> 00:00:08,189 I'm in a brand new folder, an empty folder again, 3 00:00:08,189 --> 00:00:10,309 just with this gitignore file, 4 00:00:10,309 --> 00:00:13,340 which you won't have and which you don't need. 5 00:00:13,340 --> 00:00:17,870 And in this folder, I now wanna add all these files, 6 00:00:17,870 --> 00:00:21,200 all the code that we need for this website. 7 00:00:21,200 --> 00:00:23,800 And of course, as mentioned, we'll need HTML, 8 00:00:23,800 --> 00:00:27,280 CSS and JavaScript 9 00:00:27,280 --> 00:00:30,090 and JavaScript will be the focus 10 00:00:30,090 --> 00:00:33,200 and the brand new thing in this project here, 11 00:00:33,200 --> 00:00:34,850 because that's what we learned about 12 00:00:34,850 --> 00:00:37,000 in the previous course sections, 13 00:00:37,000 --> 00:00:40,700 but we will get started with HTML and CSS, 14 00:00:40,700 --> 00:00:43,930 because I wanna start with preparing the page 15 00:00:43,930 --> 00:00:47,210 and the different elements that we need on the page 16 00:00:47,210 --> 00:00:51,800 before we then add JavaScript to add interactivity 17 00:00:51,800 --> 00:00:52,930 to that page. 18 00:00:52,930 --> 00:00:55,140 I guess that makes sense. 19 00:00:55,140 --> 00:00:58,590 And therefore, I'll start by adding a brand new file, 20 00:00:58,590 --> 00:01:03,590 index.html file, which will hold our general page structure 21 00:01:04,120 --> 00:01:07,373 and content, as it always did in this course, 22 00:01:08,580 --> 00:01:13,500 I will also already add a folder, a styles folder here, 23 00:01:13,500 --> 00:01:17,180 which will hold my different CSS style files, 24 00:01:17,180 --> 00:01:21,460 because I wanna split my styles across multiple files, 25 00:01:21,460 --> 00:01:25,411 even though I only have one HTML file in that website, 26 00:01:25,411 --> 00:01:29,570 to make the individual CSS files a bit smaller 27 00:01:29,570 --> 00:01:31,680 and easier to maintain. 28 00:01:31,680 --> 00:01:33,520 Not something you have to do, 29 00:01:33,520 --> 00:01:35,780 but something which often is useful 30 00:01:35,780 --> 00:01:38,110 in bigger projects and websites 31 00:01:38,110 --> 00:01:40,740 to have an easier time going through your code 32 00:01:40,740 --> 00:01:43,950 if you ever need to make changes and so on. 33 00:01:43,950 --> 00:01:46,470 And that's why I add a separate styles folder, 34 00:01:46,470 --> 00:01:50,090 so that we can put all the CSS files in there. 35 00:01:50,090 --> 00:01:52,833 But let's get started in index.html. 36 00:01:53,670 --> 00:01:58,280 As always, we need a base HTML skeleton 37 00:01:58,280 --> 00:02:01,370 and for this, we can use this shortcut 38 00:02:01,370 --> 00:02:04,540 this built-in snippet here in Visual Studio Code 39 00:02:04,540 --> 00:02:07,240 and type an exclamation mark 40 00:02:07,240 --> 00:02:09,630 to get that auto-completion overlay 41 00:02:09,630 --> 00:02:13,983 and hit TAB to then get that base skeleton. 42 00:02:14,870 --> 00:02:18,810 And we can keep that base skeleton as it is here 43 00:02:18,810 --> 00:02:23,360 and give it a more fitting, a more suitable title 44 00:02:23,360 --> 00:02:27,040 and I'll choose a title of Tic Tac Toe here, 45 00:02:27,040 --> 00:02:29,423 because we're building a tic-tac-toe game. 46 00:02:31,170 --> 00:02:33,850 Now, I'll keep all the other elements here, 47 00:02:33,850 --> 00:02:36,080 especially all of this meta element, 48 00:02:36,080 --> 00:02:37,850 which sets the viewport, 49 00:02:37,850 --> 00:02:42,470 so that we can also build a responsive site here. 50 00:02:42,470 --> 00:02:45,990 While CSS is not the focus of this module, 51 00:02:45,990 --> 00:02:48,357 I of course do want to ensure 52 00:02:48,357 --> 00:02:51,800 that this page looks at least decent 53 00:02:51,800 --> 00:02:55,010 on different device sizes and hence, 54 00:02:55,010 --> 00:02:56,210 we should keep this metadata 55 00:02:56,210 --> 00:03:00,410 to make sure that the browser does adjust our scaling 56 00:03:00,410 --> 00:03:02,983 and set the page scaling correctly. 57 00:03:04,760 --> 00:03:06,630 Now let's focus on the body though, 58 00:03:06,630 --> 00:03:08,179 because for the moment that's it 59 00:03:08,179 --> 00:03:09,490 when it comes to the metadata, 60 00:03:09,490 --> 00:03:12,730 of course later we are going to add links 61 00:03:12,730 --> 00:03:16,130 to our CSS files and script elements 62 00:03:16,130 --> 00:03:20,350 to import and link to our JavaScript files though. 63 00:03:20,350 --> 00:03:22,670 But for the moment, let's focus on the body. 64 00:03:22,670 --> 00:03:27,360 Now, in this body, if we recall the finished page 65 00:03:27,360 --> 00:03:31,230 and what we wanna build, we have various parts 66 00:03:31,230 --> 00:03:33,610 that make up our page. 67 00:03:33,610 --> 00:03:36,260 For example, we have this main header 68 00:03:36,260 --> 00:03:38,930 which introduces us to the game 69 00:03:38,930 --> 00:03:42,680 and therefore I'll use this header HTML element here 70 00:03:42,680 --> 00:03:45,213 to wrap some header content 71 00:03:45,213 --> 00:03:47,580 that should sit at the top of the page 72 00:03:47,580 --> 00:03:51,230 and that should introduce visitors of this page 73 00:03:51,230 --> 00:03:54,490 to this page and to our game. 74 00:03:54,490 --> 00:03:58,640 And in this header, I simply wanna have my main page title, 75 00:03:58,640 --> 00:04:03,640 a h1 element therefor, where I say Play Tic, Tac, Toe, 76 00:04:06,810 --> 00:04:08,750 because that's the title of my page. 77 00:04:08,750 --> 00:04:10,060 And then below that, 78 00:04:10,060 --> 00:04:14,730 a paragraph where I wanna say built with HTML, 79 00:04:14,730 --> 00:04:18,440 CSS, JavaScript 80 00:04:18,440 --> 00:04:23,440 and of course, lots of love, because we love what we do. 81 00:04:24,100 --> 00:04:26,690 And that's then my main header. 82 00:04:26,690 --> 00:04:29,220 Of course, this has nothing to do with the game itself, 83 00:04:29,220 --> 00:04:31,290 with the core game logic, 84 00:04:31,290 --> 00:04:33,600 but it's describes our website 85 00:04:33,600 --> 00:04:36,430 and tells the user what this website is all about. 86 00:04:36,430 --> 00:04:38,493 It's a great introduction therefor. 87 00:04:40,200 --> 00:04:43,480 But the main part of our page is the game 88 00:04:43,480 --> 00:04:46,990 and the configuration area for that game 89 00:04:46,990 --> 00:04:50,340 and that's why I'll then add my main element here 90 00:04:50,340 --> 00:04:53,660 to wrap that main content. 91 00:04:53,660 --> 00:04:55,770 And here in that main content, 92 00:04:55,770 --> 00:04:59,910 I, in the end wanna have two main sections. 93 00:04:59,910 --> 00:05:02,640 And for this, we have that section element, 94 00:05:02,640 --> 00:05:04,320 which is very fitting. 95 00:05:04,320 --> 00:05:06,780 That's a great HTML element, 96 00:05:06,780 --> 00:05:11,150 which we wanna use if we wanna group different pieces 97 00:05:11,150 --> 00:05:14,960 of content and different HTML elements together, 98 00:05:14,960 --> 00:05:18,120 because they make up a part of our main content, 99 00:05:18,120 --> 00:05:19,673 a part of our website. 100 00:05:20,550 --> 00:05:23,960 And here I wanna have one section for the game configuration 101 00:05:23,960 --> 00:05:26,493 and then one section for the game itself, 102 00:05:27,450 --> 00:05:30,150 and therefore, as a little annotation, 103 00:05:30,150 --> 00:05:33,000 which we then also could use for styling, 104 00:05:33,000 --> 00:05:37,360 I'll add an ID here, the ID attribute to this section 105 00:05:37,360 --> 00:05:41,400 and give this an ID of game-configuration 106 00:05:42,290 --> 00:05:44,170 and then I'll add a second section, 107 00:05:44,170 --> 00:05:47,160 which should contain the actual game field 108 00:05:47,160 --> 00:05:49,910 and I'll name this active-game. 109 00:05:49,910 --> 00:05:52,863 So I'll give this an ID of active-game. 110 00:05:54,480 --> 00:05:58,300 And of course these IDs are not technically required, 111 00:05:58,300 --> 00:06:00,460 but we can use them for styling 112 00:06:00,460 --> 00:06:03,400 and they can also help us as a developer 113 00:06:03,400 --> 00:06:06,510 or other developers looking at that code 114 00:06:06,510 --> 00:06:08,240 with understanding that code 115 00:06:08,240 --> 00:06:10,543 and with understanding our content here. 116 00:06:12,110 --> 00:06:15,350 Now, in this game configuration section, 117 00:06:15,350 --> 00:06:20,350 I want to actually not get the player's configuration 118 00:06:21,090 --> 00:06:25,680 for this game, but just output the chosen configuration, 119 00:06:25,680 --> 00:06:27,560 because the actual configuration 120 00:06:27,560 --> 00:06:30,690 should be fetched with help of a little overly, 121 00:06:30,690 --> 00:06:31,843 which we present. 122 00:06:32,720 --> 00:06:35,780 Now, I'll add the structure and the HTML code 123 00:06:35,780 --> 00:06:37,590 for the overlay in a second, 124 00:06:37,590 --> 00:06:39,890 for the moment, let's just output the information 125 00:06:39,890 --> 00:06:41,490 that we fetched and for this, 126 00:06:41,490 --> 00:06:43,840 I'll use an ordered list 127 00:06:43,840 --> 00:06:47,990 and it's an ordered list, because I have player one and two, 128 00:06:47,990 --> 00:06:51,180 and whilst we also could use an unordered list 129 00:06:51,180 --> 00:06:53,920 and it really doesn't matter too much here, 130 00:06:53,920 --> 00:06:57,960 if we think about it, if we have a player one and two, 131 00:06:57,960 --> 00:07:01,080 then we have some kind of logical ordering 132 00:07:01,080 --> 00:07:04,420 and hence, a ordered list instead of an unordered list 133 00:07:04,420 --> 00:07:05,883 makes more sense to me. 134 00:07:06,890 --> 00:07:11,220 And we'll then have to list items, one for every player. 135 00:07:11,220 --> 00:07:14,680 And the first list item is about the first player of course 136 00:07:14,680 --> 00:07:16,940 and to describe this player, 137 00:07:16,940 --> 00:07:20,880 I'll wrap it into an article, which is not required, 138 00:07:20,880 --> 00:07:24,610 and that's true for a lot of HTML elements as you learned, 139 00:07:24,610 --> 00:07:28,310 but which is semantically a bit more correct in my opinion, 140 00:07:28,310 --> 00:07:32,420 since we can now clearly wrap a standalone piece of content 141 00:07:32,420 --> 00:07:35,810 on our page with such an article, 142 00:07:35,810 --> 00:07:38,070 because we wanna use the article element 143 00:07:38,070 --> 00:07:40,020 whenever we have some content 144 00:07:40,020 --> 00:07:43,016 that basically works standalone 145 00:07:43,016 --> 00:07:45,900 that could describe an entity. 146 00:07:45,900 --> 00:07:49,030 And here we are describing a player and hence, 147 00:07:49,030 --> 00:07:51,210 wrapping this data into such an article 148 00:07:51,210 --> 00:07:52,790 is something we can do here, 149 00:07:52,790 --> 00:07:55,420 but it would also not be horrible or wrong 150 00:07:55,420 --> 00:07:58,503 if you don't add this extra article wrapper, 151 00:07:59,410 --> 00:08:00,610 but here I will add it. 152 00:08:00,610 --> 00:08:03,860 And then in there, I'll add a h2 element 153 00:08:03,860 --> 00:08:06,630 as the main title of this article. 154 00:08:06,630 --> 00:08:09,720 So not of the overall page, that's this h1 tag, 155 00:08:09,720 --> 00:08:10,960 but of this article. 156 00:08:10,960 --> 00:08:14,200 And in here, we wanna say player one 157 00:08:15,420 --> 00:08:20,010 and then below that, output the actual player name 158 00:08:20,010 --> 00:08:22,730 and for this, I'll add a h3 free element here 159 00:08:22,730 --> 00:08:25,420 and that should be the player name. 160 00:08:25,420 --> 00:08:27,580 And for the moment, I'll just put player name 161 00:08:27,580 --> 00:08:29,140 as a placeholder here. 162 00:08:29,140 --> 00:08:31,420 Later, this will of course be populated 163 00:08:31,420 --> 00:08:34,082 with the actual data entered by the player. 164 00:08:34,990 --> 00:08:38,870 So it's always player one as a title for this article, 165 00:08:38,870 --> 00:08:42,100 so that here we have to data about the first player, 166 00:08:42,100 --> 00:08:44,480 but then part of that data is the name, 167 00:08:44,480 --> 00:08:48,810 which is wrapped in this h3 element and then below that, 168 00:08:48,810 --> 00:08:50,960 I also wanna have a paragraph 169 00:08:50,960 --> 00:08:55,850 where I just output the symbol of that player, 170 00:08:55,850 --> 00:08:57,920 and it doesn't have to be a paragraph. 171 00:08:57,920 --> 00:09:00,510 We could maybe also just use a div here 172 00:09:00,510 --> 00:09:01,860 or anything like that, 173 00:09:01,860 --> 00:09:05,070 but I'll use a paragraph and then just output the symbol, 174 00:09:05,070 --> 00:09:08,870 which for the first player is a cross, is an X. 175 00:09:08,870 --> 00:09:11,283 And for the second player, it will be a circle. 176 00:09:12,820 --> 00:09:15,370 Speaking of that, we can now copy that article 177 00:09:15,370 --> 00:09:18,030 and add that into the second list item, 178 00:09:18,030 --> 00:09:19,940 and then here we say, player two 179 00:09:20,800 --> 00:09:23,076 and still have player name as a placeholder, 180 00:09:23,076 --> 00:09:25,820 which will be replaced later, 181 00:09:25,820 --> 00:09:30,327 and then a circle, O, in this case, a capital O as a symbol 182 00:09:30,327 --> 00:09:33,790 that will be used for representing that player 183 00:09:33,790 --> 00:09:35,313 in the game field later. 184 00:09:37,900 --> 00:09:40,533 And that's now my list with all that player data 185 00:09:40,533 --> 00:09:41,860 that we have. 186 00:09:41,860 --> 00:09:43,110 Let me zoom out a bit 187 00:09:43,110 --> 00:09:45,743 to have a bit more content on the screen. 188 00:09:47,130 --> 00:09:49,670 Now, I also wanna have a button here 189 00:09:49,670 --> 00:09:51,800 that should start the game 190 00:09:52,680 --> 00:09:55,720 and I'll add a button there for a button element, 191 00:09:55,720 --> 00:10:00,520 but please note that I'm not inside of a form here, 192 00:10:00,520 --> 00:10:05,140 because this button is not about submitting a form somewhere 193 00:10:05,140 --> 00:10:07,840 and about handling some user input, 194 00:10:07,840 --> 00:10:10,990 because here we have no user input fields. 195 00:10:10,990 --> 00:10:13,000 Instead here, we just output some data 196 00:10:13,000 --> 00:10:14,940 that was entered somewhere else 197 00:10:14,940 --> 00:10:17,850 and this button should then only be there 198 00:10:17,850 --> 00:10:22,660 to start the actual game based on that entered data. 199 00:10:22,660 --> 00:10:25,630 So to confirm that data, so to say 200 00:10:25,630 --> 00:10:27,970 and then start a game and hence, 201 00:10:27,970 --> 00:10:31,900 I'll add a label of Start New Game on that button. 202 00:10:31,900 --> 00:10:35,170 So that's the text that should show up here. 203 00:10:35,170 --> 00:10:36,880 And speaking of buttons, 204 00:10:36,880 --> 00:10:40,130 I actually also wanna have a couple of other buttons, 205 00:10:40,130 --> 00:10:44,770 because the data for these players should be editable, 206 00:10:44,770 --> 00:10:47,500 you should be able to change your name. 207 00:10:47,500 --> 00:10:50,650 And therefor, I'll actually also add a button here 208 00:10:50,650 --> 00:10:54,803 in my player one article, where I just say edit, 209 00:10:55,920 --> 00:10:59,003 and I'll add the same button for the second player. 210 00:10:59,920 --> 00:11:01,570 So that we got two buttons 211 00:11:01,570 --> 00:11:03,710 for editing the different players 212 00:11:03,710 --> 00:11:06,320 and then one button for confirming the entered data 213 00:11:06,320 --> 00:11:08,360 and starting the game. 214 00:11:08,360 --> 00:11:10,990 And of course the idea behind the game, by the way, 215 00:11:10,990 --> 00:11:13,470 is that you play it together with a friend 216 00:11:13,470 --> 00:11:15,570 on one of the same machine, 217 00:11:15,570 --> 00:11:17,970 because it runs in the browser only 218 00:11:17,970 --> 00:11:21,960 and we have no multiplayer game server behind the scenes 219 00:11:21,960 --> 00:11:24,100 that would synchronize data. 220 00:11:24,100 --> 00:11:27,840 So this is a game which you play together on one PC 221 00:11:27,840 --> 00:11:30,300 on one loaded website. 222 00:11:30,300 --> 00:11:33,980 So both players added their data on that loaded website 223 00:11:33,980 --> 00:11:35,920 and then once you know that you're ready, 224 00:11:35,920 --> 00:11:38,070 you start playing that game. 225 00:11:38,070 --> 00:11:39,970 Later in the course, we will also learn 226 00:11:39,970 --> 00:11:42,240 how you can submit data to a server 227 00:11:42,240 --> 00:11:44,070 and how you can add a web server 228 00:11:44,070 --> 00:11:46,770 that serves the same page to different users, 229 00:11:46,770 --> 00:11:49,530 but here, it's two users on the same machine 230 00:11:49,530 --> 00:11:50,943 with the same website. 231 00:11:51,900 --> 00:11:54,890 And that's now the configuration area, 232 00:11:54,890 --> 00:11:57,850 but one crucial element is missing here, 233 00:11:57,850 --> 00:12:00,250 and that would be the overlay 234 00:12:00,250 --> 00:12:03,780 where you actually enter the player name. 235 00:12:03,780 --> 00:12:05,850 We have the edit buttons here 236 00:12:05,850 --> 00:12:08,400 for triggering that overlay later, 237 00:12:08,400 --> 00:12:11,700 but of course we also need the overlay itself. 238 00:12:11,700 --> 00:12:15,020 And for this there, again, as always in HTML, 239 00:12:15,020 --> 00:12:19,240 would be different ways of writing this in HTML, 240 00:12:19,240 --> 00:12:21,070 but since that overlay in the end belongs 241 00:12:21,070 --> 00:12:24,880 to the overall game and to that main area of the game, 242 00:12:24,880 --> 00:12:29,030 I'll add it here as an aside element, 243 00:12:29,030 --> 00:12:31,080 which is a good HTML element 244 00:12:31,080 --> 00:12:35,522 whenever you have some complimentary content 245 00:12:35,522 --> 00:12:40,290 or interaction elements that you wanna have on your page, 246 00:12:40,290 --> 00:12:43,320 which is not your main content, 247 00:12:43,320 --> 00:12:46,680 but which instead offers some extra information, 248 00:12:46,680 --> 00:12:49,960 like a sidebar with some extra navigation 249 00:12:49,960 --> 00:12:52,810 or also an overlay, which is used by parts 250 00:12:52,810 --> 00:12:55,420 of your main area of content, 251 00:12:55,420 --> 00:12:58,160 then the aside element is a good choice, 252 00:12:58,160 --> 00:13:00,850 because as you also see here in that tool tip, 253 00:13:00,850 --> 00:13:05,850 it is great for content that is a bit related to the content 254 00:13:06,570 --> 00:13:08,323 around the aside element. 255 00:13:09,440 --> 00:13:12,830 So it is often used for sidebars or something like that, 256 00:13:12,830 --> 00:13:16,530 but we can also consider using this for an overlay. 257 00:13:16,530 --> 00:13:19,130 Alternatively, we could also just use a div, 258 00:13:19,130 --> 00:13:22,093 you can always fall back to a div, I guess. 259 00:13:23,340 --> 00:13:24,970 So now here we have the aside element 260 00:13:24,970 --> 00:13:26,790 as a wrapper for the overlay. 261 00:13:26,790 --> 00:13:28,610 Inside off that overlay, 262 00:13:28,610 --> 00:13:32,910 I wanna describe to the user what he or she should do 263 00:13:32,910 --> 00:13:36,650 and for that, I'll add a title, a h2 element in that aside, 264 00:13:36,650 --> 00:13:38,780 which marks a new section. 265 00:13:38,780 --> 00:13:41,253 And here I'll just say, choose your name. 266 00:13:42,290 --> 00:13:44,910 And then below that, I wanna have a form. 267 00:13:44,910 --> 00:13:46,250 I want to have a form, 268 00:13:46,250 --> 00:13:49,003 because I want to fetch some user input. 269 00:13:50,090 --> 00:13:53,660 Now, I'll actually delete this action attribute here, 270 00:13:53,660 --> 00:13:56,060 which was added automatically for me, 271 00:13:56,060 --> 00:13:58,240 so that I have an empty form, 272 00:13:58,240 --> 00:14:01,050 because we will, later in this module, 273 00:14:01,050 --> 00:14:05,020 handle that form submission with JavaScript 274 00:14:05,020 --> 00:14:08,090 and that will be something we haven't done before, 275 00:14:08,090 --> 00:14:10,280 but you will learn how you can do it 276 00:14:10,280 --> 00:14:13,210 and that it is fairly easy in this module. 277 00:14:13,210 --> 00:14:16,683 It's one of the new things we'll dive into in this module. 278 00:14:17,700 --> 00:14:19,590 Hence, at the moment, no action 279 00:14:19,590 --> 00:14:21,880 or method attribute on the form 280 00:14:21,880 --> 00:14:24,330 and instead inside of that form, 281 00:14:24,330 --> 00:14:27,363 I know I wanna have one form control. 282 00:14:28,310 --> 00:14:31,370 For styling reasons, I'll wrap it with a div, 283 00:14:31,370 --> 00:14:33,510 which will become important later 284 00:14:33,510 --> 00:14:36,460 or which can help us with styling later, 285 00:14:36,460 --> 00:14:39,420 and in there, I then wanna have a label for my input, 286 00:14:39,420 --> 00:14:44,420 where I say player name and then the input element itself 287 00:14:44,520 --> 00:14:46,710 and it should be of type text, 288 00:14:46,710 --> 00:14:49,020 because I wanna fetch some plain text 289 00:14:49,020 --> 00:14:51,733 because I want to fetch the name of the player. 290 00:14:52,700 --> 00:14:56,120 And hence, I'll also add that name attribute 291 00:14:56,120 --> 00:14:59,530 and give it name as a name here, 292 00:14:59,530 --> 00:15:02,020 but of course here, you could also use username 293 00:15:02,020 --> 00:15:04,270 and let's maybe use that to avoid confusion 294 00:15:05,510 --> 00:15:09,440 and I'll give it an ID to then also connect this input 295 00:15:09,440 --> 00:15:13,400 to the label for accessibility reasons, as you learned. 296 00:15:13,400 --> 00:15:16,510 And here, I'll also use username 297 00:15:16,510 --> 00:15:20,150 or maybe player name, that's even more fitting. 298 00:15:20,150 --> 00:15:22,690 So let's also use that here for the name attribute, 299 00:15:22,690 --> 00:15:25,390 though you also could have different identifiers 300 00:15:25,390 --> 00:15:27,160 for name and ID. 301 00:15:27,160 --> 00:15:29,453 The two attributes are not related. 302 00:15:30,970 --> 00:15:33,520 And that's now my input and now on the label 303 00:15:33,520 --> 00:15:36,690 to establish that connection between label and input, 304 00:15:36,690 --> 00:15:40,630 I'll add the for attribute and point at player name. 305 00:15:40,630 --> 00:15:45,630 So at this ID so that we connect these two elements here 306 00:15:46,250 --> 00:15:47,773 through the ID. 307 00:15:51,040 --> 00:15:52,650 Now that's the input in this form 308 00:15:52,650 --> 00:15:54,120 and it's the only input here, 309 00:15:54,120 --> 00:15:56,170 because this form will only be 310 00:15:56,170 --> 00:15:58,700 about fetching the name of a player. 311 00:15:58,700 --> 00:16:01,230 Later in the course, we'll of course also see slightly 312 00:16:01,230 --> 00:16:04,590 more complex forms, but here that is what we need. 313 00:16:04,590 --> 00:16:08,810 And then I will add another div here 314 00:16:09,820 --> 00:16:13,180 which should hold my buttons for this form 315 00:16:13,180 --> 00:16:16,770 and I'll just add a div as a wrapper around these buttons 316 00:16:16,770 --> 00:16:20,403 so that we can then later use the div for styling. 317 00:16:21,370 --> 00:16:23,890 And then I'll have two buttons in here 318 00:16:23,890 --> 00:16:27,780 and one button of course, should be for submitting the form, 319 00:16:27,780 --> 00:16:29,580 so I'll add a label of confirm to it 320 00:16:31,550 --> 00:16:34,340 and give the button the type, submit, 321 00:16:34,340 --> 00:16:37,250 which would be the default type anyways, 322 00:16:37,250 --> 00:16:39,460 but I'll still add it to make it very clear 323 00:16:39,460 --> 00:16:42,600 that this is the button that should submit the form. 324 00:16:42,600 --> 00:16:45,960 And the other button will receive a type of button 325 00:16:45,960 --> 00:16:49,460 to overwrite the default, which again, 326 00:16:49,460 --> 00:16:52,530 is that this button would also submit the form, 327 00:16:52,530 --> 00:16:55,543 so that this button does now not submit the form. 328 00:16:56,460 --> 00:16:58,290 If you set the type to button, 329 00:16:58,290 --> 00:17:00,580 then the button, if it's inside a form, 330 00:17:00,580 --> 00:17:02,880 won't submit the form. 331 00:17:02,880 --> 00:17:03,940 And I'll do that, 332 00:17:03,940 --> 00:17:07,859 because this button should actually just cancel 333 00:17:07,859 --> 00:17:12,859 this form here, it should just basically close that overlay. 334 00:17:13,010 --> 00:17:14,603 That's what I wanna do here. 335 00:17:15,540 --> 00:17:19,099 And with that, we also have the general structure 336 00:17:19,099 --> 00:17:22,413 of that overlay that should be presented. 337 00:17:23,640 --> 00:17:27,180 Now, the last, yet extremely important thing that's missing, 338 00:17:27,180 --> 00:17:29,890 is the game field itself. 339 00:17:29,890 --> 00:17:31,650 Because now we spent a lot of time 340 00:17:31,650 --> 00:17:33,200 on all of the configuration content, 341 00:17:33,200 --> 00:17:36,210 but ultimately we wanna play a game. 342 00:17:36,210 --> 00:17:39,550 And for this, we have this active game section. 343 00:17:39,550 --> 00:17:44,240 Now in this section here, I wanna have my game field 344 00:17:44,240 --> 00:17:48,930 in the end and for that, I'll use an ordered list, 345 00:17:48,930 --> 00:17:52,380 because if you think about the tic-tac-toe game field, 346 00:17:52,380 --> 00:17:56,030 it, in the end, is just a list of fields. 347 00:17:56,030 --> 00:17:58,690 And it's a ordered list, because the order matters. 348 00:17:58,690 --> 00:18:01,853 We need to keep track of the order to know who won. 349 00:18:02,720 --> 00:18:05,650 So it's a ordered list and it's then a ordered list 350 00:18:05,650 --> 00:18:07,993 with nine list items. 351 00:18:08,880 --> 00:18:12,240 So here I'll then add nine list items, 352 00:18:12,240 --> 00:18:15,730 maybe in blocks of three, separated by a blank line 353 00:18:15,730 --> 00:18:17,651 to make it easier to read. 354 00:18:17,651 --> 00:18:20,400 Other than that, this blank line has no effect. 355 00:18:20,400 --> 00:18:22,520 It's just there to improve readability 356 00:18:23,520 --> 00:18:26,450 and now we have nine list items here, 357 00:18:26,450 --> 00:18:28,683 which we'll then use in our game. 358 00:18:29,520 --> 00:18:32,080 So that will be our actual game field 359 00:18:32,080 --> 00:18:33,800 and above that ordered list, 360 00:18:33,800 --> 00:18:38,650 I'll add a paragraph where I wanna say, it's your turn 361 00:18:38,650 --> 00:18:41,450 and then I'm gonna output the name of the player 362 00:18:41,450 --> 00:18:43,413 whose turn it currently is. 363 00:18:44,290 --> 00:18:46,149 And for that, I'll add a span here, 364 00:18:46,149 --> 00:18:47,550 so that we have an element 365 00:18:47,550 --> 00:18:50,480 which we can target with JavaScript later 366 00:18:50,480 --> 00:18:53,000 to change that player named dynamically. 367 00:18:53,000 --> 00:18:55,860 And after that span, I'll add an exclamation mark, 368 00:18:55,860 --> 00:18:59,110 so some plain text, but an exclamation mark as a character, 369 00:18:59,110 --> 00:19:01,860 and then in there, I'll have to player name 370 00:19:01,860 --> 00:19:05,330 and that player name should change with every turn. 371 00:19:05,330 --> 00:19:07,670 That's why we have that span. 372 00:19:07,670 --> 00:19:10,030 And to then be able to select 373 00:19:10,030 --> 00:19:12,450 the span conveniently in JavaScript, 374 00:19:12,450 --> 00:19:16,700 I'll add an ID and set the ID to active-player-name 375 00:19:16,700 --> 00:19:18,740 and then we'll be able to get access, 376 00:19:18,740 --> 00:19:21,470 to get hold of that span through JavaScript 377 00:19:21,470 --> 00:19:25,310 and update the value, the name inside of that span 378 00:19:25,310 --> 00:19:27,163 whenever the turn changes. 379 00:19:28,800 --> 00:19:31,640 Ultimately, we also wanna be able to end the game. 380 00:19:31,640 --> 00:19:34,410 We wanna have a winner eventually. 381 00:19:34,410 --> 00:19:39,410 And for this, I'll already add a little extra article here 382 00:19:42,530 --> 00:19:46,043 above my game field, 383 00:19:46,910 --> 00:19:51,070 which should say, you won, like that 384 00:19:53,830 --> 00:19:58,500 and then below that, I'll add a paragraph where I say, 385 00:19:58,500 --> 00:20:02,493 Click Start New Game above, 386 00:20:06,506 --> 00:20:08,173 to start a new game. 387 00:20:09,890 --> 00:20:12,660 And of course, when I say you won here, 388 00:20:12,660 --> 00:20:16,440 then I also wanna output the name of the player. 389 00:20:16,440 --> 00:20:19,880 So I'll say you won and then I'll have another span, 390 00:20:19,880 --> 00:20:22,630 so that I can easily target that player name 391 00:20:22,630 --> 00:20:24,313 and update that player name. 392 00:20:25,210 --> 00:20:27,690 So here, I'll then also say player name 393 00:20:27,690 --> 00:20:32,690 and give that an ID off winner-name, something like that. 394 00:20:35,080 --> 00:20:37,830 And that's now the general content. 395 00:20:37,830 --> 00:20:41,990 It's not 100% done, we'll add a couple of classes, 396 00:20:41,990 --> 00:20:43,550 a couple of class attributes, 397 00:20:43,550 --> 00:20:47,760 maybe a couple of IDs and other parts to this content, 398 00:20:47,760 --> 00:20:49,933 but for a start, that's what we need. 399 00:20:50,880 --> 00:20:53,690 Now we can also start our development server, 400 00:20:53,690 --> 00:20:56,930 our live server here by right clicking on that file 401 00:20:56,930 --> 00:20:59,450 and loading that into a browser 402 00:20:59,450 --> 00:21:02,800 and then we should see something like that in the browser. 403 00:21:02,800 --> 00:21:04,920 Again, I'm zoomed in a bit here, 404 00:21:04,920 --> 00:21:06,830 otherwise it would look something like this, 405 00:21:06,830 --> 00:21:09,270 but to make it a bit easier to read here on the screen, 406 00:21:09,270 --> 00:21:10,483 I will zoom in. 407 00:21:11,480 --> 00:21:14,560 And that is the general content, 408 00:21:14,560 --> 00:21:17,560 obviously what's missing, besides all our logic, 409 00:21:17,560 --> 00:21:20,393 is the styling and hence, that's what we'll do next.