1 00:00:02,220 --> 00:00:06,040 Now that's it for this course section. 2 00:00:06,040 --> 00:00:09,440 We implemented a complete browser-based game 3 00:00:09,440 --> 00:00:12,910 with JavaScript, HTML, and CSS. 4 00:00:12,910 --> 00:00:15,810 So, with all these technologies and features, 5 00:00:15,810 --> 00:00:18,913 we learned about over this entire course up to this point. 6 00:00:19,780 --> 00:00:22,910 This is a game which really only runs in the browser. 7 00:00:22,910 --> 00:00:25,600 We need no complex server for that. 8 00:00:25,600 --> 00:00:27,600 It's just a browser-based game, 9 00:00:27,600 --> 00:00:30,500 with browser-based JavaScript. 10 00:00:30,500 --> 00:00:32,770 And in this module, as mentioned, 11 00:00:32,770 --> 00:00:35,310 we used all these core concepts you learned about 12 00:00:35,310 --> 00:00:36,510 throughout this course. 13 00:00:36,510 --> 00:00:38,930 We're using variables and constants, 14 00:00:38,930 --> 00:00:42,880 different kinds of values, we are interacting with the DOM, 15 00:00:42,880 --> 00:00:46,320 we are selecting elements, also in different ways 16 00:00:46,320 --> 00:00:49,210 with getElementByID and query selector. 17 00:00:49,210 --> 00:00:53,200 And also with some DOM drilling, some DOM traversal, 18 00:00:53,200 --> 00:00:56,920 by using firstElementChild, and so on. 19 00:00:56,920 --> 00:00:59,787 We are registering EventListeners, 20 00:00:59,787 --> 00:01:02,390 and you did also learn how you can listen 21 00:01:02,390 --> 00:01:04,980 to form submissions and how you can handle 22 00:01:04,980 --> 00:01:06,390 such forms submissions 23 00:01:06,390 --> 00:01:09,300 that you can call event.preventDefault 24 00:01:09,300 --> 00:01:11,910 to prevent that default behavior, 25 00:01:11,910 --> 00:01:14,590 and then have your own browser-based logic 26 00:01:14,590 --> 00:01:17,090 for extracting the entered data. 27 00:01:17,090 --> 00:01:18,710 Here, we're doing that with help 28 00:01:18,710 --> 00:01:21,100 of that FormData object blueprint 29 00:01:21,100 --> 00:01:22,793 about which we also learned. 30 00:01:24,500 --> 00:01:26,830 Now then, we're doing some validation here 31 00:01:26,830 --> 00:01:28,800 and we're using an "if" check, 32 00:01:28,800 --> 00:01:31,780 some conditional code to also handle the case 33 00:01:31,780 --> 00:01:34,770 that incorrect input was provided, 34 00:01:34,770 --> 00:01:37,350 in which case we then manipulate the DOM 35 00:01:37,350 --> 00:01:41,113 to output the error there and to change some styles. 36 00:01:42,020 --> 00:01:43,870 Otherwise, if everything works, 37 00:01:43,870 --> 00:01:47,430 we're managing some internal data here in JavaScript, 38 00:01:47,430 --> 00:01:51,430 which we then need to run our game successfully. 39 00:01:51,430 --> 00:01:54,380 And here we find various JavaScript concepts 40 00:01:54,380 --> 00:01:59,030 like functions, calling each other, more DOM manipulation, 41 00:01:59,030 --> 00:02:02,970 also with inner HTML and for loops, 42 00:02:02,970 --> 00:02:05,160 including nested for loops here 43 00:02:05,160 --> 00:02:07,730 to go through a nested array, 44 00:02:07,730 --> 00:02:09,509 something we haven't used before, 45 00:02:09,509 --> 00:02:13,160 but something which can also be very useful in situations 46 00:02:13,160 --> 00:02:15,880 like we have it here in this game. 47 00:02:15,880 --> 00:02:18,710 We also don't just see these kinds of for loops here, 48 00:02:18,710 --> 00:02:23,350 but in AppJS, I also showed you a for off loop here 49 00:02:23,350 --> 00:02:26,680 to go through all the fields on our game field 50 00:02:26,680 --> 00:02:28,810 and add event listeners to them, 51 00:02:28,810 --> 00:02:32,130 though I then also showed you an alternative approach 52 00:02:32,130 --> 00:02:34,420 where we instead add the click listener 53 00:02:34,420 --> 00:02:37,390 to the parent element of these game fields 54 00:02:37,390 --> 00:02:39,070 to the order list itself, 55 00:02:39,070 --> 00:02:41,260 since that will then also still trigger 56 00:02:41,260 --> 00:02:43,593 if one of these game fields is clicked. 57 00:02:45,760 --> 00:02:47,870 Now, we then had our game logic here, 58 00:02:47,870 --> 00:02:51,150 again using various concepts, a little bit of math 59 00:02:51,150 --> 00:02:54,310 and writing our first basic algorithms here 60 00:02:54,310 --> 00:02:56,620 to then implement this tic-tac-toe game 61 00:02:56,620 --> 00:02:59,020 in a way that makes sense. 62 00:02:59,020 --> 00:03:01,820 And with that, I hope you, again, 63 00:03:01,820 --> 00:03:04,690 had a good chance of practicing what you learned. 64 00:03:04,690 --> 00:03:08,100 If some of these concepts are still not entirely clear, 65 00:03:08,100 --> 00:03:11,570 I do recommend that you go back to the specific lectures 66 00:03:11,570 --> 00:03:13,750 where they were introduced, 67 00:03:13,750 --> 00:03:17,420 maybe also go through this entire section again, 68 00:03:17,420 --> 00:03:21,080 this time trying to build this game on your own first. 69 00:03:21,080 --> 00:03:23,690 Now that you saw the complete solution once, 70 00:03:23,690 --> 00:03:27,040 try rebuilding it without looking at that solution again, 71 00:03:27,040 --> 00:03:29,640 and then maybe go through the solution again, 72 00:03:29,640 --> 00:03:33,030 to fix the parts where you might still be struggling. 73 00:03:33,030 --> 00:03:34,750 This should be a good exercise, 74 00:03:34,750 --> 00:03:37,970 and hopefully this entire section was a good exercise. 75 00:03:37,970 --> 00:03:40,740 And with that, we're now ready to leave the front-end, 76 00:03:40,740 --> 00:03:44,170 the browser side, and also dive into server-side code 77 00:03:44,170 --> 00:03:46,760 and see why we need custom service at code 78 00:03:46,760 --> 00:03:48,050 in some situations 79 00:03:48,050 --> 00:03:50,993 and how we can write our own server-side code.