1 00:00:00,910 --> 00:00:05,350 In this video we're going to make sure that our color screen component has a state variable it can also 2 00:00:05,350 --> 00:00:07,240 generate a color randomly. 3 00:00:07,240 --> 00:00:11,800 Before we do that let's just make sure that we understand how we can make a view or some kind of element 4 00:00:12,070 --> 00:00:16,770 that's going to display like a plain box underneath it with some given color. 5 00:00:16,780 --> 00:00:17,070 OK. 6 00:00:17,200 --> 00:00:21,630 So to get started I'm going to come to my color screen underneath my button. 7 00:00:21,640 --> 00:00:27,640 I'm going to add in a view element and to the thing I'm going to hard code a style I'm to put in a manual 8 00:00:27,670 --> 00:00:28,880 object inside of here. 9 00:00:28,900 --> 00:00:33,440 Now why are we adding in a style directly to this view rather than creating it inside of our style sheets. 10 00:00:33,820 --> 00:00:38,470 We're adding it indirectly because we want to generate this style object on the fly. 11 00:00:38,530 --> 00:00:43,150 We don't know exactly what style we want to apply just yet because we're going to be randomly generating 12 00:00:43,150 --> 00:00:49,330 the color so inside the style object I'm going to first give this view a height I'll give it a fixed 13 00:00:49,330 --> 00:00:55,720 height of 100 a fixed width of one hundred and I'll give it a background color. 14 00:00:55,720 --> 00:01:00,600 And that's where our color is going to come from so I'll give this thing an hour G.B. value. 15 00:01:00,600 --> 00:01:07,140 Once again we're going to designate a 0 0 0 or whatever color values we want for our G.B.. 16 00:01:07,140 --> 00:01:16,200 So in this case I'll do like zero to fifty five and 0 so I'll save that and then back over here I'll 17 00:01:16,200 --> 00:01:20,330 go to my color demo and now I can see a bright green box. 18 00:01:20,400 --> 00:01:25,200 So in this case I said essentially that two fifty five means give me a lot of green and don't give me 19 00:01:25,230 --> 00:01:30,840 any red or any blue at all so that's how we're going to show one of these different boxes. 20 00:01:30,840 --> 00:01:35,160 And as you can see the only thing that we really need to generate on the fly is that string right there 21 00:01:36,330 --> 00:01:38,010 before worrying about state too much. 22 00:01:38,010 --> 00:01:42,300 Let's try to create a little helper function inside this file that's going to allow us to generate a 23 00:01:42,300 --> 00:01:47,690 random string like that or I should say a string with that with some random colors inside of it. 24 00:01:47,700 --> 00:01:53,700 So underneath my component definition I'm going to create a new helper function called Random r G.B. 25 00:01:56,240 --> 00:02:03,520 than inside of you're going to generate a random value for red or green and blue so I'll say const red 26 00:02:03,900 --> 00:02:06,410 will be math dot random. 27 00:02:06,420 --> 00:02:14,280 So that's going to give us a random number between 0 and 1 0 multiplied by 256 normally RG values scale 28 00:02:14,280 --> 00:02:19,980 from 0 to 255 but we'll watch what we do here we're going to multiply by 256 that will give us a value 29 00:02:20,010 --> 00:02:30,130 all the way between 0 and 256 and I'll do a math dot floor like so so in the end we should end up between 30 00:02:30,130 --> 00:02:32,060 0 and 255. 31 00:02:32,230 --> 00:02:38,680 Technically we could end up with a 256 year if we got essentially a exact one out of math dot random 32 00:02:38,980 --> 00:02:41,720 but we're essentially not gonna worry about that. 33 00:02:41,750 --> 00:02:49,720 Now I'm going to do this three times one for red one for green and one for blue. 34 00:02:49,810 --> 00:02:55,310 Then after that I want to return a template string a template string is formed with back ticks. 35 00:02:55,330 --> 00:03:01,260 So that's not a single quote right there that's a back to character and then inside there I'll say G.B. 36 00:03:02,250 --> 00:03:07,500 and then I want to essentially inject or interpolate these variables red green and blue to do so I'll 37 00:03:07,500 --> 00:03:09,210 put in a dollar sign. 38 00:03:09,210 --> 00:03:10,340 Curly braces. 39 00:03:10,500 --> 00:03:18,130 And then inside there I'll put red then a comma another set of curly braces with a dollar sign and Green 40 00:03:18,820 --> 00:03:21,430 another comma and then one more set in blue. 41 00:03:21,430 --> 00:03:28,540 Like so now finally we can make use of this random RG function by calling it from random color right 42 00:03:28,540 --> 00:03:35,330 here or see me in background color so instead of the hardcoded RG b value I'll still I'll instead call 43 00:03:35,570 --> 00:03:39,450 random R B okay. 44 00:03:39,490 --> 00:03:41,270 Let's save this once again. 45 00:03:41,270 --> 00:03:45,730 And now if I go back to my color demo I should see a random color on here. 46 00:03:45,730 --> 00:03:52,480 If I refresh my application if you're on the simulator you can hit command R or if you're on Android 47 00:03:52,510 --> 00:03:55,960 you can do simply are going to do that right now. 48 00:03:55,960 --> 00:04:00,790 If you're on a physical device you can shake the device and there will be an option that appears that 49 00:04:00,790 --> 00:04:03,640 says refresh or restart application. 50 00:04:03,640 --> 00:04:08,460 So once we do that we can then click on go to color demo again and we'll now see a very different color 51 00:04:08,460 --> 00:04:10,150 up here on here. 52 00:04:10,260 --> 00:04:10,470 OK. 53 00:04:10,480 --> 00:04:13,990 So now we clearly have the ability to generate some random colors. 54 00:04:14,000 --> 00:04:18,130 It's another classic we need to do is make sure that we initialize our piece of state inside of our 55 00:04:18,130 --> 00:04:19,660 color screen function. 56 00:04:19,750 --> 00:04:24,370 We're going to make sure that we add a new random color to that piece of states every time a user taps 57 00:04:24,370 --> 00:04:25,340 on that button. 58 00:04:25,360 --> 00:04:26,820 Let's take care of that in the next video.