Hey guys, this is the final video of this series. So let's start designing this calculator. Right, so let's start the CSS part. So to start the CSS part in the head, I'm just creating a style tag. Okay. And now what I will do is earlier, we have taken a div here, right, so I'll just first give the style to this div.

So here it is an ID, whenever it is an ID, what you need to do is you need to put hash and the name of the ID, which is mean. If it was a class, you need to put a dot and the name of that class. So here, first, I would give it a width of 300 pixels. And then I would give it a height of 280 pixels. See this is up to you, whatever the height or width you want to give you can give it i'm just giving it according to my taste. You can give it however you like.

So I'm just giving it to 80 pixels. So even though if I save it and reload it, you won't be able to see it here in action because I haven't applied any color yet. So I would give it background color here now. Which is background color, color, and I would make it black color. And let's reload it. Okay, I'll just decrease the zoom to a bit.

Now we can see that the calculator box has appeared means this is my D, which is of 300 pixels and height 280 pixels and the background color is black and I will take input tag to styling, so I'll just put input as my element. And now the properties that I am going to give are, first of all, I will give it a with soil tissue with so here one more thing is that you can do with not only in pictures, but also as percentages. So I would give it 20% with so I'll just give it 20%. And let's see it in action. I'll just save it and reload it. Now you can see it has taken the 20% of it.

And then I will do the height to 40 pixels of this input tax. So I'll just put height column 40 pixels. Just I'll save it and reload it. Okay, don't worry about this will fix this, then I will just increase the font size to some 20 pixels because these are looking too small here. So I just put font size to 20 pixels. And I'll save it and reload it here.

Okay, now they are looking good. And after the output an ID here so that we can make changes which are a bit different from the other input tax. So I would make an ID and Name it as some E. I know I am very bad at naming things, but you can name it whatever you like. I have just named it Tripoli. So okay, I'll just call it here. Hash E and I'll just open that braces.

And now I want the width to ease around 96%. So I'll just put width, colon 96%. And I'll just save it once. Okay. And then I put the height around 50 pixels, I would just like to give it background color of silver here. You can do whatever according to your tastes.

So I'll just put it background color, silver. So I just rewrote it. Okay, it has changed, but still, it's not looking that good, right? So we'll change it Nothing to worry, I would give a margin to all the input tax of 2%, which means margin does left right, top and bottom everything if I simply do margin, so margin call and I'm just giving it to pixels. And let's save it and reload it. So As it is not matching, I would increase the margin to all the inputs to around for example, eight pixels, or else we'll make six pixels for instance.

And let's say it says okay, the six pixels margin is perfectly suitable here and our calculator is finally ready. Now it's looking beautiful as well as it's functioning correctly. So if I hit minus again and again, it won't, if I press it gets changed to Plus, if I hit nine and then equal to it's done. So I hope you have enjoyed learning this series. Thank you for taking this course.