1 00:00:01,060 --> 00:00:06,040 Our application is definitely working but as we mentioned in the last video a user can potentially change 2 00:00:06,040 --> 00:00:11,700 the value of red green or blue very far beneath zero or very far above 255. 3 00:00:11,710 --> 00:00:16,120 That's not a very great user experience because then if they wanted to then change the color once again 4 00:00:16,150 --> 00:00:20,860 and actually see a visible result they would have to tap on a button many many times to get it beneath 5 00:00:20,860 --> 00:00:23,520 255 again or above zero. 6 00:00:23,530 --> 00:00:27,730 So in this video we're going to make sure that we put in a check before we ever change one of our colors 7 00:00:27,940 --> 00:00:30,100 inside of any of these different callbacks. 8 00:00:30,100 --> 00:00:35,910 We're going to make sure that changing the value will not increment or increase the value above 255 9 00:00:35,950 --> 00:00:37,480 or beneath zero. 10 00:00:37,760 --> 00:00:42,490 Now there are many different ways that we could approach this problem going to first show you one way. 11 00:00:42,490 --> 00:00:47,080 That's pretty darn obvious on how we could approach this but maybe it's not going to be the best way 12 00:00:47,080 --> 00:00:47,860 of solving it. 13 00:00:48,370 --> 00:00:52,720 Nonetheless I want to show you the most obvious way and tell you why you might not want to use this 14 00:00:52,720 --> 00:00:54,070 approach. 15 00:00:54,130 --> 00:00:59,260 So here's the obvious way we could find all of our different color counter functions and find all they're 16 00:00:59,260 --> 00:01:02,740 different on increase in on decrease callbacks. 17 00:01:02,740 --> 00:01:09,150 We could then expand the callbacks we're passing in so I'm going to add in a set of curly braces around 18 00:01:09,180 --> 00:01:11,630 my function body here for the first one. 19 00:01:11,760 --> 00:01:16,240 The reason I'm adding in that extra set of curly braces so there is the first extra one right there. 20 00:01:16,470 --> 00:01:21,900 And the second extra one right there is that I want to add in some amount of code more than what we 21 00:01:21,900 --> 00:01:23,480 currently have inside of here. 22 00:01:23,520 --> 00:01:28,230 If an arrow function just has a single expression as we do right here we do not have to have those curly 23 00:01:28,230 --> 00:01:31,500 braces but because I want to add in some more logic inside of here. 24 00:01:31,680 --> 00:01:34,380 Well now we need to add in the curly braces. 25 00:01:34,570 --> 00:01:34,820 OK. 26 00:01:34,830 --> 00:01:40,600 So now inside of here we could add in a if statement check right before we call set red. 27 00:01:40,800 --> 00:01:51,510 So I could say if red plus color increment would end up with a value greater than 255 then return early 28 00:01:53,030 --> 00:01:55,460 so essentially hey if we're gonna go above 255. 29 00:01:55,520 --> 00:01:56,350 Get me out of here. 30 00:01:56,370 --> 00:01:58,360 I don't want to actually call set red. 31 00:01:58,570 --> 00:02:03,390 And we could add in a very similar check too on decrease but make sure that if we subtract color increment 32 00:02:03,420 --> 00:02:06,090 we don't go beneath zero. 33 00:02:06,090 --> 00:02:07,730 Now why is this not a great approach. 34 00:02:07,740 --> 00:02:08,520 It would definitely work. 35 00:02:08,520 --> 00:02:13,140 I can tell you that but I would say it's not a very good approach because if we add in all this extra 36 00:02:13,140 --> 00:02:18,660 logic to every single callback inside this file not only are we going to have a lot of pretty repeated 37 00:02:18,660 --> 00:02:24,390 code but we're also going to make it really hard to read the J.S. exit we're returning here because 38 00:02:24,390 --> 00:02:28,860 not only are we putting in some amount of code related to the different elements we want to show on 39 00:02:28,860 --> 00:02:32,300 the screen but we're also mixing in a ton of business logic. 40 00:02:32,460 --> 00:02:38,100 So it would become pretty challenging to really understand what's going on inside of this entire component. 41 00:02:38,120 --> 00:02:42,240 So I think that although this would work it's probably not the best solution. 42 00:02:42,360 --> 00:02:43,770 So going to undo this change. 43 00:02:43,970 --> 00:02:48,610 We're going to take a look at maybe a slightly better way of handling this. 44 00:02:48,760 --> 00:02:54,000 I think that maybe a better way to deal with this kind of validation logic without adding in a ton of 45 00:02:54,000 --> 00:02:59,160 logic to all of our J is X directly would be to make a little helper function right above our j ust 46 00:02:59,160 --> 00:03:00,410 X block. 47 00:03:00,410 --> 00:03:07,290 So right here I'm going to make a new helper function called set color so we're going to use this set 48 00:03:07,290 --> 00:03:10,680 color function to decide what color we want to update. 49 00:03:10,740 --> 00:03:13,170 Well then do a quick validation on the update. 50 00:03:13,170 --> 00:03:18,280 And then if we don't go above 250 five or below zero then we'll go ahead and actually make the update. 51 00:03:18,600 --> 00:03:23,760 I want to try using the same set color function for all three of our different colors red green and 52 00:03:23,760 --> 00:03:27,720 blue so to make sure that we can handle all three different colors. 53 00:03:27,720 --> 00:03:33,480 I think the first argument to his function right here should be some string that describes what value 54 00:03:33,480 --> 00:03:34,950 we're trying to change. 55 00:03:35,160 --> 00:03:40,290 I'm going to refer to that argument as color so just to be really clear I'll put a comment to myself 56 00:03:40,290 --> 00:03:41,010 right here. 57 00:03:41,040 --> 00:03:47,120 Color is going to be equal to red green or blue as a string. 58 00:03:47,250 --> 00:03:53,240 So we're going to use that to decide exactly what color we're trying to change then as a second argument 59 00:03:53,930 --> 00:03:55,060 I'll add in. 60 00:03:55,100 --> 00:03:59,730 Change change right here is going to be the amount that we want to change that color by. 61 00:04:00,000 --> 00:04:05,690 So essentially either plus color increment which would mean plus 15 because that's what color increment 62 00:04:05,690 --> 00:04:10,910 is equal to or minus color increment which be negative 15. 63 00:04:10,910 --> 00:04:16,800 So I going to add in a second comment here to myself and say change is going to be essentially either 64 00:04:17,010 --> 00:04:20,930 plus 15 or minus 15. 65 00:04:21,010 --> 00:04:22,090 Now at this function. 66 00:04:22,090 --> 00:04:23,810 We can inspect color. 67 00:04:24,010 --> 00:04:27,500 We can decide whether or not we're trying to update red green or blue. 68 00:04:27,670 --> 00:04:31,900 And then we can see if the change would push us above 255 or beneath zero. 69 00:04:31,930 --> 00:04:33,760 Let me show you what that would look like. 70 00:04:33,880 --> 00:04:39,940 We could say if color equals red then inside of here we know exactly what we're trying to change. 71 00:04:40,000 --> 00:04:44,660 So we can add in some logic inside this if statement to specifically check the value of red. 72 00:04:45,240 --> 00:04:55,770 So now inside of here we could say if red plus change would be greater than 255 or if red minus change 73 00:04:55,890 --> 00:05:01,030 would be less than zero excuse me the second right here. 74 00:05:01,030 --> 00:05:01,910 I just made a mistake. 75 00:05:01,960 --> 00:05:02,590 That should be red. 76 00:05:02,590 --> 00:05:04,120 Plus change as well. 77 00:05:04,120 --> 00:05:10,650 The reason is plus change is that we're going to have change right here b either plus 15 or minus 15. 78 00:05:10,690 --> 00:05:15,210 So red plus and negative 15 would decrease our value of red. 79 00:05:15,250 --> 00:05:18,750 So we want to have red plus change grayer than two fifty five and red plus trait change. 80 00:05:18,760 --> 00:05:20,440 Great and minus less than zero. 81 00:05:20,440 --> 00:05:21,090 There we go. 82 00:05:22,110 --> 00:05:26,520 So if that would push us out of our bounds right here then we don't want to make this update and we 83 00:05:26,520 --> 00:05:32,270 could simply return early otherwise if we get past that check so we could maybe add in an L statement 84 00:05:32,270 --> 00:05:33,210 right here. 85 00:05:33,290 --> 00:05:38,330 So if we get past that check then we can go ahead and commit the update in which case I would call set 86 00:05:38,330 --> 00:05:44,000 red and I would do red plus change. 87 00:05:44,020 --> 00:05:44,300 All right. 88 00:05:44,300 --> 00:05:49,690 So now we can use this set color function in place of set red right here. 89 00:05:49,690 --> 00:05:54,550 Let's try it testing out red first and we'll add in some additional cases to deal with green and blue 90 00:05:54,550 --> 00:06:00,210 as well so to make use of that new function I would call instead of set red. 91 00:06:00,210 --> 00:06:09,640 I would do set color I would pass in red as an argument and then do simply color increment and I can 92 00:06:09,640 --> 00:06:11,380 update on decrease as well. 93 00:06:11,380 --> 00:06:14,970 So set color red. 94 00:06:15,080 --> 00:06:21,550 And this time we'll do negative 1 times color increment. 95 00:06:21,600 --> 00:06:25,920 Now do double check make sure you've got set color on both these function calls when I wrote it out. 96 00:06:25,930 --> 00:06:29,340 This example I accidently put set red here on the second one. 97 00:06:29,350 --> 00:06:33,790 That was a mistake on my part and I very quickly saw a message on my application. 98 00:06:33,790 --> 00:06:37,030 So make sure you've got set color on both them. 99 00:06:37,090 --> 00:06:39,470 Let's now save this and test it out. 100 00:06:39,480 --> 00:06:45,480 I'll go back over to square demo now increase my red and at a certain point I can still see that it's 101 00:06:45,480 --> 00:06:49,380 like definitely very red here in if I still tap it's not getting any more red. 102 00:06:49,410 --> 00:06:53,030 So at this point time I'm probably at my 255 limit. 103 00:06:53,250 --> 00:06:58,800 If I start to click on decrease Red I'll see that changes color right away something is pretty obvious 104 00:06:58,810 --> 00:07:01,020 so we definitely capture the value of red there. 105 00:07:01,170 --> 00:07:04,710 And once again if I go very far past black so I'm definitely black. 106 00:07:04,710 --> 00:07:07,880 Right here red is definitely zero at this point or very close to zero. 107 00:07:07,980 --> 00:07:13,970 And if I keep tapping on decrease red I in theory could be going down very far beneath zero. 108 00:07:14,160 --> 00:07:16,640 But we've got some logic to cap the negative value of red. 109 00:07:16,650 --> 00:07:21,740 So if I now start to tap on increased red it becomes red right again as well. 110 00:07:21,810 --> 00:07:27,510 So I think that our logic right here is working out pretty well there's just one more little issue although 111 00:07:27,510 --> 00:07:29,510 we've got some working logic right here. 112 00:07:29,520 --> 00:07:31,890 Well it's kind of hard to read what's going on. 113 00:07:32,130 --> 00:07:38,010 So there actually is a structure or a little bit of syntax we could use inside of javascript to clean 114 00:07:38,010 --> 00:07:42,540 up the code we have here just a little bit and make it a little more obvious what's going on. 115 00:07:42,540 --> 00:07:43,610 Let's take a quick pause here. 116 00:07:43,620 --> 00:07:47,870 When we come back the next video we're going to add in a check for green and blue. 117 00:07:47,870 --> 00:07:52,080 And we'll also clean up the code that we're writing here and use a slightly more appropriate structure 118 00:07:52,320 --> 00:07:53,730 than what we currently have. 119 00:07:53,750 --> 00:07:55,830 So a quick pause and we'll take care of that in the next video.