Welcome back in this lesson, we're going to have some fun with Don Manipulation because I know that's
what you're here for and I know you enjoy working with and updating some of that DOM content.
And we're going to add in some classes, update some border colors and a whole bunch more really cool
things.
So we've got our correct guests here.
So let's add in one other thing into that element.
So we've got an input element that we're selecting the guests input, and that means that we've got
it within an object format and we can manipulate it so we can update the style.
And there's a whole bunch of options for style properties.
So I'm using brackets and they do have quite a few options here within the dropdown for style properties.
One of the ones that I wanted to use is the border color because it's an input and border color is kind
of neat to use within an input.
So selecting that and updating that as green and we can also update it to read.
If it's incorrect, let's use a ternary operator.
So we're going to call a variable create holder and this is going to be returning back an object.
So we're checking to see if temp guess is higher than whatever the value of game NUM is.
And if it is, what we want to return back is an object as well as an object if it's not a few different
parameters here.
So we've got a color value and this value can be so if it's higher, we can go blue.
And then also maybe a message that we want to have here and just shorten it.
I'll just shorten this to and to see.
And then this is the message that we want to output to the user if it's higher or if it's lower.
So the message is going to be us lower because remember, this is the temp guesses.
The users guess I use the same format for the object if it's wrong.
So this is purple and was higher.
So now we can customize the message that we're sending to the user.
So we've got an object called Holder so we can use that value and we can set the value of the holder
to whatever the color is that's being contained within here.
So so again, gives us a little bit more flexibility and there's a number of ways that you can do this.
So we're setting our border color as well.
And then this is where we are adding in the message.
So this is Holder M is the message that we're sending and this saves us adding in an additional condition
which could have been done as well.
So let's try that out.
And outguess of five was lower to we add some spacing in here.
I always I always forget the spacing.
So let's add that to do a guess of five.
So it's was higher.
So that means that we need a higher guess and six was lower.
Six, so let's do six.
And we guessed it correctly.
So we're outputting the number and that's probably not the best thing to do for the user.
So we can also get rid of that one where we're outputting the number.
It may be output in the console while we're testing.
So adding that into the console log, let's refresh it and try that again.
So was higher and we see that the number is ten.
So if we even go to like eleven and see it's lower and then when we guess the right number, we see
correct.
You guessed ten.
So we have to do some additional handling for the game end and there's going to be some more done manipulation
in there where we can add a style.
We're going to update this button, hide the input so that the player can start again and then give
a message that the player can try again.
Also, we need to track the number of tries that the player has done in order to guess the correct value.
So all of that is still coming up in the next lesson.
So go ahead and add in this element.
Manipulation, values, and there's more to come coming up.