1 00:00:00,490 --> 00:00:02,270 It Guys welcome to your next project. 2 00:00:02,280 --> 00:00:07,380 In this project we'll be building a number guessing game k it's not the funnest game in the world but 3 00:00:07,380 --> 00:00:13,800 I think it will give you some good experience with changing and keeping track of values working with 4 00:00:13,800 --> 00:00:17,010 the Dom and structuring things and your application. 5 00:00:17,160 --> 00:00:22,800 So basically we just need to guess a number between a certain range and we can define this range within 6 00:00:22,800 --> 00:00:27,940 our application I have it between 1 and 10 and we can go ahead and enter a guess. 7 00:00:27,940 --> 00:00:34,440 So see two and submit and it's going to tell us that whatever number we put in is not correct and we 8 00:00:34,440 --> 00:00:40,420 have a certain number of guesses left which we can also change within our application. 9 00:00:40,440 --> 00:00:41,980 So let's try three. 10 00:00:42,010 --> 00:00:44,400 Submit to K3 is not correct. 11 00:00:44,400 --> 00:00:46,120 We have one guesses left. 12 00:00:46,260 --> 00:00:48,230 If we do four submit. 13 00:00:48,360 --> 00:00:52,870 Sorry that game is over and it gives us the correct answer which was seven. 14 00:00:52,890 --> 00:00:57,710 All right and we can choose to play again that we can't enter any more and this is this kind of stuff. 15 00:00:57,720 --> 00:01:04,560 It may seem little that we can't enter the number again but this is very important because it adds to 16 00:01:05,240 --> 00:01:12,120 just the user experience and just just making it clear on what the user is supposed to do. 17 00:01:12,120 --> 00:01:13,400 So we click play again. 18 00:01:13,410 --> 00:01:17,250 It's going to reset and we now have three more guesses so let's try again. 19 00:01:17,250 --> 00:01:19,740 I'm going to try until I actually get it right. 20 00:01:19,920 --> 00:01:20,900 Say three. 21 00:01:20,910 --> 00:01:22,450 Sorry that was seven. 22 00:01:22,450 --> 00:01:26,850 Let's try again one two three three is correct. 23 00:01:26,850 --> 00:01:27,120 All right. 24 00:01:27,120 --> 00:01:31,840 So we got it on the last try and you can see that we're we're also doing the red. 25 00:01:32,010 --> 00:01:32,850 If it's wrong. 26 00:01:32,850 --> 00:01:34,930 And then if it's correct everything is green. 27 00:01:34,930 --> 00:01:42,180 So another thing to recognize that may seem really small but it's important for user experience. 28 00:01:42,180 --> 00:01:42,420 All right. 29 00:01:42,420 --> 00:01:49,040 Now as far as a free CSSA framework we're using skeleton which is a very very barebones framework. 30 00:01:49,050 --> 00:01:54,030 So there's not a lot of classes that the user interface will take us a couple of minutes to create It's 31 00:01:54,030 --> 00:01:57,160 very very simple very bare bones. 32 00:01:57,180 --> 00:02:01,410 And the reason I'm choosing to use different CSSA frameworks here and there is because you're going 33 00:02:01,410 --> 00:02:03,890 to work with different eyes. 34 00:02:03,990 --> 00:02:09,600 I know this isn't a NH team on CSSA course but you're going to be working with different interfaces 35 00:02:09,600 --> 00:02:11,460 so it's good to switch it up. 36 00:02:11,460 --> 00:02:16,710 You know I don't want to always use bootstrap because you're not you're not always going to be using 37 00:02:16,710 --> 00:02:21,630 that when you're in the field and you're you know you're actually working as a javascript developer 38 00:02:21,900 --> 00:02:25,050 you're going to work with all types of weird stuff custom interfaces. 39 00:02:25,110 --> 00:02:26,360 So it's good to switch it up. 40 00:02:26,360 --> 00:02:30,510 So we'll be using skeleton in this in this project. 41 00:02:30,510 --> 00:02:30,770 All right. 42 00:02:30,770 --> 00:02:33,330 So let's go ahead and get started. 43 00:02:33,330 --> 00:02:33,570 All right. 44 00:02:33,570 --> 00:02:35,250 So we're going to get started on the UI. 45 00:02:35,250 --> 00:02:37,290 Like I said it's going to be very very simple. 46 00:02:37,290 --> 00:02:41,230 This is the Web site for a skeleton if you want to check it out. 47 00:02:41,370 --> 00:02:44,220 It's a dead simple responsive boiler plate. 48 00:02:44,220 --> 00:02:48,780 It's not even really called a framework but it just makes things look a little better. 49 00:02:48,780 --> 00:02:51,720 Buttons and input fields and so on. 50 00:02:51,720 --> 00:02:56,470 Now I'm not going to download it and include it in the file structure I'm just going to use a. 51 00:02:56,520 --> 00:03:06,090 So I'm actually going to search for skeleton's CDN and we're going to click on the Cdn JSE dot com link 52 00:03:06,090 --> 00:03:09,900 right here and we're going to just use this CSSA link. 53 00:03:09,900 --> 00:03:15,520 All right so let's create a new folder and let's call this number. 54 00:03:15,570 --> 00:03:16,860 Yes sir. 55 00:03:18,350 --> 00:03:28,570 And we're going to open this with code Visual Studio code OK let's make this smaller and let's create 56 00:03:28,600 --> 00:03:35,950 our file So basically again we just need an index start each to himself and we need an app. 57 00:03:36,100 --> 00:03:37,210 Yes. 58 00:03:37,270 --> 00:03:39,260 OK so in the index each. 59 00:03:39,310 --> 00:03:44,290 I'm actually going to use Emett here I'm going to use exclamation and then tab and that'll give us a 60 00:03:44,290 --> 00:03:52,960 basic structure and then I'm going to grab the link tag for this skeleton CSSA file and paste that right 61 00:03:52,960 --> 00:03:53,940 in there. 62 00:03:53,950 --> 00:03:59,190 All right so that's it we can go ahead and you don't need this page anymore. 63 00:03:59,400 --> 00:04:02,320 And let's change the title here. 64 00:04:02,350 --> 00:04:08,070 Will change it to number Gessner on a very creative name but that's fine. 65 00:04:08,200 --> 00:04:12,850 So let's save this and then let's open it with our server with live server or you can just open the 66 00:04:12,850 --> 00:04:15,030 H to him all file doesn't matter. 67 00:04:15,340 --> 00:04:16,440 And there it is. 68 00:04:16,440 --> 00:04:18,790 Case was just a blank page so far. 69 00:04:18,790 --> 00:04:21,700 Now the UI is going to be very very simple. 70 00:04:21,700 --> 00:04:26,990 We're going to just have a container case skeleton uses a container class to push everything. 71 00:04:27,190 --> 00:04:28,240 Give it some margin. 72 00:04:28,240 --> 00:04:29,120 Auto. 73 00:04:29,710 --> 00:04:39,230 And then we're going to have an H1 will say number or K under that H-1 we're going to have an idea of 74 00:04:39,230 --> 00:04:44,090 game day with an idea of game basically wrap the whole thing. 75 00:04:44,120 --> 00:04:53,870 We're going to have a power graph and we're going to say guess a number between now when we say between 76 00:04:53,870 --> 00:04:58,100 something and something these are going to be dynamic values that we're going to and we're going to 77 00:04:58,280 --> 00:05:00,410 it's going to be inserted from javascript. 78 00:05:00,410 --> 00:05:07,000 But for now we're just going to put fixed numbers but we want to surround them in a span. 79 00:05:07,250 --> 00:05:14,740 So this will be a span with the class of men dash numb like that and then I'm just going to put a I'm 80 00:05:14,750 --> 00:05:16,130 just going to put a one in here. 81 00:05:16,160 --> 00:05:19,150 But later on they'll be generated through javascript. 82 00:05:19,250 --> 00:05:20,980 Then we want to put the word and. 83 00:05:21,120 --> 00:05:26,130 And then another span with the class of Max dash. 84 00:05:26,820 --> 00:05:29,670 OK and I'll put a 10 in there. 85 00:05:29,720 --> 00:05:30,350 OK. 86 00:05:31,140 --> 00:05:33,850 So me this looks close this up. 87 00:05:33,870 --> 00:05:36,340 All right so those are paragraph let's go ahead and save it. 88 00:05:36,340 --> 00:05:39,220 So it should look like this. 89 00:05:39,290 --> 00:05:39,700 All right. 90 00:05:39,700 --> 00:05:46,900 Now underneath that paragraph we're going to want to put in input with the type of number. 91 00:05:47,980 --> 00:05:54,010 OK it's not going to need a name for the ID we're going to put. 92 00:05:54,100 --> 00:05:57,490 Yes dash input. 93 00:05:57,560 --> 00:06:06,560 All right and then we'll put a placeholder and we'll say enter your gas. 94 00:06:06,700 --> 00:06:08,560 Underneath that we're going to have our submit. 95 00:06:08,560 --> 00:06:15,190 So we're going to have an input with the type of submit and for the value we'll say submit and then 96 00:06:15,280 --> 00:06:21,920 we just want to give this an ID of guess Dasch value. 97 00:06:22,520 --> 00:06:22,900 OK. 98 00:06:22,900 --> 00:06:28,840 Now underneath that input we're going to have a paragraph with the class of message and it's not going 99 00:06:28,840 --> 00:06:29,620 to have anything in it. 100 00:06:29,620 --> 00:06:32,880 This is where we're going to insert the message from our javascript. 101 00:06:32,890 --> 00:06:38,710 OK so it'll say if it's wrong or correct or whatever whatever the message may be and that's it. 102 00:06:38,710 --> 00:06:41,050 So we'll save that that's our user interface. 103 00:06:41,050 --> 00:06:43,870 Now we just want to include or app J s script 104 00:06:48,510 --> 00:06:51,570 All right. 105 00:06:52,970 --> 00:06:53,900 Save that. 106 00:06:53,930 --> 00:06:57,180 Now we have our interface. 107 00:06:57,410 --> 00:07:00,560 So in the next video we'll start to implement the javascript.