1 00:00:09,560 --> 00:00:15,140 Hey, everyone, in this video, I'm going to solve the challenge I've proposed in the previous lesson. 2 00:00:15,320 --> 00:00:18,800 So here we need to use jury and events. 3 00:00:18,950 --> 00:00:24,310 If we go up, we can see that we have a few events we can use in this case. 4 00:00:24,590 --> 00:00:30,020 So for this challenge, I would use something like the key press or key up. 5 00:00:30,320 --> 00:00:35,150 But we know that we can also use the change event for form fields. 6 00:00:35,390 --> 00:00:38,800 So let's try to solve this using the change event. 7 00:00:39,470 --> 00:00:43,940 So going down here, the idea of this element is full name. 8 00:00:44,360 --> 00:00:47,930 So let's selected and set the change event. 9 00:00:54,160 --> 00:00:58,960 So this is the idee and now the name of the event is change. 10 00:01:00,520 --> 00:01:06,790 Open and closed parentheses, semicolon, now let's pass the function inside here. 11 00:01:10,800 --> 00:01:17,460 And now, before we think about the logic of hiding the button again, if the feud is empty, let's 12 00:01:17,460 --> 00:01:19,720 just make it show to get started. 13 00:01:20,130 --> 00:01:29,490 So here there's a button with the idea of submit and we want to show it so we know that we can use squarest 14 00:01:29,490 --> 00:01:30,870 method called show. 15 00:01:31,850 --> 00:01:35,420 So the submit and we want to show it. 16 00:01:36,370 --> 00:01:40,540 Let's do it like this, save this, refresh the page. 17 00:01:41,830 --> 00:01:48,970 Now, I just went inside it, and when I type something, so I'm typing something and nothing is happening 18 00:01:49,840 --> 00:01:56,050 now let's click outside of the feud and now we can see that the button appeared. 19 00:01:56,350 --> 00:01:57,400 So this is normal. 20 00:01:57,400 --> 00:02:03,370 When you are doing a work like this, you should test which event is going to fit better. 21 00:02:03,430 --> 00:02:09,700 So in this case, I didn't like the change event because it only detects the change when I click out 22 00:02:09,700 --> 00:02:11,620 of it and this is not what I want. 23 00:02:11,770 --> 00:02:15,750 So when I write the first letter, I want to see the button. 24 00:02:15,760 --> 00:02:21,520 So instead of using the change event, let's try to use the key down event. 25 00:02:21,710 --> 00:02:23,040 So going to the code. 26 00:02:23,050 --> 00:02:26,320 So instead of change, let's use the key down. 27 00:02:28,150 --> 00:02:31,180 Saving this refreshing the page. 28 00:02:32,620 --> 00:02:37,810 Now, I just clicked inside and I'm going to press a key of my keyboard. 29 00:02:38,950 --> 00:02:46,360 And now we can see that this is working better, but now I just erased what I had here and in this case, 30 00:02:46,360 --> 00:02:48,810 I want to hit the button again. 31 00:02:48,820 --> 00:02:50,150 So how do we do this? 32 00:02:50,170 --> 00:02:56,350 Well, we know that we can see what's inside here, what's written inside this field using the wall 33 00:02:56,560 --> 00:02:57,220 method. 34 00:02:59,660 --> 00:03:06,190 So let's use an if statement and to make this cooler and shorter, let's use the ternary. 35 00:03:06,200 --> 00:03:10,700 If so, what we are going to do here is just getting full name. 36 00:03:17,710 --> 00:03:24,720 That vow and if we get an empty string, this is going to evaluate as false. 37 00:03:25,240 --> 00:03:28,330 So in this case, I just want to hide. 38 00:03:30,290 --> 00:03:31,160 That button. 39 00:03:35,260 --> 00:03:39,730 Otherwise, so, Colin, then in this case, I want to show. 40 00:03:40,790 --> 00:03:48,860 The button, so with just this line of code, we will be able to do the job, so let's save this. 41 00:03:52,140 --> 00:03:53,490 Refresh the page. 42 00:03:53,880 --> 00:03:54,900 Let's try again. 43 00:03:55,110 --> 00:03:57,840 Let's go to the council to see if we have any error. 44 00:03:58,050 --> 00:04:00,000 So I'm going to press a latter. 45 00:04:01,160 --> 00:04:09,280 So now we have stuff inside, but it seems that it's not working well, so let's try to do it differently. 46 00:04:09,290 --> 00:04:10,940 So if Voll. 47 00:04:12,420 --> 00:04:18,100 Is the same as an empty string, then we are going to hit the button. 48 00:04:18,120 --> 00:04:20,060 Let's see if this works better now. 49 00:04:23,100 --> 00:04:24,570 Refreshing the page. 50 00:04:33,410 --> 00:04:38,180 Now, this seems to be working better, so now let's erase everything again. 51 00:04:40,240 --> 00:04:42,470 This is still not working very well. 52 00:04:42,490 --> 00:04:43,630 And why is this? 53 00:04:43,630 --> 00:04:49,180 Well, so when I press the button before realizing that there's something here, it is going to get 54 00:04:49,180 --> 00:04:50,360 an empty value. 55 00:04:50,590 --> 00:04:53,510 So this is why this is not working very well. 56 00:04:53,830 --> 00:04:57,790 This is why when I erase it now, it's showing the summit. 57 00:04:57,790 --> 00:05:02,790 And when it was empty and I typed the first letter, now I don't see the button. 58 00:05:03,370 --> 00:05:04,780 This seems to be wrong. 59 00:05:04,990 --> 00:05:11,980 But this is actually just one detail, because instead of using the key down event, we should be using 60 00:05:11,980 --> 00:05:12,940 the key up. 61 00:05:13,600 --> 00:05:20,360 So only when we release the key, it is going to make this test to decide what to do with the button. 62 00:05:20,380 --> 00:05:24,160 So if we do this, this is going to be much better. 63 00:05:24,340 --> 00:05:25,030 So now. 64 00:05:27,010 --> 00:05:31,810 Let's type A and now we are seeing the button, let's keep pressing. 65 00:05:31,840 --> 00:05:32,500 So now. 66 00:05:33,580 --> 00:05:39,280 We have a lot of things written inside here, so I'm going to start to raising everything, erasing, 67 00:05:39,280 --> 00:05:42,160 erasing and when I raised the last letter. 68 00:05:43,830 --> 00:05:50,550 I'm just going to hold down the button, so now I'm still holding it, and when I release the buttons 69 00:05:50,550 --> 00:05:54,150 and I'm going to release it, then it makes the test. 70 00:05:54,480 --> 00:05:56,760 So this is the perfect functionality. 71 00:05:57,030 --> 00:06:01,550 And like I said, when you're doing a job like this, this is what you should do. 72 00:06:01,560 --> 00:06:04,770 You should test it until you get it right. 73 00:06:04,980 --> 00:06:06,990 So this is how I would solve this. 74 00:06:06,990 --> 00:06:09,810 Just one thing that I wanted to say before we finish. 75 00:06:11,310 --> 00:06:18,690 If you maybe got confused with this with the ternary if let's remember that this is just a different 76 00:06:18,690 --> 00:06:20,000 way of writing this. 77 00:06:20,190 --> 00:06:22,050 So what we did was if. 78 00:06:31,400 --> 00:06:33,980 The value of this field is empty. 79 00:06:37,200 --> 00:06:37,890 Then. 80 00:06:42,090 --> 00:06:45,660 We want to highlight the button else. 81 00:06:52,710 --> 00:06:59,220 We want to show the button, so let me comment this just so we can test if the same thing is happening. 82 00:07:03,070 --> 00:07:04,510 Refreshing the page. 83 00:07:09,310 --> 00:07:16,260 So as you can see, we have the same functionality, so this is just a different way of writing if statements 84 00:07:16,900 --> 00:07:23,170 this way, we write less lines of code, but I know we can be a bit confusing if you're not used to 85 00:07:23,170 --> 00:07:23,560 this. 86 00:07:23,980 --> 00:07:25,670 So that was all for this challenge. 87 00:07:25,690 --> 00:07:26,710 I hope you like that. 88 00:07:26,710 --> 00:07:31,870 And if you have any questions, you can leave it in the Q&A section, and I will be glad to help you 89 00:07:31,870 --> 00:07:32,190 out. 90 00:07:32,740 --> 00:07:34,300 So I'll see you in the next video.