In this part, we'll start building the calculator and will not focus on the design at present, but in the later videos, we'll definitely do it open the notepad plus plus, and I recommend you to change these settings as I show you. So go to the settings and click on preferences. And in preferences, just go to auto completion and put checkmark on all of these. And also just select this option function and vote completion, make sure your settings are similar to mine, and then hit the close button. So once you're done, I would recommend you to save the file first. So what I'm doing is I'll just go into the file, I'll click on Save As you can do it from here as well but I'll just do it from your File, Save As, and then I'm selecting the desktop and I'll save this file as calculator.

I'll just put calc here, and I'm saving it as dot hedge tml. So once you have saved it You can see the calculator, just double click to open it. Now I would align this on the right, and this on the left, and you can align however you like. I'm just aligning it to my taste. And I'll just pull it this way. And it is it.

Now I'm ready to walk. So first, let's start with the basic HTML structure. So I'll just open the HTML tag, and it auto closes it because of course settings. And then I'll just hit a tab here. It's not necessary or compulsory to put the spaces here, but I like to do it so you can also refer it because it looks the best, but it's up to you. So I'll just put the head here, attack.

Okay, and again, let's go and get the body tag here. So the basic HTML structure is ready. And in this later on, we'll be adding some style tags so that we can work with CSS and script tag so that we can work with JavaScript as well. So first, I would like to create a div in which will start working. Till now we have created the basic HTML structure so nothing is visible here, nothing to worry and we haven't saved it and reloaded it. Even though I save it reload it, you will not be able to see anything because there is nothing created.

So I'll just create the deal. And I'll put an ID to the deep. For example, ID equals two you can name it anything and just putting it main. So we'll use it later while applying CSS. So just create the form tag in it you need to create on tack. So okay, we have created the contact.

So here we start building calculator actually now just hit spacebar in the first form. And given name. So that's an attribute to the form tag, so that we can call it later. So you can name it anything, I'm just putting the name as F for the form. And then we'll start building our textbox and the buttons which are required for calculator. So first I'll start with the input tag, input.

And then I'll hit the spacebar and give other attributes such as type. So this is essential type is essential now. So input type, I'm putting text here. And then I'll give a name as well. name equals two. You can name it anything.

I'm very bad at naming. So I'm just putting whatever is coming into my mind. So I'll just put it DDD. Okay, I know it's not that good, but I hope you understand. So I'll just close this tag. And I'll just hit the Save button and reload it here.

Now you can see that the text box has appeared. So whatever you done so far, I have just created an HTML structure with the HTML, head and body. Inside of body tag, I have created an div. And inside of this div tag, we are having a form tag, in which we will be adding some buttons. And this text box I have named this form as the page may contain many forms so that I can call the specific one. So here is the name that I have sent its app, you can name it, whatever you like.

And here I have created an input tag for the textbox. So the simple difference is if you place the type equals to text, it gives you a text box. Or if you change the type equals two button, it gives you a button that's it. And I have assigned the name for this textbox as well. So if I want to call this textbox. Now, I would call something like this.

Its parent form tag is F and the name of the textbox is DDD. So I would call it F dot DDD. So the name of this checkbox now is after DDD. So now let's proceed further and create the buttons So I'll just take an open input tag. And this time, I would just put the type equal to button instead of text. And I'll just close it, hit the Save button.

And now reload it. Now you can see a button has appeared. But you see a problem there. This button doesn't have any value on it, so we'll add an value. So we'll give it a spacebar here and add another attribute called value. So I'll just assign value equals two.

Now you can type whatever should appear on this button here. So I want number one to appear on that button. So I'll just put one and now I'll again save it and reload it, you can see that the one has appeared, right. But in calculator model, I need this button below this textbox. So what I'll do is after the textbox has completed I will put another tag called br which means break so it will just break in put it in Next line. So I'll just save it and reload it.

Now you can see that it has come on to the second line, right? And when I click this button, there is nothing happening, right? So when I click this button, I want one to appear here. So I'll just put another attribute, which is called on click equal to inverted commas. So what should happen when I click this button, the value of this textbox should should contain number one. So how to do that what is the name of this textbox Actually, it's DDD.

But it's in the form of so I would call it F dot DVD. So here, F dot d d d dot value means the value of the textbox equals to one. So what happens is, now you will see another problem here. I'll just reload it. Once I click this button. Hear it gives me one.

But what if I need another one, I'll just click on this button again. And you can see nothing appears there. So that's another problem. So how can we fix that problem, it's by just simply putting instead of equal to, we need to put plus or equal to. So what it does, it just keeps adding that number. So I forgot to reload.

So reload it, and just see you can. So the basic structure is ready here with the one button now I need to just copy paste it. So I'll just select this thing. Copy, and I'll just go, paste, paste and paste. So I just, I just created four buttons here. And now I will take a break here one more time.

Don't worry about those ones and all we'll fix that so I'll just put br again. So it'll create a break here for the next line. Now what I can do is I can copy the whole four buttons at once. The next line, including this bake, so I'll just copy it and paste it at the bottom. Once again, I'll paste it. And once again, I'll paste it.

So now so you can see the four sets of four buttons. I'll just save it. And now you can see the same thing here. Right all at once at present, don't worry about that. So, in value, whatever you do, will be appearing on this button. But here, whatever you do, will be in this box on click of that thing.

So for example, I just make it to and to less, and I'll just reload it. So see, you can see that two here, but when I click here, you can see one, because here it's one so let's change it to two. Now again, I'll save it and reload it. Now if I click on two, you see two. If I click on one, you can see one there. So like that, so I need to change all this, I'll just put three here and here instead of four.

I would like to just placed plus button here, so I just put plus and after that I need 456. So I'll just put four by six. And then I'll go for a minus, and then again, seven, H, nine here, and then I'll go for a division. Again, let's come here, and I'll put a C here. And again here I'll put a G zero here n equal to, and at last, I would put into symbols actually into symbols, this one star symbol, but as only this would appear on the button, I would like to use x here, and in value, I would do that into symbol. Okay, so let's save it first.

And reload it. Now you can see everything here. So see 123 plus and you can see 1234 456 minus, and you can see 4.6 minus in the similar way, remaining two rows also are appearing here, right. But we need to change the values actually see if I hit seven or eight as well, I'm getting one there. So here, one, two, and then I'll change this to three. And here, what I need to do is I change this temporarily in this video for this video sake, as plus, but it should be in single quotes, so I'll put it in single quotes.

And then we'll go for the remaining ones for fight six, and again here. It's minus, I'm just putting it in single quotes minus here. And after that, again, 789 and again, division, so I'll just put it in single quotes. So I'll just add division here and after That's C for C, we need to change it actually. So I'm just temporarily leaving and proceed proceeding towards zero. So I'll just put zero here.

And after that, for equal to also we need to change something. So let's leave and proceed towards the x here means multiplication. So I'll just erase that. Put single quotes. And then here I'll put a star symbol instead of x symbol. So I should not be using x here.

Star symbol would work as multiplication actually. So why have I placed x here, I have placed x here so that it looks like multiplication symbol, but actually, when you click that this would be used as a multiplication symbol. So let's save it and reload it. We can check six, nine, a buy or divide minus, plus, something like that multiplication. You can see when I click on this x, I'll increase a little bit zoom here. From the page, so I just put a plus plus plus, so that you can see it easily.

Right. So whatever I click, it appears here. So till here it's done, but it's not it completed. So what I need to do now, plus is done minus is done. And now coming to the C. So when I click on See, I want everything to be clear, it should have something appearing here like this, right? So what can be done is simply, first of all, remove the classical and put only equal to, and then remove this one.

Instead of this one, I would just put single quotes, empty single quotes, and it's done. Nothing has to be done here. So I'll just reload it. So I have typed all this. And now when I click on see it's cleared, right? And after that, coming to the equal to sign here, I need to again erase this plus equal to and erase this one.

And instead, I would write eval And in brackets, I would write again, F dot triple b dot value, which is nothing but the whole thing you could have copy pasted it from here, inside of this eval function. So let's save it once and check it out. So two minus three equals two minus one, so it's working fine. Nine plus nine equals rating. So you can see that the basic functionality of this calculator is over. But here, there are some problems which need to be fixed, which we'll see in the next upcoming video.

But let's discuss what are those problems? So for instance, if I click on one, and if I hit plus, and if I do three, it definitely will work and give me an answer of four. But what if I click on one and hit plus twice or thrice, then if I click on three, it gives me nothing. So plus should appear only once. Why is it appearing these many number of times, and one more thing. So if I click on one, if I click on plus, now when I click on minus, if I change my mind that I don't want plus and I want to do a minus, this plus should disappear, and minus would appear actually, right.

But this doesn't happen. So I clicked one here, I'll click on plus, and then I'll click on minus, see what's happening. And now if I keep on clicking, it comes on. And if I click equal to i get nothing. So we need to fix these problems. And one more small feature that we need Teddy's jido should appear here by default as a placeholder.

So we'll add all those things in the upcoming next video. Until then, thank you, please watch the next one.