‫Hey, there.
‫Welcome back.
‫Now in this lecture, let us implement how glad this this magical thing.
‫So the first thing we need to do is we need to jump on to our we have scored now inside this gas folder,
‫we are going to create mean dogs.
‫Now we are going to implement all our JavaScript code here.
‫The other important thing is make sure you scroll down at the last and after your photo.
‫Just mention all this crap.
‫That means all these tiers fail.
‫So we need to include it here.
‫What I'm going to do is I'm going to say the script now had with this whole script that you need to
‫add, as I see that is your source code and you need to mention the script that you are going to analyze.
‫In this case, it is going to be JavaScript may not CSS.
‫Make sure to do this after photo at the bottom of the page.
‫OK, I hope you got the idea.
‫Simple thing.
‫Create a jazz file and include this in our next hour of HTML.
‫That's the first step.
‫Now what we're going to do inside this.
‫So there are a few things that we need to do.
‫We need to first again, attack or, I should say, dogged the element with which we are going to play
‫in this case, the JavaScript.
‫We are going to target with IDs, not with Glass, but with IDs.
‫So what we are going to target is this whole menu.
‫So every time we click, we need to target this menu, either we need to show this or we need to hide
‫this, or I should say, display block discipline.
‫So here I need to add I.D..
‫Let me call this house and bash now by itself.
‫You can call this anything else as well.
‫I'm just calling this house because it is easy to sound OK &mdash.
‫Now, but now everything we are going to do, we are going to say it will get us doggedness &mdash.
‫Now one and displayed none display whatever.
‫The other thing is now what we are going to do is we are going to play with this IED.
‫We are going to say, OK, discipline on OK display blog.
‫So whenever the display is done, it will hide whenever the display is blocked.
‫It will be visible to us.
‫So what I'm going to do, I'm going to just jump on to my whole JavaScript thing and here I'm going
‫to create water.
‫This is our very well and I'm going to say X if by any chance you don't understand anything, don't
‫worry, this is not part of our cause.
‫This is some extra content.
‫So here we are going to select this whole event.
‫This whole thing with the help of our IED.
‫What we are going to do is we are going to see a document which is our browser basically and take it
‫element by IED.
‫You can see get these Coppertone by these capital and icecap, get element by IED.
‫And here we need to mention which IED.
‫So this is going to be this one.
‫I'm trying to cover everything in simplest possible words.
‫So we are going through targeted the city.
‫And by default, I'm going to say, look at this now, this whole thing is sealed inside out.
‫Let me do one fun stuff.
‫Let me say console.
‫Console log and let me see X.
‫Now what this console log X.
‫Well, here we have console, and with the help of this log function, we are just displaying what disks
‫contain.
‫So if you observe here this X contain this hold of this whole code.
‫So behind the scene, what doors complete is that captured this ID and stored the whole record.
‫You can see we have printed this OK.
‫I hope you got the idea.
‫So this is done.
‫And let me remove this contradiction because this is used for printing stuff on a console.
‫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
‫now attack our troops at target every part of it.
‫I can say that this time I can say a squid display and said this display to none.
‫So now if I jump here on my page, by default, this is hidden because we selected this Nevada and we
‫have selected this styling part.
‫So let me display property to none.
‫OK, this is great.
‫The best thing is done by default.
‫This whole thing is none.
‫This whole menu.
‫But now I want the functionality that whenever I click on this button, this whole button, it should
‫change.
‫So we are going to write a function and we are going to add this functionality.
‫What I'm going to do is I'm working off their function and let me give a name to this function and change
‫on.
‫I can see up here and I can see menu anything that I want for simplicity.
‫I'm going to call this off.
‫Sure.
‫OK.
‫And Ted, I'm going to mention that.
‫Don't worry, chances are you are not able to understand this, and that's okay because at this point
‫of time, you are not aware of JavaScript.
‫So don't worry, once you have basic knowledge of JavaScript, this will be easy.
‫OK, now what I'm going to do is I'm going to stay inside this function, I'm going to select this again,
‫OK, I'm going to select this now bar, and now I can add, I can be sure if our navigation bar is not,
‫I can change it to block.
‫Or if this is block, I can change it to nine simple condition.
‫Let me keep this condition inside.
‫Track it.
‫I can see, OK, this style of X.
‫And let me select the display part, and if I'm competing, I can say if this is equal to none, this
‫is the case, then change it to block.
‫The trade block.
‫OK.
‫Otherwise, do they oppose it?
‫What I mean by opposite that means instead of bloc next to none?
‫Don't worry, I'm going to explain every single thing here.
‫OK, save this one.
‫And let me add this functionality to this button.
‫So what I'm going to do is head on this button, I can add functionality.
‫I can save this device.
‫I can create, I do and keep this button inside my device.
‫And here I can add on public property and just give my function and just show.
‫Don't worry, I'm going to explain, don't worry, let's see if this is working or not.
‫Yeah, this is working for our first part has done this is walking.
‫But now let's discuss what we are doing.
‫So what we did is we covered this whole button inside our dev and our property, which is called us
‫on click show.
‫That means whenever we are going to click this button, this show function will be quiet behind us.
‫He here behind the scene, dysfunction escorted.
‫We have selected our &mdash now, but that means we have selected this whole element.
‫And now we are checking if this is not just reverse it.
‫Otherwise, just make it known.
‫That means if currently this is done and we click this one, it will be display block.
‫And if I click now, it will done this around.
‫That means display none.
‫So here we just added a simple if indeed it's condition, that's it.
‫Now here we need to fix this element.
‫So basically, if I go here and this is not working, where one reason is I need to convert this into
‫a block because currently we are just playing with a.
‫And that element doesn't have any yellow.
‫So what we are doing is we are converting things from none to block and block to none.
‫So this is going to affect it.
‫What I'm going to say is let's use this players block and if I save this one.
‫OK, this is much better now.
‫Yeah, yeah.
‫Walking grid.
‫Do you think I need to change this place now, looks good to me.
‫So that's it.
‫That's all.
‫One thing that you don't need to worry about this whole JavaScript thing.
‫This was just a bonus thing.
‫I just wanted to include so you can have this type of project, OK?
‫This is entirely JavaScript thing.
‫If you observe when I click here, display will be changed to why?
‫Because we are targeting this style for this idea.
‫OK.
‫This is the idea that we are playing with.
‫This is this time and this is the property that we are playing.
‫If I click here, the display is changing to block out.
‫None block.
‫None.
‫And this because of this whole property, we are playing this.
‫And if I get back here, just try to make you revise.
‫By default, we have this property, which is going to be, you are going to select this property,
‫select this whole code, store this and X target our style.
‫Change the display property to none.
‫Now we create this function.
‫The aim of this function is to get all the properties of this whole &mdash now bar.
‫And then whenever we click this show, if our value is not changed to block otherwise changes to none.
‫Basically, just do the opposite.
‫And currently, it's no change to block.
‫If I click now, change it to none.
‫Now it's just doing the opposite of the current value.
‫Dodd said.
‫Dodd said, and you don't need to know about this.
‫But to add this functionality in future, what you have to do is get the property, give the initial
‫value, then create a function, also a bad step on chain for how to how attached to this device.
‫The functionality on Click that means whenever I'm going to click on this Deb, call this function.
‫So whenever I click, it goes here and do its task.
‫That said, even if you don't understand this, don't worry.
‫This was just some extra optional material.
‫I hope this project was helpful.
‫Now we have designed the entire Web page that is responsive and we know every single thing about it.
‫That's all.
‫I hope you had great representation.
‫Thank you for following and I see you guys in the next one.