1 00:00:00,330 --> 00:00:00,870 ‫Hey, there. 2 00:00:01,020 --> 00:00:01,740 ‫Welcome back. 3 00:00:01,980 --> 00:00:07,140 ‫Now in this lecture, let us implement how glad this this magical thing. 4 00:00:07,590 --> 00:00:12,930 ‫So the first thing we need to do is we need to jump on to our we have scored now inside this gas folder, 5 00:00:13,470 --> 00:00:15,580 ‫we are going to create mean dogs. 6 00:00:16,080 --> 00:00:19,740 ‫Now we are going to implement all our JavaScript code here. 7 00:00:20,280 --> 00:00:26,120 ‫The other important thing is make sure you scroll down at the last and after your photo. 8 00:00:26,610 --> 00:00:28,290 ‫Just mention all this crap. 9 00:00:28,770 --> 00:00:30,690 ‫That means all these tiers fail. 10 00:00:30,960 --> 00:00:32,430 ‫So we need to include it here. 11 00:00:33,300 --> 00:00:40,290 ‫What I'm going to do is I'm going to say the script now had with this whole script that you need to 12 00:00:40,290 --> 00:00:45,570 ‫add, as I see that is your source code and you need to mention the script that you are going to analyze. 13 00:00:45,600 --> 00:00:49,830 ‫In this case, it is going to be JavaScript may not CSS. 14 00:00:51,050 --> 00:00:54,710 ‫Make sure to do this after photo at the bottom of the page. 15 00:00:55,010 --> 00:00:56,540 ‫OK, I hope you got the idea. 16 00:00:57,560 --> 00:00:58,320 ‫Simple thing. 17 00:00:58,340 --> 00:01:02,360 ‫Create a jazz file and include this in our next hour of HTML. 18 00:01:03,410 --> 00:01:04,430 ‫That's the first step. 19 00:01:04,640 --> 00:01:07,040 ‫Now what we're going to do inside this. 20 00:01:07,430 --> 00:01:09,380 ‫So there are a few things that we need to do. 21 00:01:09,440 --> 00:01:15,920 ‫We need to first again, attack or, I should say, dogged the element with which we are going to play 22 00:01:16,460 --> 00:01:18,440 ‫in this case, the JavaScript. 23 00:01:18,440 --> 00:01:22,850 ‫We are going to target with IDs, not with Glass, but with IDs. 24 00:01:23,590 --> 00:01:26,930 ‫So what we are going to target is this whole menu. 25 00:01:28,670 --> 00:01:34,880 ‫So every time we click, we need to target this menu, either we need to show this or we need to hide 26 00:01:34,880 --> 00:01:38,560 ‫this, or I should say, display block discipline. 27 00:01:39,380 --> 00:01:41,120 ‫So here I need to add I.D.. 28 00:01:43,190 --> 00:01:47,720 ‫Let me call this house and bash now by itself. 29 00:01:47,750 --> 00:01:49,850 ‫You can call this anything else as well. 30 00:01:50,270 --> 00:01:54,680 ‫I'm just calling this house because it is easy to sound OK &mdash. 31 00:01:54,890 --> 00:02:00,860 ‫Now, but now everything we are going to do, we are going to say it will get us doggedness &mdash. 32 00:02:00,870 --> 00:02:04,190 ‫Now one and displayed none display whatever. 33 00:02:04,190 --> 00:02:08,500 ‫The other thing is now what we are going to do is we are going to play with this IED. 34 00:02:08,540 --> 00:02:11,450 ‫We are going to say, OK, discipline on OK display blog. 35 00:02:11,720 --> 00:02:15,750 ‫So whenever the display is done, it will hide whenever the display is blocked. 36 00:02:15,770 --> 00:02:17,300 ‫It will be visible to us. 37 00:02:18,450 --> 00:02:24,120 ‫So what I'm going to do, I'm going to just jump on to my whole JavaScript thing and here I'm going 38 00:02:24,120 --> 00:02:25,520 ‫to create water. 39 00:02:25,830 --> 00:02:32,550 ‫This is our very well and I'm going to say X if by any chance you don't understand anything, don't 40 00:02:32,550 --> 00:02:34,720 ‫worry, this is not part of our cause. 41 00:02:34,740 --> 00:02:36,660 ‫This is some extra content. 42 00:02:37,650 --> 00:02:41,880 ‫So here we are going to select this whole event. 43 00:02:43,120 --> 00:02:45,910 ‫This whole thing with the help of our IED. 44 00:02:46,240 --> 00:02:52,180 ‫What we are going to do is we are going to see a document which is our browser basically and take it 45 00:02:52,300 --> 00:02:53,610 ‫element by IED. 46 00:02:53,680 --> 00:03:01,090 ‫You can see get these Coppertone by these capital and icecap, get element by IED. 47 00:03:01,420 --> 00:03:04,000 ‫And here we need to mention which IED. 48 00:03:04,780 --> 00:03:06,760 ‫So this is going to be this one. 49 00:03:07,430 --> 00:03:10,900 ‫I'm trying to cover everything in simplest possible words. 50 00:03:12,300 --> 00:03:14,460 ‫So we are going through targeted the city. 51 00:03:16,180 --> 00:03:21,760 ‫And by default, I'm going to say, look at this now, this whole thing is sealed inside out. 52 00:03:22,840 --> 00:03:24,160 ‫Let me do one fun stuff. 53 00:03:24,160 --> 00:03:26,050 ‫Let me say console. 54 00:03:28,830 --> 00:03:31,410 ‫Console log and let me see X. 55 00:03:31,590 --> 00:03:33,420 ‫Now what this console log X. 56 00:03:34,840 --> 00:03:40,390 ‫Well, here we have console, and with the help of this log function, we are just displaying what disks 57 00:03:40,420 --> 00:03:41,020 ‫contain. 58 00:03:41,500 --> 00:03:46,510 ‫So if you observe here this X contain this hold of this whole code. 59 00:03:47,290 --> 00:03:53,170 ‫So behind the scene, what doors complete is that captured this ID and stored the whole record. 60 00:03:53,770 --> 00:03:56,950 ‫You can see we have printed this OK. 61 00:03:56,980 --> 00:03:58,330 ‫I hope you got the idea. 62 00:04:00,180 --> 00:04:01,260 ‫So this is done. 63 00:04:01,540 --> 00:04:07,710 ‫And let me remove this contradiction because this is used for printing stuff on a console. 64 00:04:09,480 --> 00:04:15,900 ‫Let me get back here now, what I can do is since I have selected this X, I can say this x don I can 65 00:04:15,900 --> 00:04:19,500 ‫now attack our troops at target every part of it. 66 00:04:19,650 --> 00:04:26,670 ‫I can say that this time I can say a squid display and said this display to none. 67 00:04:29,310 --> 00:04:36,900 ‫So now if I jump here on my page, by default, this is hidden because we selected this Nevada and we 68 00:04:36,900 --> 00:04:38,460 ‫have selected this styling part. 69 00:04:38,760 --> 00:04:41,250 ‫So let me display property to none. 70 00:04:41,640 --> 00:04:42,900 ‫OK, this is great. 71 00:04:43,410 --> 00:04:45,410 ‫The best thing is done by default. 72 00:04:45,420 --> 00:04:46,930 ‫This whole thing is none. 73 00:04:46,980 --> 00:04:47,970 ‫This whole menu. 74 00:04:48,900 --> 00:04:55,800 ‫But now I want the functionality that whenever I click on this button, this whole button, it should 75 00:04:55,800 --> 00:04:56,310 ‫change. 76 00:04:56,580 --> 00:05:00,750 ‫So we are going to write a function and we are going to add this functionality. 77 00:05:01,110 --> 00:05:07,590 ‫What I'm going to do is I'm working off their function and let me give a name to this function and change 78 00:05:08,610 --> 00:05:08,820 ‫on. 79 00:05:08,820 --> 00:05:13,890 ‫I can see up here and I can see menu anything that I want for simplicity. 80 00:05:13,890 --> 00:05:15,120 ‫I'm going to call this off. 81 00:05:15,240 --> 00:05:15,700 ‫Sure. 82 00:05:16,380 --> 00:05:16,770 ‫OK. 83 00:05:18,050 --> 00:05:19,760 ‫And Ted, I'm going to mention that. 84 00:05:20,270 --> 00:05:24,770 ‫Don't worry, chances are you are not able to understand this, and that's okay because at this point 85 00:05:24,770 --> 00:05:27,020 ‫of time, you are not aware of JavaScript. 86 00:05:27,230 --> 00:05:31,820 ‫So don't worry, once you have basic knowledge of JavaScript, this will be easy. 87 00:05:33,280 --> 00:05:38,220 ‫OK, now what I'm going to do is I'm going to stay inside this function, I'm going to select this again, 88 00:05:38,260 --> 00:05:45,160 ‫OK, I'm going to select this now bar, and now I can add, I can be sure if our navigation bar is not, 89 00:05:45,160 --> 00:05:46,480 ‫I can change it to block. 90 00:05:46,720 --> 00:05:50,540 ‫Or if this is block, I can change it to nine simple condition. 91 00:05:50,590 --> 00:05:52,810 ‫Let me keep this condition inside. 92 00:05:52,810 --> 00:05:53,320 ‫Track it. 93 00:05:53,360 --> 00:05:56,410 ‫I can see, OK, this style of X. 94 00:05:58,220 --> 00:06:05,810 ‫And let me select the display part, and if I'm competing, I can say if this is equal to none, this 95 00:06:05,810 --> 00:06:09,230 ‫is the case, then change it to block. 96 00:06:14,050 --> 00:06:15,410 ‫The trade block. 97 00:06:15,700 --> 00:06:16,090 ‫OK. 98 00:06:16,970 --> 00:06:20,260 ‫Otherwise, do they oppose it? 99 00:06:20,890 --> 00:06:27,370 ‫What I mean by opposite that means instead of bloc next to none? 100 00:06:28,120 --> 00:06:30,970 ‫Don't worry, I'm going to explain every single thing here. 101 00:06:32,080 --> 00:06:33,430 ‫OK, save this one. 102 00:06:33,900 --> 00:06:36,460 ‫And let me add this functionality to this button. 103 00:06:36,640 --> 00:06:41,590 ‫So what I'm going to do is head on this button, I can add functionality. 104 00:06:41,590 --> 00:06:43,030 ‫I can save this device. 105 00:06:43,840 --> 00:06:47,500 ‫I can create, I do and keep this button inside my device. 106 00:06:50,080 --> 00:06:58,420 ‫And here I can add on public property and just give my function and just show. 107 00:07:01,650 --> 00:07:05,070 ‫Don't worry, I'm going to explain, don't worry, let's see if this is working or not. 108 00:07:05,700 --> 00:07:09,750 ‫Yeah, this is working for our first part has done this is walking. 109 00:07:10,080 --> 00:07:12,300 ‫But now let's discuss what we are doing. 110 00:07:12,690 --> 00:07:19,560 ‫So what we did is we covered this whole button inside our dev and our property, which is called us 111 00:07:19,560 --> 00:07:20,680 ‫on click show. 112 00:07:20,700 --> 00:07:26,850 ‫That means whenever we are going to click this button, this show function will be quiet behind us. 113 00:07:26,850 --> 00:07:30,150 ‫He here behind the scene, dysfunction escorted. 114 00:07:30,540 --> 00:07:35,490 ‫We have selected our &mdash now, but that means we have selected this whole element. 115 00:07:38,140 --> 00:07:41,140 ‫And now we are checking if this is not just reverse it. 116 00:07:41,680 --> 00:07:43,270 ‫Otherwise, just make it known. 117 00:07:43,300 --> 00:07:49,810 ‫That means if currently this is done and we click this one, it will be display block. 118 00:07:50,230 --> 00:07:53,350 ‫And if I click now, it will done this around. 119 00:07:53,350 --> 00:07:54,790 ‫That means display none. 120 00:07:55,180 --> 00:08:00,190 ‫So here we just added a simple if indeed it's condition, that's it. 121 00:08:00,850 --> 00:08:02,920 ‫Now here we need to fix this element. 122 00:08:03,370 --> 00:08:10,480 ‫So basically, if I go here and this is not working, where one reason is I need to convert this into 123 00:08:10,480 --> 00:08:13,480 ‫a block because currently we are just playing with a. 124 00:08:14,530 --> 00:08:16,840 ‫And that element doesn't have any yellow. 125 00:08:16,870 --> 00:08:22,790 ‫So what we are doing is we are converting things from none to block and block to none. 126 00:08:23,320 --> 00:08:24,730 ‫So this is going to affect it. 127 00:08:25,060 --> 00:08:30,520 ‫What I'm going to say is let's use this players block and if I save this one. 128 00:08:32,510 --> 00:08:34,430 ‫OK, this is much better now. 129 00:08:37,760 --> 00:08:38,500 ‫Yeah, yeah. 130 00:08:38,680 --> 00:08:39,490 ‫Walking grid. 131 00:08:45,940 --> 00:08:48,970 ‫Do you think I need to change this place now, looks good to me. 132 00:08:49,150 --> 00:08:49,870 ‫So that's it. 133 00:08:50,110 --> 00:08:50,920 ‫That's all. 134 00:08:51,670 --> 00:08:55,960 ‫One thing that you don't need to worry about this whole JavaScript thing. 135 00:08:56,350 --> 00:08:58,550 ‫This was just a bonus thing. 136 00:08:58,630 --> 00:09:03,450 ‫I just wanted to include so you can have this type of project, OK? 137 00:09:03,940 --> 00:09:05,890 ‫This is entirely JavaScript thing. 138 00:09:06,040 --> 00:09:10,180 ‫If you observe when I click here, display will be changed to why? 139 00:09:10,480 --> 00:09:13,750 ‫Because we are targeting this style for this idea. 140 00:09:14,290 --> 00:09:14,680 ‫OK. 141 00:09:15,040 --> 00:09:16,960 ‫This is the idea that we are playing with. 142 00:09:17,020 --> 00:09:20,700 ‫This is this time and this is the property that we are playing. 143 00:09:20,730 --> 00:09:24,360 ‫If I click here, the display is changing to block out. 144 00:09:24,400 --> 00:09:25,650 ‫None block. 145 00:09:25,750 --> 00:09:26,110 ‫None. 146 00:09:26,740 --> 00:09:27,070 ‫None. 147 00:09:27,550 --> 00:09:30,970 ‫And this because of this whole property, we are playing this. 148 00:09:31,540 --> 00:09:34,940 ‫And if I get back here, just try to make you revise. 149 00:09:34,960 --> 00:09:41,730 ‫By default, we have this property, which is going to be, you are going to select this property, 150 00:09:41,740 --> 00:09:46,420 ‫select this whole code, store this and X target our style. 151 00:09:46,420 --> 00:09:48,940 ‫Change the display property to none. 152 00:09:49,270 --> 00:09:50,660 ‫Now we create this function. 153 00:09:50,680 --> 00:09:57,730 ‫The aim of this function is to get all the properties of this whole &mdash now bar. 154 00:09:58,180 --> 00:10:06,080 ‫And then whenever we click this show, if our value is not changed to block otherwise changes to none. 155 00:10:06,400 --> 00:10:08,140 ‫Basically, just do the opposite. 156 00:10:08,530 --> 00:10:10,990 ‫And currently, it's no change to block. 157 00:10:11,620 --> 00:10:13,630 ‫If I click now, change it to none. 158 00:10:14,260 --> 00:10:17,950 ‫Now it's just doing the opposite of the current value. 159 00:10:18,700 --> 00:10:19,870 ‫Dodd said. 160 00:10:20,080 --> 00:10:23,350 ‫Dodd said, and you don't need to know about this. 161 00:10:23,770 --> 00:10:30,430 ‫But to add this functionality in future, what you have to do is get the property, give the initial 162 00:10:30,430 --> 00:10:36,480 ‫value, then create a function, also a bad step on chain for how to how attached to this device. 163 00:10:37,030 --> 00:10:42,720 ‫The functionality on Click that means whenever I'm going to click on this Deb, call this function. 164 00:10:42,760 --> 00:10:46,400 ‫So whenever I click, it goes here and do its task. 165 00:10:46,750 --> 00:10:50,870 ‫That said, even if you don't understand this, don't worry. 166 00:10:50,920 --> 00:10:54,430 ‫This was just some extra optional material. 167 00:10:55,550 --> 00:10:57,240 ‫I hope this project was helpful. 168 00:10:57,260 --> 00:11:05,450 ‫Now we have designed the entire Web page that is responsive and we know every single thing about it. 169 00:11:06,020 --> 00:11:06,650 ‫That's all. 170 00:11:07,130 --> 00:11:09,530 ‫I hope you had great representation. 171 00:11:10,430 --> 00:11:13,310 ‫Thank you for following and I see you guys in the next one.