Our application is definitely working but as we mentioned in the last video a user can potentially change
the value of red green or blue very far beneath zero or very far above 255.
That's not a very great user experience because then if they wanted to then change the color once again
and actually see a visible result they would have to tap on a button many many times to get it beneath
255 again or above zero.
So in this video we're going to make sure that we put in a check before we ever change one of our colors
inside of any of these different callbacks.
We're going to make sure that changing the value will not increment or increase the value above 255
or beneath zero.
Now there are many different ways that we could approach this problem going to first show you one way.
That's pretty darn obvious on how we could approach this but maybe it's not going to be the best way
of solving it.
Nonetheless I want to show you the most obvious way and tell you why you might not want to use this
approach.
So here's the obvious way we could find all of our different color counter functions and find all they're
different on increase in on decrease callbacks.
We could then expand the callbacks we're passing in so I'm going to add in a set of curly braces around
my function body here for the first one.
The reason I'm adding in that extra set of curly braces so there is the first extra one right there.
And the second extra one right there is that I want to add in some amount of code more than what we
currently have inside of here.
If an arrow function just has a single expression as we do right here we do not have to have those curly
braces but because I want to add in some more logic inside of here.
Well now we need to add in the curly braces.
OK.
So now inside of here we could add in a if statement check right before we call set red.
So I could say if red plus color increment would end up with a value greater than 255 then return early
so essentially hey if we're gonna go above 255.
Get me out of here.
I don't want to actually call set red.
And we could add in a very similar check too on decrease but make sure that if we subtract color increment
we don't go beneath zero.
Now why is this not a great approach.
It would definitely work.
I can tell you that but I would say it's not a very good approach because if we add in all this extra
logic to every single callback inside this file not only are we going to have a lot of pretty repeated
code but we're also going to make it really hard to read the J.S. exit we're returning here because
not only are we putting in some amount of code related to the different elements we want to show on
the screen but we're also mixing in a ton of business logic.
So it would become pretty challenging to really understand what's going on inside of this entire component.
So I think that although this would work it's probably not the best solution.
So going to undo this change.
We're going to take a look at maybe a slightly better way of handling this.
I think that maybe a better way to deal with this kind of validation logic without adding in a ton of
logic to all of our J is X directly would be to make a little helper function right above our j ust
X block.
So right here I'm going to make a new helper function called set color so we're going to use this set
color function to decide what color we want to update.
Well then do a quick validation on the update.
And then if we don't go above 250 five or below zero then we'll go ahead and actually make the update.
I want to try using the same set color function for all three of our different colors red green and
blue so to make sure that we can handle all three different colors.
I think the first argument to his function right here should be some string that describes what value
we're trying to change.
I'm going to refer to that argument as color so just to be really clear I'll put a comment to myself
right here.
Color is going to be equal to red green or blue as a string.
So we're going to use that to decide exactly what color we're trying to change then as a second argument
I'll add in.
Change change right here is going to be the amount that we want to change that color by.
So essentially either plus color increment which would mean plus 15 because that's what color increment
is equal to or minus color increment which be negative 15.
So I going to add in a second comment here to myself and say change is going to be essentially either
plus 15 or minus 15.
Now at this function.
We can inspect color.
We can decide whether or not we're trying to update red green or blue.
And then we can see if the change would push us above 255 or beneath zero.
Let me show you what that would look like.
We could say if color equals red then inside of here we know exactly what we're trying to change.
So we can add in some logic inside this if statement to specifically check the value of red.
So now inside of here we could say if red plus change would be greater than 255 or if red minus change
would be less than zero excuse me the second right here.
I just made a mistake.
That should be red.
Plus change as well.
The reason is plus change is that we're going to have change right here b either plus 15 or minus 15.
So red plus and negative 15 would decrease our value of red.
So we want to have red plus change grayer than two fifty five and red plus trait change.
Great and minus less than zero.
There we go.
So if that would push us out of our bounds right here then we don't want to make this update and we
could simply return early otherwise if we get past that check so we could maybe add in an L statement
right here.
So if we get past that check then we can go ahead and commit the update in which case I would call set
red and I would do red plus change.
All right.
So now we can use this set color function in place of set red right here.
Let's try it testing out red first and we'll add in some additional cases to deal with green and blue
as well so to make use of that new function I would call instead of set red.
I would do set color I would pass in red as an argument and then do simply color increment and I can
update on decrease as well.
So set color red.
And this time we'll do negative 1 times color increment.
Now do double check make sure you've got set color on both these function calls when I wrote it out.
This example I accidently put set red here on the second one.
That was a mistake on my part and I very quickly saw a message on my application.
So make sure you've got set color on both them.
Let's now save this and test it out.
I'll go back over to square demo now increase my red and at a certain point I can still see that it's
like definitely very red here in if I still tap it's not getting any more red.
So at this point time I'm probably at my 255 limit.
If I start to click on decrease Red I'll see that changes color right away something is pretty obvious
so we definitely capture the value of red there.
And once again if I go very far past black so I'm definitely black.
Right here red is definitely zero at this point or very close to zero.
And if I keep tapping on decrease red I in theory could be going down very far beneath zero.
But we've got some logic to cap the negative value of red.
So if I now start to tap on increased red it becomes red right again as well.
So I think that our logic right here is working out pretty well there's just one more little issue although
we've got some working logic right here.
Well it's kind of hard to read what's going on.
So there actually is a structure or a little bit of syntax we could use inside of javascript to clean
up the code we have here just a little bit and make it a little more obvious what's going on.
Let's take a quick pause here.
When we come back the next video we're going to add in a check for green and blue.
And we'll also clean up the code that we're writing here and use a slightly more appropriate structure
than what we currently have.
So a quick pause and we'll take care of that in the next video.