1 00:00:00,180 --> 00:00:01,330 All right welcome back. 2 00:00:01,530 --> 00:00:03,330 Let's go ahead and get started on this. 3 00:00:03,330 --> 00:00:05,160 RG be guessing game application. 4 00:00:05,220 --> 00:00:10,270 I'm going to make the h tim file first and the C S S and create this simple grid. 5 00:00:10,290 --> 00:00:14,460 So we're not going to style it with the background colors and the fonts and this little now are here 6 00:00:14,820 --> 00:00:19,980 we're going to just start simple with six squares and give them some background colors maybe a little 7 00:00:19,980 --> 00:00:25,110 spacing between them but we won't do things like add the rounded corners yet we're not going to add 8 00:00:25,110 --> 00:00:26,340 any of the animations. 9 00:00:26,420 --> 00:00:31,710 The fade in and the fade out all we'll do is get six squares and then we'll add the basic logic of quick 10 00:00:31,710 --> 00:00:34,780 events and checking if you get the correct color and so on. 11 00:00:34,950 --> 00:00:37,970 So first we need to make an edge to him file which I have here. 12 00:00:37,980 --> 00:00:42,910 I call that colored game each time so we'll add in our team out here. 13 00:00:43,110 --> 00:00:44,070 The boiler plate. 14 00:00:44,430 --> 00:00:45,370 Give it a title. 15 00:00:45,420 --> 00:00:47,090 I'll do color game. 16 00:00:47,910 --> 00:00:50,450 Let's go ahead and add in the six squares. 17 00:00:50,610 --> 00:00:51,790 So I'm going to make them divs. 18 00:00:51,810 --> 00:00:57,090 Each one is a div with a class of square and we'll use that squared class to style them later. 19 00:00:57,510 --> 00:01:05,610 All right so we'll do div class equal Square and we don't need to put anything inside of it and we'll 20 00:01:05,610 --> 00:01:07,380 have six of those. 21 00:01:07,380 --> 00:01:12,660 And then just to make this cleaner I'm going to put them all instead of another div that we can style 22 00:01:12,660 --> 00:01:13,410 later. 23 00:01:13,560 --> 00:01:15,490 I'm just going to call it container. 24 00:01:15,810 --> 00:01:18,210 So it's not going to do anything upfront. 25 00:01:18,240 --> 00:01:22,510 Eventually we'll use it to make the site responsive and to make the grid shrink. 26 00:01:22,530 --> 00:01:26,640 For now it's just going to group them together so we don't just have 6 squares floating around. 27 00:01:26,850 --> 00:01:28,970 OK so we have our six squares here. 28 00:01:29,160 --> 00:01:33,270 If we open this up in the browser game that edge to him. 29 00:01:33,600 --> 00:01:36,420 We don't see anything of course for a few reasons. 30 00:01:36,430 --> 00:01:42,360 One even though we have six divs they have no With there's no margin there's no color so we don't see 31 00:01:42,360 --> 00:01:43,390 anything at all. 32 00:01:43,710 --> 00:01:46,520 So we're going to start by styling them very basically. 33 00:01:46,710 --> 00:01:52,800 So need to add in a style sheet so I'll link to the style sheet first which I haven't created and make 34 00:01:52,800 --> 00:01:53,700 this a little bigger. 35 00:01:53,820 --> 00:02:04,650 So I'll call it color game see SS and save and then make that file color game C Ss and the first thing 36 00:02:04,650 --> 00:02:10,110 that I'll do is just add a background color to our entire body. 37 00:02:10,140 --> 00:02:17,600 So far the background color and the color I'm going to use is a hex code. 38 00:02:17,730 --> 00:02:23,960 It is 2 3 2 3 2 3 and save make sure that it's connected. 39 00:02:24,120 --> 00:02:24,510 Yep. 40 00:02:24,630 --> 00:02:26,810 So we get the correct background color. 41 00:02:26,820 --> 00:02:31,730 Next up we go ahead and start to style our squares. 42 00:02:32,040 --> 00:02:38,100 We're going to use the same strategy we use to make this VSS for photography portfolio site where we 43 00:02:38,100 --> 00:02:40,410 had that responsive grid of square images. 44 00:02:40,410 --> 00:02:41,640 They were all black and white. 45 00:02:41,670 --> 00:02:43,400 Can you use the same idea here. 46 00:02:43,410 --> 00:02:49,770 So the way that we're going to do this is each one of these is inside of a container and they each take 47 00:02:49,770 --> 00:02:51,870 up 30 percent of that container. 48 00:02:51,870 --> 00:02:55,000 So the container only goes right around these squares. 49 00:02:55,020 --> 00:02:58,100 It's not the entire body here just around the squares. 50 00:02:58,140 --> 00:03:02,360 They take up 30 percent and then we have a margin between them on all sides. 51 00:03:02,540 --> 00:03:04,180 1.6 6 percent. 52 00:03:04,320 --> 00:03:07,770 So that all adds up to be 100 percent of the container. 53 00:03:08,040 --> 00:03:13,880 So we'll do that first square with will be 30 percent. 54 00:03:14,460 --> 00:03:22,140 And if we can just leave it at that and give him a background let's make them purple and save and we 55 00:03:22,140 --> 00:03:24,060 don't see anything still. 56 00:03:24,150 --> 00:03:29,820 And the reason that's happening I'll show you if we inspect our lives are on the page. 57 00:03:29,850 --> 00:03:31,400 They're just still empty. 58 00:03:31,410 --> 00:03:32,610 What we need to do. 59 00:03:32,640 --> 00:03:38,480 Last time we had images and images have some content in them but these divs are empty. 60 00:03:38,640 --> 00:03:42,280 So we're going to add in some space and we're going to use padding bottom. 61 00:03:42,330 --> 00:03:49,000 We could also use padding top though so padding bottom and that's also going to be 30 percent. 62 00:03:49,410 --> 00:03:50,680 So if I refresh. 63 00:03:51,080 --> 00:03:51,940 OK. 64 00:03:52,290 --> 00:03:57,480 We now have six squares although they are all in a line which is not what we want. 65 00:03:57,480 --> 00:03:59,280 We want them to be on the same line. 66 00:03:59,610 --> 00:04:03,420 So we need to float them to the left which is what we did with the image grid as well. 67 00:04:03,420 --> 00:04:06,480 So float left and save we refresh. 68 00:04:06,750 --> 00:04:09,400 And now we end up with this massive grid here. 69 00:04:09,670 --> 00:04:12,990 Oh go ahead and at the margin in so that you can see what's happening. 70 00:04:13,020 --> 00:04:19,590 So we're going to have margin 1.6 6 percent and save. 71 00:04:19,790 --> 00:04:25,630 Now you can see we have our grid here and this grid does take up the entire screen. 72 00:04:25,670 --> 00:04:27,530 So I am going to change that a little bit. 73 00:04:27,530 --> 00:04:29,400 We don't want it to be so huge. 74 00:04:29,690 --> 00:04:35,270 And what we can do is use that container that we provided this div ID container. 75 00:04:35,450 --> 00:04:43,910 So if we style that the div with the idea of container which we would select just like this and we can 76 00:04:43,910 --> 00:04:48,770 start by just telling it that its maximum width should be. 77 00:04:48,770 --> 00:04:51,200 And I think I went for 600 pixels. 78 00:04:51,200 --> 00:04:52,510 We can play with that number. 79 00:04:52,540 --> 00:04:56,350 Now if I refresh Now you can see it's much smaller. 80 00:04:56,690 --> 00:04:57,810 So that's part of it. 81 00:04:58,070 --> 00:05:00,030 And then what's also Center this. 82 00:05:00,350 --> 00:05:03,000 So we'll 2 margin. 83 00:05:03,380 --> 00:05:04,420 0 auto. 84 00:05:04,550 --> 00:05:09,860 Remember this trick the zero margin on the top and bottom of the container and auto on the left and 85 00:05:09,860 --> 00:05:13,100 right will make it so that it's the same size on either side. 86 00:05:13,130 --> 00:05:15,330 And now we have this nice center grid. 87 00:05:15,500 --> 00:05:16,400 All right. 88 00:05:16,400 --> 00:05:22,400 And let's do one more thing which is at our H-1 so I'm going to have an H1 here and it's just going 89 00:05:22,400 --> 00:05:27,920 to say the great R.G. be color game and we'll just start like that. 90 00:05:28,160 --> 00:05:31,110 And if we refresh of course it's really hard to see. 91 00:05:31,370 --> 00:05:37,440 So let's make it white H-1 color white and save. 92 00:05:37,820 --> 00:05:39,610 And we'll start with that. 93 00:05:39,620 --> 00:05:41,810 So now let's use some javascript. 94 00:05:41,810 --> 00:05:45,340 We're going to set javascript up to give each one of these a different color. 95 00:05:45,650 --> 00:05:50,830 So let's go and make a new file and we'll call it color game. 96 00:05:50,970 --> 00:05:53,360 J.S. and save. 97 00:05:53,360 --> 00:05:58,870 And like I always want to do let's add in our alert that says connected. 98 00:05:58,880 --> 00:06:04,670 Now let's add the script in source equals colored game. 99 00:06:04,750 --> 00:06:10,290 Yes save refresh the page and we get our connected alert. 100 00:06:10,790 --> 00:06:13,550 OK so I'll resize the window there. 101 00:06:13,550 --> 00:06:16,400 Now let's add the code to give them different colors. 102 00:06:16,580 --> 00:06:18,770 So in the end result in the end game. 103 00:06:18,770 --> 00:06:25,870 Every time the page loads it picks six random colors and then it assigns each color to one of the divs. 104 00:06:26,150 --> 00:06:30,350 We're going to start with out the randomized aspect and we're just going to assign six colors that are 105 00:06:30,350 --> 00:06:31,250 always the same. 106 00:06:31,400 --> 00:06:33,800 And then we'll move on to randomizing them. 107 00:06:33,800 --> 00:06:39,680 So let's go to my color game Yes and I'm going to start by making a list of colors and I'll just call 108 00:06:39,680 --> 00:06:40,430 it colors. 109 00:06:40,430 --> 00:06:41,190 It's an array. 110 00:06:41,360 --> 00:06:45,610 And remember in our end product this will be a random list of colors. 111 00:06:45,680 --> 00:06:48,820 For now I'm going to just add some of my own. 112 00:06:48,980 --> 00:06:52,050 So G-B and I'll start with all red. 113 00:06:52,070 --> 00:06:59,790 So 2 5 5 0 0 and just to make this legible for you I will Let's do this all on separate lines. 114 00:06:59,900 --> 00:07:02,240 So we'll have six of these. 115 00:07:02,420 --> 00:07:08,710 And the first one will be all red and then we'll have another one that's all red and all green which 116 00:07:08,710 --> 00:07:09,670 would make yellow. 117 00:07:09,830 --> 00:07:16,030 And then the next one will be 0 red and all green. 118 00:07:16,970 --> 00:07:27,790 And then the next one after that will be zero red or green and all blue and then will also do. 119 00:07:27,830 --> 00:07:40,130 So you read 0 green 255 blue and then we'll do 255 red 0 green 255 blue and that will give us an array 120 00:07:40,130 --> 00:07:42,680 of six colors as strings. 121 00:07:42,680 --> 00:07:48,770 And then what we want to do is select all six of these squares loop through them and then assign one 122 00:07:48,770 --> 00:07:51,110 of these colors to each one's background. 123 00:07:51,290 --> 00:07:58,640 So to loop through first we need to select so far and we'll call it squares equals document and we have 124 00:07:58,640 --> 00:07:59,710 a lot of choices here. 125 00:07:59,720 --> 00:08:02,010 I'm going to use a query selector all. 126 00:08:02,390 --> 00:08:05,810 So I make sure to get all six of them rather than just the first one. 127 00:08:05,990 --> 00:08:08,930 And we're going to select based off of the class square. 128 00:08:09,440 --> 00:08:13,930 If we had just done div remember that we have a container div and we don't want to select that one. 129 00:08:14,000 --> 00:08:23,030 We only want these six square divs so square and then we'll loop through four var equals zero. 130 00:08:23,450 --> 00:08:35,310 I less than squares length and I plus plus instead of here we will then say squares I dot style dot 131 00:08:35,420 --> 00:08:43,010 background equals and this is the interesting part we're going to take that eye and use it to access 132 00:08:43,010 --> 00:08:43,710 colors. 133 00:08:44,750 --> 00:08:49,990 Either this is Colt I'm here with a little fix that I'm adding after the fact. 134 00:08:50,130 --> 00:08:51,080 Just a quick note. 135 00:08:51,330 --> 00:08:58,650 It's much preferrable preferable to your style background color so background color one word with an 136 00:08:58,710 --> 00:09:04,180 upper case C rather than style dot background which is what I'm using in this video. 137 00:09:04,350 --> 00:09:08,230 So any time you see styled up background change it to background color. 138 00:09:08,400 --> 00:09:13,590 And the reason for that is that it will work in all browsers currently style but background does not 139 00:09:13,590 --> 00:09:17,880 work in Firefox so it technically works in style. 140 00:09:17,910 --> 00:09:23,160 That background will work in Chrome for example just fine and the game does work but I've been getting 141 00:09:23,160 --> 00:09:28,490 a lot of questions about what's going on in Firefox and this is really the main culprit styled background 142 00:09:28,670 --> 00:09:29,200 color. 143 00:09:29,400 --> 00:09:34,320 Also I'd like to think Del Anderson one of the students in the discussion forums for pointing this out 144 00:09:34,320 --> 00:09:37,450 most recently I'll get back to coding. 145 00:09:37,500 --> 00:09:45,300 So what we're doing we have six squares and our eye is going to go from 0 1 2 3 4 5 and that will loop 146 00:09:45,300 --> 00:09:46,420 through each square. 147 00:09:46,560 --> 00:09:51,890 And then when I get to the first square I'm going to take zero and give it the background color of colors 148 00:09:51,890 --> 00:09:53,300 zero which is right here. 149 00:09:53,340 --> 00:09:54,360 So that would be right. 150 00:09:54,630 --> 00:10:00,780 And then we keep going and we take one for the second div and we give it the second color with index 151 00:10:00,780 --> 00:10:03,330 of 1 and we keep doing that until we get to the end. 152 00:10:03,330 --> 00:10:08,010 So we're basically going in order that the divs are on the page is the order that they will be colored 153 00:10:08,490 --> 00:10:10,420 using these colors from the array. 154 00:10:10,680 --> 00:10:16,170 And if we save refresh you can see we get our six basic colors. 155 00:10:16,710 --> 00:10:20,740 So we have red yellow green cyan blue magenta. 156 00:10:20,970 --> 00:10:22,330 So that's fine for now. 157 00:10:22,500 --> 00:10:24,730 We will focus on randomising colors later. 158 00:10:24,870 --> 00:10:30,420 But as a preview although we need to do is generate three numbers three different numbers from 0 to 159 00:10:30,420 --> 00:10:32,960 255 and then we combine them. 160 00:10:33,210 --> 00:10:36,180 So it's just three different channels all randomized. 161 00:10:36,180 --> 00:10:40,340 And then we make them into one big string with r.g B and parentheses around them. 162 00:10:40,590 --> 00:10:42,720 But we're going to go with these colors for now. 163 00:10:42,720 --> 00:10:46,210 The next thing that we need to do is every time that the page loads. 164 00:10:46,300 --> 00:10:49,640 I show you here not only are six colors picked. 165 00:10:49,740 --> 00:10:55,590 One of those colors is selected to be the goal or to be the color that we're looking for. 166 00:10:55,590 --> 00:10:58,490 So in this case this is a color that's picked. 167 00:10:58,500 --> 00:11:03,540 So we're going to do that as well and we're going to start Portus hard coding it and then we'll randomize 168 00:11:03,540 --> 00:11:04,310 it afterwards. 169 00:11:04,410 --> 00:11:08,610 So we're just going to start by saying the gold color is cyan. 170 00:11:08,790 --> 00:11:11,940 So that's the fourth color index of three. 171 00:11:11,970 --> 00:11:20,070 So all right the variable here var picked color equals the colors array index 3. 172 00:11:20,800 --> 00:11:23,900 And that will pick Suyin or this color here R.G. B. 173 00:11:23,910 --> 00:11:31,380 0 2 5 5 2 5 5 and it's a string remember then what we wanted to do is update our page so that it says 174 00:11:31,380 --> 00:11:33,690 that right here just like we have it here. 175 00:11:33,990 --> 00:11:38,030 Obviously not styled the same way but we want it to say R.G. B. 176 00:11:38,040 --> 00:11:45,960 And then in parentheses 0 2 5 5 5 5 to do that we're going to have to change or to him out a little 177 00:11:45,960 --> 00:11:52,990 bit if you can think back to the scorekeeper game where we had an H1 and we are changing the. 178 00:11:53,010 --> 00:11:55,670 Player one player two scores initially. 179 00:11:56,040 --> 00:12:02,310 We just had a plane H-1 And when we updated it it automatically overwrote everything else that was in 180 00:12:02,310 --> 00:12:02,840 there. 181 00:12:03,030 --> 00:12:04,160 But we don't want to do that. 182 00:12:04,170 --> 00:12:10,320 We want to keep the text the great and color game and our color just goes here but we don't want to 183 00:12:10,320 --> 00:12:13,970 have a separate H-1 or something because those would go on separate lines. 184 00:12:14,040 --> 00:12:20,070 So we're going to use a span just like we did in the scorekeeper game and just add in R.G. be there 185 00:12:20,070 --> 00:12:21,180 as a placeholder. 186 00:12:21,180 --> 00:12:24,320 So nothing looks different but if we inspect. 187 00:12:25,110 --> 00:12:30,180 You can see we now have a span which means you can easily select it and manipulate the text. 188 00:12:30,510 --> 00:12:33,250 And we're going to give it an idea just to make it even easier. 189 00:12:33,510 --> 00:12:34,950 So we'll give it id. 190 00:12:35,220 --> 00:12:37,850 And let's just call it color display. 191 00:12:39,040 --> 00:12:41,720 Then we'll go to our javascript and select that. 192 00:12:41,890 --> 00:12:50,230 So far color display equals document and we'll to get element by id just for variety sake kid element 193 00:12:50,230 --> 00:12:51,400 by ID. 194 00:12:51,730 --> 00:12:53,940 And it was color display. 195 00:12:54,610 --> 00:12:57,330 And we'll save and make this a little bit bigger. 196 00:12:57,610 --> 00:13:04,640 Save the file and then we want to update color display so that it says this color that we picked. 197 00:13:05,050 --> 00:13:17,880 So that's going to be color display text content equals pick it's color just like that and will refresh. 198 00:13:17,920 --> 00:13:20,500 And now we end up with our color here. 199 00:13:20,500 --> 00:13:21,030 Great. 200 00:13:21,130 --> 00:13:23,280 Let's add the logic now for the click events. 201 00:13:23,350 --> 00:13:28,660 So when I click on one of these squares we want to run some code that's going to figure out which color 202 00:13:28,840 --> 00:13:30,470 the square is that we clicked on. 203 00:13:30,640 --> 00:13:34,350 And once we have that color we're going to compare it to the pix color. 204 00:13:34,360 --> 00:13:35,430 This one right here. 205 00:13:35,740 --> 00:13:40,360 And if they're different We're going to change the background color of that square so that it goes to 206 00:13:40,360 --> 00:13:42,740 the same color as the background of the body. 207 00:13:43,030 --> 00:13:46,930 And if they are the same then that means that the player has one. 208 00:13:46,930 --> 00:13:48,570 And we need to do some special things. 209 00:13:48,640 --> 00:13:52,930 And if they're different that means a player picked the wrong color and will also have to handle that 210 00:13:53,680 --> 00:13:54,320 to start. 211 00:13:54,370 --> 00:13:58,580 Let's add just a plain click event handler that just alerts when we click. 212 00:13:58,870 --> 00:14:03,100 So we're going to add an event handler to every single one of the squares so we can just use the same 213 00:14:03,100 --> 00:14:04,140 loop that we have. 214 00:14:04,360 --> 00:14:13,660 So I'll add a comment here add initial colors to squares and then the next part will be click listeners 215 00:14:15,850 --> 00:14:18,720 two squares. 216 00:14:18,760 --> 00:14:23,700 So another one of these squares I dot add event listener. 217 00:14:24,350 --> 00:14:28,720 It's time for Click and our callback function. 218 00:14:29,860 --> 00:14:37,830 All we'll do is alert quite a square and make sure all six of them will alert us. 219 00:14:37,860 --> 00:14:39,600 All right click the square. 220 00:14:39,610 --> 00:14:44,130 All right it looks like they all work just fine just how they need to. 221 00:14:44,350 --> 00:14:55,950 So now what we need to do is grab color of clicked square and then compare color to pick color. 222 00:14:55,960 --> 00:15:01,560 The variable picture color which we defined appear so we'll start to get that color. 223 00:15:01,840 --> 00:15:06,450 Remember we can use this that refers to the item that was clicked on the square. 224 00:15:06,580 --> 00:15:10,460 So we can say this that style of background. 225 00:15:10,780 --> 00:15:15,060 And let's just do another alert here and let's see what we get. 226 00:15:15,070 --> 00:15:18,310 So if I click on the red one it alerts me. 227 00:15:18,310 --> 00:15:25,510 RG B 2 5 5 0 0 and if I click on assign one R G B 0 2 5 5 2 5 5. 228 00:15:25,720 --> 00:15:26,850 So this is working. 229 00:15:27,220 --> 00:15:34,630 So what we'll do now is save this to a variable we'll just call it clicked color just like that. 230 00:15:35,020 --> 00:15:41,260 And then we're going to write an IF statement to compare Quick's colors so if it's color triple equals 231 00:15:42,390 --> 00:15:48,770 pick the color nice rhyme there if that's the case we will alert correct. 232 00:15:49,590 --> 00:15:55,690 And if they don't match with or else we will alert wrong. 233 00:15:57,240 --> 00:16:00,170 Let's give it a shot refresh. 234 00:16:00,290 --> 00:16:01,390 I click on this one. 235 00:16:01,410 --> 00:16:02,330 Wrong. 236 00:16:02,640 --> 00:16:03,210 Wrong. 237 00:16:03,210 --> 00:16:04,370 And the true test. 238 00:16:04,400 --> 00:16:07,310 I click on the right one it says correct. 239 00:16:07,350 --> 00:16:13,110 So our logic is working even though we don't have any of the random colors in what we do have is an 240 00:16:13,110 --> 00:16:18,600 array of six colors that are hard coded in and we're assigning a color to each square and then we're 241 00:16:18,600 --> 00:16:19,640 picking. 242 00:16:19,650 --> 00:16:25,050 In this case cyan and this will be random of course but we're picking one color that is our answer. 243 00:16:25,320 --> 00:16:30,570 And then we're adding an event listener to every square when the user clicks on that square or any square. 244 00:16:30,570 --> 00:16:34,110 We compare the color of the given square to the picture color if they match. 245 00:16:34,110 --> 00:16:35,010 We do one thing. 246 00:16:35,130 --> 00:16:39,840 If they don't match we do something else in the next video we're going to talk about what we actually 247 00:16:39,840 --> 00:16:40,700 do if they match. 248 00:16:40,710 --> 00:16:42,000 And what we do if they don't match.