Build Calculator with Javascript in 15 minutes

1. Calculator with Javascript: hello and welcome. And in today's class, you're going to learn how you can create a fully working calculator with JavaScript, and it's very, very easy. So this is the completed that you're going to create it Smoking fancy, although you could spend as much time is like toe style it and do anything you like. We did. But it's fully working, for example, by 78 plus nine and when you click equals, we'll get the results. And then when you start that interrogate, everything is clear from the previous population. It's vertical. So for that, what? I'm going to do it. I'm going to medium ice my browser and what they kept over here is this index file that is basically my hope later. So now I'm going Blount Visual studio Cold. You could open your editor. Just let me talk it over here. I want to pick a new file and then I went to people file, Say this and I'm going to save it on my deck Stop. So I'm going to name it. Open data, No, html. So now that we have our co creator, what we're going to do is we're going to radiation of structure. So let's that html hit stop now. I live in it, so it's out of completing the facts. But if you don't just type them and then let's create a kids section and then we need a body section. Now if you're not familiar, exactly what html Don't worry, just type after me, and in the end everything will work perfectly. Also, if you want. I have other videos for HTML beginners and someone. So if you need hey, get section. What are you going to do? Let's get I toe And the title would be okay later, later. Like this. And let's say for Anna freshen if I double click on the cooperator, we should launch it in our browser so perfectly the moment you could see it overcorrection going. I'm going to sharing the browser it so it could be easier toe litigate between the browser and the editor. This is going to be my nails. So the next thing I'm going to do, we're goingto Stan Addy, for example, just kidding and also the rest of the animals. So let's go are getting creative gift, and this is if I could have a class off okay. Oh, cool. Later. This is going to be our holder or apple off the camp. Later inside, we're going to create an H one and let's call it calculator. And if we save fish to get the calculator over here and now we're going to stand you this input and then the rest of the bottles. So inside, let's create an import that this with type of ext. Let's give it on the radio off. So this is going to show the result of our calculations. And what are you going to do? This? Let's give it a class. Let's give it The class offers up like this, and the reason is because I want to style a bit. So the next thing is that they're going to do it should work to start adding these buttons . Let's begin with the first round. Let's time. But, um, and this. But it is going to be a C button that is going to care everything. So let's like inside piece you and let's give the class off button. And the reason is, before she want to start it, we could start the size and so so let's start from the class bottom and, for the moment, actually not sitting. So now let's stop more about us, and this is going to be our first level, but us. So the second body is going to be a textbook sand, and the third button is going to get the slash for division. So if we save at a fresh so we have our elements, but they're not really styled. So what are you going to do this? You're going to stand them very fast. So let's go in our kids section and let's that style now, obviously the correct ways to create a custom CSS family style in there but says This is a very short plus. I just want to show you how it could create the co creator and the styling, several very important in our case. So the first time that they're going touches from the cooperator later. So let's said the witch to 404 100 pieces. That's if fresh. Okay, so the next thing that you want to start with our result, so let's selective. I want to give the width of the results to be 100%. This basically want our results field. Toby all the way. Is it over here? So let's fresh. Okay, 400. It's a bit too much. Let's send it to 2 50 They come to a 50 excess. OK, now it looks a bit better. Also want to make it a bit bigger is you could see over here. So let's change. What would you change? The height? That's it. The fight of 50 pixels. They also want to increase the size off the letters that are coming inside. Want them to get bigger. Solis increased the phone sizes. Well, let's sit it toe B cells, and it's just a bit of parting. So are fixed. No longer is going to touch these borders. So let's that thing because 1% And if we save fresh okay, font size 30 pixels, not 30%. Okay, it's a Finnish perfect. And the next thing that we're going to go, you're going to stand the buttons. Solis. I don't and let's give a bit of classes, said the float for the rest. Mr want that floating and then it won't said. The height of the buildings to be 50 pixels as the width of the voters are work to be 33 0.33%. So I wanted to be Tripper. Oh, is there over here? As you could see, it's pretty much the same. So, after all, thought you want to go. It's going to change the cursor because we look over our boat us. We don't know that their pick about. So let's change the person toe pointer cursor point with this And if you save and a fresh perfected yet our pointer. So now we move to the second level off for the second throw our with us. So let's copy. These three is going to be the easiest way. Let's go see them based and it's just replace. They're a text. So this is going to be for more complications. So after is dedicated, a plus and then give them minus this. That's it. Finish. Okay. Our second bro is here. Then look of 789 So it's like seven and nine. Then we'll be here. 456 So lets place Jesus so for five six and then, if you want Well, um, let's say finish now and the last through the week. It is the 0.0 and equals, so it's basically them you. So if you don't, then zero energy equals safe. Refresh. Perfect. So this is our main structure. And now we have to start doubting the JavaScript in all of them to make our calculator work . So now I work to go just above the closing tackle the body, enter work to open scripts I won't work with. When you look, just let's get the function. They're just going to be called a pendant for cocoa. Population are cool. Elation like this and dysfunction is going to have a single parameter that is going to be called symbol. So less than symbol and what we want to do it. When you click a button, we're going to involve dysfunction, and you're going to place its symbol. So let me show you what a me I'm going to alert the symbol so it could change. Everything is working correctly, So let's get over here. It's that clear. And it's that friend for cooperation and in a single quote. Actually, this is the worst example because this is when co cooperate function the Eagles. So let's do it for zero. And it's good for the doctor, sir. So it's also a sit over here and instead off zero care should be does. So now if we save a fresh, let's click on the zero. Okay, not here. Over here. Let's fresh. If I click on, the zero will get this stage stays. Zero. If I click on the dog will get the dog loses. So another to know this is your key. Let's place it on every single these except on the Asia. So now for the three, let's space inside for the to let space. So it's a bit 80 years. But don't worry, we're going to be done in 10 seconds. So let's up. Six. Let's up. Five. This is basically the easiest way that you could have event listeners to your payments. This is going to nine, then this is going to be eight. So now what I'm going to do is I'm goingto space for these for the minus and the rest of the operators. And the reason is because otherwise there is not going to be any space. For example, a plus eight and they're going to stick together. And it looks a bit better days, a little space between them. It's not much. I mean Don't worry if you don't want that space that just before the way it looks now it's out for the division, actually, for world, um, mortification. That's pelvic. So it's up space plastics space. Then the last thing is for the percentage. So let's a space for sent. First ascent and spaces are now for the A C for the Galician or going to implement additional function. So now that really invoking dysfunction on most of the apartments that really that start implementing the functionality. So over here, just a both our function, it will create a liability cost. And for this horrible, we're going to select our input field. So let's that text e o equals document, get element by 80 and let's based our idea, which was preserved. So what we're going to do now is we're going to start a painting to the text field. Whatever symbol was big. So let's that X field the while equals excuse does vital bless and inside. So what is going to keep on now? Let's see if fresh basic eight and you see eight over here. Let's like 9 49 if we pick plus we get plus perfect and This is basically, however, to see what we're clicking inside our calculator. And the next thing that we're going to do this. Let's implement our cooperate assumption, soulless that function. Oh, wait like this and this function coverage is going to be involved from our equals. Mother told us that Waas and let's invoke cooperate on this, her black Opel. It is it. Yes. So this is our cooperate function. So methodical, Great. From Charlotte's back Thanks field. No follow plus equals. Basically want a pinch to this. Follow what we want, our benches open. Coals equals like this is spaces. And then it's like you vote and it's based inside the text. But all of the text field? No. So what this evil functions work to do actually need a plus it from, So this evil function is going to go. It's work to the calculation based on the input over here. So let's save a fresh place. We, for example, one was an differently. It was No, I think it's working in the moment because dysfunction it's not invoked from not only okay , that was big mistake. I hope you didn't miss. Type it. Now let's fresh one plus two. Let's click because equal stay any drugs for any copulation. Now, since our base is not going to get the moment, we have to refresh the page but differently. For example, my Morcha plates by eight we get seven. Stop, actually our co plate that it's working now what I want to do its plot a few more touches. Street basically want implemented functional to clear the text over here when you click the A C bottom and I think this is pretty much it. Anyway for that, what I'm going to do its on going to implement a function Clear text. It's only thing function. Yeah, next this and we're going to be invoking it from our hasty bottom. So that's that Click you close? Yeah, this. So when we invoke it, what we're going to do, they're going to say, next field the value because NT quartz and this is going to remove the text Solis and fresh . That's that. Something was something equals ineffably Casey, our Texas clear weather and the next thing that they want to do this toe is to make it automatic. Basically, if you click 85 plus 85 equals 107th. And if you continue clicking, this upended the hand and the reason is the course. We do not remove it after a clip. G equals, but so what do you mean by that? Just go after me, Create a viable let to be cleared like this equals force. And you sat our couple its function. That's that. Who we kidding equals So the next act. When we start adding for copulation or a painful cooperation, we're going to check if will be clear, as if it's to be clear. Were could you vote the clear text function? So let's say if fresh let's that 789 minus 987 It goes minus one night and you start. I mean, everything is clear Ever seen then you're in bold. But there is a small book actually, if you've noticed already, when you continue clicking everything itself placed with whatever button you clicked and the reason is because inside scare X after look here we should send the will be clear through force. So know when this if and fresh and now we have a fully working calculator and for your challenge what they want you to lose. I want you to send me a screen shot off your calculator. Maybe wanted some Kristen touches or the styling. Maybe your buttons are green or something else. I would like to see it. I hope you enjoy this. Plus a low. I hope you learn something and I can't wait to see your projects. They care.