1
00:00:00,180 --> 00:00:04,500
Welcome back in this lesson, we're going to have some fun with Don Manipulation because I know that's

2
00:00:04,500 --> 00:00:09,960
what you're here for and I know you enjoy working with and updating some of that DOM content.

3
00:00:10,290 --> 00:00:15,900
And we're going to add in some classes, update some border colors and a whole bunch more really cool

4
00:00:15,900 --> 00:00:16,320
things.

5
00:00:16,510 --> 00:00:18,810
So we've got our correct guests here.

6
00:00:18,990 --> 00:00:22,260
So let's add in one other thing into that element.

7
00:00:22,410 --> 00:00:27,390
So we've got an input element that we're selecting the guests input, and that means that we've got

8
00:00:27,390 --> 00:00:31,440
it within an object format and we can manipulate it so we can update the style.

9
00:00:31,590 --> 00:00:34,400
And there's a whole bunch of options for style properties.

10
00:00:34,620 --> 00:00:40,310
So I'm using brackets and they do have quite a few options here within the dropdown for style properties.

11
00:00:40,710 --> 00:00:45,870
One of the ones that I wanted to use is the border color because it's an input and border color is kind

12
00:00:45,870 --> 00:00:47,520
of neat to use within an input.

13
00:00:47,880 --> 00:00:54,210
So selecting that and updating that as green and we can also update it to read.

14
00:00:54,210 --> 00:00:57,150
If it's incorrect, let's use a ternary operator.

15
00:00:57,150 --> 00:01:02,340
So we're going to call a variable create holder and this is going to be returning back an object.

16
00:01:02,580 --> 00:01:10,890
So we're checking to see if temp guess is higher than whatever the value of game NUM is.

17
00:01:11,370 --> 00:01:17,670
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

18
00:01:17,670 --> 00:01:18,510
parameters here.

19
00:01:18,520 --> 00:01:25,210
So we've got a color value and this value can be so if it's higher, we can go blue.

20
00:01:25,230 --> 00:01:28,710
And then also maybe a message that we want to have here and just shorten it.

21
00:01:28,710 --> 00:01:31,230
I'll just shorten this to and to see.

22
00:01:31,380 --> 00:01:36,930
And then this is the message that we want to output to the user if it's higher or if it's lower.

23
00:01:37,080 --> 00:01:42,180
So the message is going to be us lower because remember, this is the temp guesses.

24
00:01:42,180 --> 00:01:47,300
The users guess I use the same format for the object if it's wrong.

25
00:01:47,790 --> 00:01:50,750
So this is purple and was higher.

26
00:01:51,150 --> 00:01:55,140
So now we can customize the message that we're sending to the user.

27
00:01:55,140 --> 00:02:02,790
So we've got an object called Holder so we can use that value and we can set the value of the holder

28
00:02:02,790 --> 00:02:06,810
to whatever the color is that's being contained within here.

29
00:02:07,050 --> 00:02:11,940
So so again, gives us a little bit more flexibility and there's a number of ways that you can do this.

30
00:02:11,940 --> 00:02:14,480
So we're setting our border color as well.

31
00:02:14,490 --> 00:02:16,510
And then this is where we are adding in the message.

32
00:02:16,530 --> 00:02:22,890
So this is Holder M is the message that we're sending and this saves us adding in an additional condition

33
00:02:22,920 --> 00:02:24,390
which could have been done as well.

34
00:02:25,230 --> 00:02:26,490
So let's try that out.

35
00:02:26,490 --> 00:02:31,440
And outguess of five was lower to we add some spacing in here.

36
00:02:31,470 --> 00:02:33,390
I always I always forget the spacing.

37
00:02:33,390 --> 00:02:35,820
So let's add that to do a guess of five.

38
00:02:36,090 --> 00:02:37,290
So it's was higher.

39
00:02:37,290 --> 00:02:41,730
So that means that we need a higher guess and six was lower.

40
00:02:41,730 --> 00:02:43,890
Six, so let's do six.

41
00:02:43,890 --> 00:02:45,090
And we guessed it correctly.

42
00:02:45,090 --> 00:02:49,110
So we're outputting the number and that's probably not the best thing to do for the user.

43
00:02:49,320 --> 00:02:52,560
So we can also get rid of that one where we're outputting the number.

44
00:02:52,680 --> 00:02:55,170
It may be output in the console while we're testing.

45
00:02:55,260 --> 00:02:59,460
So adding that into the console log, let's refresh it and try that again.

46
00:02:59,670 --> 00:03:02,460
So was higher and we see that the number is ten.

47
00:03:02,610 --> 00:03:07,590
So if we even go to like eleven and see it's lower and then when we guess the right number, we see

48
00:03:07,770 --> 00:03:08,280
correct.

49
00:03:08,280 --> 00:03:09,080
You guessed ten.

50
00:03:09,090 --> 00:03:14,760
So we have to do some additional handling for the game end and there's going to be some more done manipulation

51
00:03:14,760 --> 00:03:16,350
in there where we can add a style.

52
00:03:16,350 --> 00:03:21,360
We're going to update this button, hide the input so that the player can start again and then give

53
00:03:21,360 --> 00:03:23,640
a message that the player can try again.

54
00:03:23,760 --> 00:03:30,360
Also, we need to track the number of tries that the player has done in order to guess the correct value.

55
00:03:30,600 --> 00:03:33,000
So all of that is still coming up in the next lesson.

56
00:03:33,150 --> 00:03:35,190
So go ahead and add in this element.

57
00:03:35,190 --> 00:03:37,890
Manipulation, values, and there's more to come coming up.