1 00:00:01,000 --> 00:00:03,100 We've now set up our red callbacks. 2 00:00:03,100 --> 00:00:06,390 So now we're going to do the same thing for green and blue as well. 3 00:00:06,490 --> 00:00:12,480 So inside my square screen file I'm going to go down to my second and third color counters on both these 4 00:00:12,490 --> 00:00:19,860 I'm going to give them a little bit of extra space by new lining the J.S. X element like so and then 5 00:00:19,860 --> 00:00:26,070 inside of both them I'm going to define my two prop callbacks on increase and on decrease when I write 6 00:00:26,070 --> 00:00:27,780 these four blue and green. 7 00:00:27,780 --> 00:00:32,640 I just need to make sure that I reference the appropriate center in the appropriate state value so no 8 00:00:32,640 --> 00:00:33,480 longer red. 9 00:00:33,480 --> 00:00:36,890 Instead this one will be blue in the third one will be green. 10 00:00:36,930 --> 00:00:38,310 Guess I'll do on increase 11 00:00:40,980 --> 00:00:47,530 inside there I'll call set blue I'll be blue plus 1 and I'll do on decrease 12 00:00:51,000 --> 00:00:57,200 and that's 1 will be set Blue Lou minus 1. 13 00:00:57,360 --> 00:01:00,270 And then finally we will repeat that same process. 14 00:01:00,280 --> 00:01:01,470 I'll do on increase 15 00:01:05,190 --> 00:01:05,510 set. 16 00:01:05,510 --> 00:01:08,340 Green green plus 1 17 00:01:12,930 --> 00:01:14,130 and on decrease 18 00:01:19,140 --> 00:01:20,850 set green green minus 1 19 00:01:24,140 --> 00:01:24,380 All right. 20 00:01:24,380 --> 00:01:25,660 That looks pretty good. 21 00:01:25,700 --> 00:01:31,000 Now remember we've already hooked up the use of on increase in on decrease inside of color counter. 22 00:01:31,010 --> 00:01:36,710 We only had to do that one time because we only have one color counter component after we hook up those 23 00:01:36,710 --> 00:01:42,610 props one time we can then reuse that component as many times as we wish. 24 00:01:42,640 --> 00:01:44,480 So now we can test this out once more. 25 00:01:44,480 --> 00:01:45,680 I'll say the file. 26 00:01:45,680 --> 00:01:48,820 We don't really have any feedback for red or blue or green right now. 27 00:01:48,890 --> 00:01:53,780 So at present I'm just trying to make sure that I don't see an error message or anti like that so I 28 00:01:53,780 --> 00:01:59,720 should build to press on increase decrease increase decrease in increase decrease and I don't see any 29 00:01:59,720 --> 00:02:01,870 errors inside there whatsoever. 30 00:02:01,870 --> 00:02:02,050 Okay. 31 00:02:02,090 --> 00:02:06,050 So it's looking pretty good so now I think we're ready to actually make use of these different state 32 00:02:06,050 --> 00:02:11,150 values and apply them to some view to give it some background color that we can control with these different 33 00:02:11,150 --> 00:02:13,000 buttons. 34 00:02:13,040 --> 00:02:16,940 So I'm going to go back to my square screen component. 35 00:02:16,940 --> 00:02:22,970 I'm going to create a new view element at the very bottom right above the closing view tag that's all 36 00:02:22,970 --> 00:02:24,130 inside there. 37 00:02:24,280 --> 00:02:26,570 So place a view element right here. 38 00:02:26,580 --> 00:02:28,780 I'm going to give it a style property. 39 00:02:28,970 --> 00:02:30,880 We're gonna pass it a object directly. 40 00:02:30,950 --> 00:02:35,420 So remember that means we have two sets of curly braces the outer set means we're about to reference 41 00:02:35,420 --> 00:02:41,910 some javascript expression the inner set is creating an actual object literal then inside of here we 42 00:02:41,910 --> 00:02:49,470 can set a hardcoded height of about 200 this is do something albeit smaller we'll do 150 and a width 43 00:02:49,470 --> 00:02:57,120 of 1 on 150 now we can create our background color now for our background color. 44 00:02:57,140 --> 00:02:59,510 We're going to once again use a string template. 45 00:02:59,580 --> 00:03:02,060 So that's going to use our back to characters. 46 00:03:02,090 --> 00:03:03,680 No that's not a single quote. 47 00:03:03,680 --> 00:03:07,380 It's a back to character that inside of here we can do our G.B.. 48 00:03:07,560 --> 00:03:13,320 I'll put in my parentheses and then we need to essentially inject our current value for red green and 49 00:03:13,320 --> 00:03:24,650 blue inside the string so we'll do dollar sign clearly race read dollar sign clearly race green dollar 50 00:03:24,650 --> 00:03:26,920 sign clearly brace blue. 51 00:03:27,040 --> 00:03:30,980 And notice how I've got the commas in between each of those different values that we're throwing into 52 00:03:30,980 --> 00:03:33,620 that string. 53 00:03:33,720 --> 00:03:34,890 All right so that should be it. 54 00:03:34,920 --> 00:03:37,450 I think we're now ready to do a final test. 55 00:03:37,450 --> 00:03:38,840 It's all save this file. 56 00:03:38,850 --> 00:03:43,950 Notice how when I save it my code jumps again that once again is my code reformat or everything you 57 00:03:43,950 --> 00:03:47,880 see here is a hundred percent equivalent to what I had before. 58 00:03:47,890 --> 00:03:48,220 All right. 59 00:03:48,250 --> 00:03:54,390 Now I'll go back over open up my square demo by default are starting values for the square hour 0 0 60 00:03:54,390 --> 00:03:58,160 0 which causes the square to appear as just black. 61 00:03:58,170 --> 00:04:00,630 So now I can add in some increased red. 62 00:04:00,810 --> 00:04:06,730 And it's going to be really slow because we're changing it by one value at a time. 63 00:04:06,830 --> 00:04:11,330 But if I tap this thing a whole bunch you're going to eventually start to see the thing turn a little 64 00:04:11,330 --> 00:04:13,110 bit more red. 65 00:04:13,110 --> 00:04:18,490 And yeah after I could get many many times it's definitely turning into the color red right here. 66 00:04:18,500 --> 00:04:23,510 Well testing this out I'm happy it works but I'm immediately thinking that we need to make a change 67 00:04:23,510 --> 00:04:24,800 to our application. 68 00:04:24,800 --> 00:04:29,900 I think that rather than incrementing each of these different color values by one every time maybe we 69 00:04:29,900 --> 00:04:36,980 should instead change it by like 10 or 20 or even 15 so going to go around to all my different callbacks 70 00:04:36,980 --> 00:04:45,380 here I could decide to just update all these last one minus ones to like 10 or 15 or alternatively we 71 00:04:45,380 --> 00:04:50,420 could create a constant value at the top of the file that would we could use in place the one right 72 00:04:50,420 --> 00:04:56,040 here and that means if we ever wanted to change how much we adjust these color values by we would only 73 00:04:56,040 --> 00:04:58,520 have to adjust that one constant value. 74 00:04:58,650 --> 00:05:01,170 Let's try doing that at okay. 75 00:05:01,200 --> 00:05:09,870 So at the top of the file above my component I'll create a new constant value called about color increment. 76 00:05:09,910 --> 00:05:14,920 You'll notice I'm using all capitals here with an underscore convention anytime we make a true constant 77 00:05:14,920 --> 00:05:20,290 value that we want to be some like configuration option inside of a component that is not a prop we'll 78 00:05:20,290 --> 00:05:22,420 usually use this kind of syntax right here. 79 00:05:22,510 --> 00:05:26,530 There's absolutely no different what's no difference whatsoever in creating this variable. 80 00:05:26,530 --> 00:05:32,220 This is just assigned to other engineers that this is some very special variable I'll try starting off 81 00:05:32,220 --> 00:05:38,760 with like a starting value 15 so now I can go back around to each of these ones that I have. 82 00:05:38,760 --> 00:05:48,600 Delete them and replace it with color increment so I'll do that for every value of 1. 83 00:05:48,630 --> 00:05:55,000 There we go so I'll save this all go to Square demo again. 84 00:05:55,100 --> 00:05:56,860 Now if I tap on increased red. 85 00:05:56,890 --> 00:05:57,190 Yeah. 86 00:05:57,200 --> 00:06:03,910 Now it's definitely getting red a lot faster and I can do a lot of red and blue to turn it purple and 87 00:06:03,910 --> 00:06:06,700 if I add in some green I'm going to turn white. 88 00:06:06,750 --> 00:06:12,360 Yep I can now decrease some green decrease blue. 89 00:06:12,380 --> 00:06:13,640 Same thing for red. 90 00:06:13,910 --> 00:06:16,910 And now I'm getting more towards the green side of things. 91 00:06:16,910 --> 00:06:17,110 Okay. 92 00:06:17,120 --> 00:06:18,940 So it definitely looks good. 93 00:06:19,040 --> 00:06:21,390 There's just one last small issue inside of here. 94 00:06:21,410 --> 00:06:23,050 Remember we saw in that console log. 95 00:06:23,060 --> 00:06:28,500 If we tap on decrease enough our color value is going to ease eventually go negative. 96 00:06:28,520 --> 00:06:32,230 Chances are we don't want to have any negative color values inside of her app. 97 00:06:32,300 --> 00:06:36,890 So we should probably put in some checks somewhere to make sure that if we ever tried to decrease a 98 00:06:36,890 --> 00:06:42,500 color value beneath zero or increase it above 255 Well we should probably cap that. 99 00:06:42,740 --> 00:06:44,780 Right now it's clearly not going to raise an error. 100 00:06:44,810 --> 00:06:50,090 If we go into the negatives in color but the downside here is that if I type decrease red many times 101 00:06:50,120 --> 00:06:55,280 I'm probably now like at a red value of negative 200 or something like that which means I would have 102 00:06:55,280 --> 00:07:00,680 to tab increased red many many times before I even start to see a change up here. 103 00:07:00,680 --> 00:07:03,530 And that's probably not a very good user experience. 104 00:07:03,530 --> 00:07:07,880 So let's take another quick pause in the next video we'll figure out some way to kind of cap the value 105 00:07:08,150 --> 00:07:09,860 of red blue and green. 106 00:07:09,860 --> 00:07:13,530 Make sure there's some minimum value and maximum value as well. 107 00:07:13,790 --> 00:07:15,740 So quick pause we'll take care of that in the next video.