Bill Rosener: Well, this is Dr. Bill Rosener. Welcome in this video. You learn how to create a little calculator using Javascript. Let's start by taking a look at what you want to create, and then we'll go ahead and walk through this line by line. We'll start off the top with maybe like a header, 2 header, one tag, put in Javascript. That's going to put that in bold. Go ahead and put your name. They'll have 2 areas where users can enter 2 text boxes where users can enter values, then create a command button. And when user presses on that, it will simply add up those 2 numbers there.
Bill Rosener: Okay, now that we know what we want to do, let's go ahead and get started. So the 1st step you're going to do is open up visual studio code or some other editor. I'd probably recommend this one if we take a look here before I get going here. I've got a couple extensions installed. I've got codium, which is an AI to help with AI solving and writing code. Then I've also got open and browser, so I can just simply right, click, and it will open up my HTML file that we're working on in a browser there.
Bill Rosener: Okay? So the very 1st step you want to do is we're gonna come right up here to file, and we're gonna choose new text file.
Bill Rosener: and then we'll just go ahead and we'll start off with the Javascript. So I'm gonna type header 2.
Bill Rosener: If I put down here a line H 2,
Bill Rosener: and I'm going to type in Javascript
Bill Rosener: calculator and I'll go ahead and close my header to tag.
Bill Rosener: and I have got a lot of the automatic suggestions and the auto completes turned off. Otherwise before I know it, I'm typing one word. It's completing everything for me. So I'm thinking, actually might learn more. If you turn some of those options off, I'll leave it up to you. But if you want to turn some of them off, or you want to turn back on, just come here to file preferences and come up to settings.
Bill Rosener: And here's the text editor, and definitely under suggestions. You might want to turn some of these off.
Bill Rosener: I've got a couple in line suggest, and I've got. Never.
Bill Rosener: Okay. Let's go ahead and put your name. Go ahead and type actually type your name.
Bill Rosener: And I'll tell you what this point. We'll go ahead and save this. I'll come right up here to a file. We'll go to save as.
Bill Rosener: and I'm just gonna be saving on the desktop
Bill Rosener: in folder, called temp. And let me. Just this will save just a little bit of time for me. I'm going to call it assignment one dash Javascript, dot HTML.
Bill Rosener: So the one we were just kind of looking at was the finished one, and we'll go ahead and recreate this one assignment. One dash javascript, and then hit save.
Bill Rosener: And sure enough, if I came right over here, here's the file we just got done working with.
Bill Rosener: and I can see. Well, it's still one K. But anyway, here it is, and here's the finished one.
Bill Rosener: But since I've got
Bill Rosener: well, you know I was gonna get to is, I could right click on this one and open it.
Bill Rosener: But since I've got
Bill Rosener: extension in, I can just simply right click, and I can go open in default, browser.
Bill Rosener: And there it does.
Bill Rosener: And sometimes I'll actually close this every time. But I'll leave it up to you.
Bill Rosener: So here's that was the finished one. Okay, let's come back here to visual studio code. And let's add some more. So the next step we're gonna do is we're gonna start a form.
Bill Rosener: And I need actually need to give this a name name equals.
Bill Rosener: I'm just gonna call this real simple. I'll call it form one.
Bill Rosener: Okay, and we'll go ahead and start off with a number one, and then we'll type, input dot equals
Bill Rosener: whoops tax.
Bill Rosener: and then we need to give it a name so we can access it within our Javascript. Now let's call this on Number one.
Bill Rosener: and if we want, we can give a size.
Bill Rosener: I was gonna put 5, and so many of numbers will be displayed at once. Maybe we'll put 1015, and then I'm gonna go put a default value in here.
Bill Rosener: and if I think of it, when I'm finished, I'll go ahead and delete this 15. And the reason I got the 15 in here is all I'm developing and testing. I don't have to keep entering numbers. It's gonna start off with a number from the get go.
Bill Rosener: We'll put a little paragraph break.
Bill Rosener: and then I'll go ahead and take this
Bill Rosener: copy it and paste it. And I'm gonna change this to a Num. 2.
Bill Rosener: Now I'll go over here and make sure I change this to num 2 as well, maybe I'll give it a different value
Bill Rosener: about 10.
Bill Rosener: So I'm going to save and to save, I can come up here to file. I can hit save or I'm going to sit control. S, so sometimes I'll just hit and control. S, sometimes I'll actually go up there and show you. So let's go ahead and right click open and default. Browser, I tell you, let's get up. We'll get a paragraph break between our name and number one. But this is coming along here.
Bill Rosener: Okay, and let's just get let's just go ahead and put a paragraph break right here.
Bill Rosener: Okay, okay, we'll put another paragraph break.
Bill Rosener: And now we're going to go ahead and start working on
Bill Rosener: button.
Bill Rosener: So it's gonna be a button.
Bill Rosener: And then we're gonna put a value in here, and that is what is displayed on the screen.
Bill Rosener: and we'll have it. Say, calculate, hello.
Bill Rosener: And then I'm gonna have what happens when I press on this. And this is gonna be an on click.
Bill Rosener: And we're gonna tell a call, a function called compute. Answer, open parentheses, close parenthesis.
Bill Rosener: Now, here, I'm going to put an angle bracket, and that is actually closing the one at the very beginning. There.
Bill Rosener: put another paragraph break, and I can leave those in if I want, and
Bill Rosener: this might save just a little bit of time. I'm gonna come up here and grab that.
Bill Rosener: Then we'll put total.
Bill Rosener: and I could put I could call this total, or maybe I'll just call this a result.
Bill Rosener: and I'll do. The size is 5. But here I definitely want to delete the value, so I don't want any value displayed there initially.
Bill Rosener: And I'm gonna go ahead and take a look at this. I'm gonna hit control. S, to save.
Bill Rosener: I'm gonna right click open and default browser. And this is looking perfect here. So I've got my 2 numbers area text boxes where visitors connect numbers and I can press on this calculate total all day long. And nothing's gonna happen because we haven't worked on the code yet.
Bill Rosener: Okay, so I'm gonna now work on the code up here.
Bill Rosener: Let's type a script, and the very 1st step on the type is a function.
Bill Rosener: and soon as I type it, I can see that kind of got in red. It's going to be compute
Bill Rosener: answer, and it's going to be open parentheses, close parentheses
Bill Rosener: start our curly bracket, and then close the curly bracket there.
Bill Rosener: So this needs to match. So when I press on this command button, it's gonna look for a function called Compute answer. And that's right up here, let's go ahead and start with a little alert message, just to make sure
Bill Rosener: we are at calling the Javascript function, and if we're not calling the Javascript function. There's no use in continuing, because nothing is going to work here, so I want to make sure notice I've got Javascript is case sensitive. I've got a capital a
Bill Rosener: in both cases there and a capital, a error. So I'm gonna save this
Bill Rosener: right click, open a default browser
Bill Rosener: and hit calculate total. And sure enough, I'm getting tests displayed. So I know I am calling my Javascript function there.
Bill Rosener: Okay, so now, what we're gonna do is actually go
Bill Rosener: finish it, and if we want to, I'll just go ahead and delete my alert message.
Bill Rosener: and I'll create that 2 variables number one and number 2, and then put a semicolon to terminate that.
Bill Rosener: And let's say, number one.
Bill Rosener: we'll create a variable is equal to parse float. Notice that capital F there again, Javascript is case sensitive, we'll be taking a look at a document
Bill Rosener: and notice down here. I call this form one.
Bill Rosener: and then we'll take a look@numberone.value.
Bill Rosener: Okay? So I'm gonna take form one num one and the value.
Bill Rosener: And then I'm gonna go ahead and grab that save a little time.
Bill Rosener: I'll paste that.
Bill Rosener: and I'll change these ones to 2. So now I'll be grabbing information in this text box stored in a variable, and we're now ready to write out our value
Bill Rosener: equals number one.
Bill Rosener: What's number 2? Make sure you get your closing semicolon. So I'm gonna say, document
Bill Rosener: form one dot result is equal. Num. One less than 2. So we'll save this.
Bill Rosener: and I'll open in default, Browser, and I'll hit, calculate total.
Bill Rosener: And sure enough, this is working here.
Bill Rosener: Okay, let's just play with a little bit with
Bill Rosener: AI, and kind of torn here on AI, if I tell you too much, and I'm afraid you're not gonna learn anything. So let's just go ahead and I'll leave my cursor kind of up here and I've got codium installed. There's other AI extensions. And here I'm just gonna press control, I and let me go.
Bill Rosener: Okay, control. Plus I, this one would be typing.
Bill Rosener: I've got my cursor right here. I'm gonna hit control. I you see, a little box popped up here. Let's just have this. Say,
Bill Rosener: modify the Javascript function to add, let's say 4 numbers.
Bill Rosener: and let's see what happens here.
Bill Rosener: Okay? And that worked perfectly. And I could at this point hit, accept.
Bill Rosener: And then at this point I would go ahead and delete this function.
Bill Rosener: So it's going to take number one, plus number 2, and then I'm going to come down here
Bill Rosener: and I'm here to control I and I'll see what happens if I say, modify the HTML form
Bill Rosener: to include 4 numbers, and let's see what it pops up with here
Bill Rosener: and looks like it worked great. Here. I'm just gonna hit
Bill Rosener: except the only thing here is
Bill Rosener: I am going to go ahead and grab these lines
Bill Rosener: and paste them up here.
Bill Rosener: So I got Num. One, num, 2, num, 3, num, 4, and compute answer.
Bill Rosener: and that's looking good. Let me hit, save on this reload. Open a default browser and hit calculate total.
Bill Rosener: And I think that 25 and 25 that's working good there. So anyway,
Bill Rosener: hopefully, in this video, you learned how to create a little Javascript calculator.
Bill Rosener: and we were using the editor visual studio code. And again a couple of extensions there I had turned on were open in Browser and the codium. So at this point, I have. Now, maybe I'll minimize this
Bill Rosener: I now have created my work in Javascript. So I could actually right click it here. And I could go open.
Bill Rosener: And here it is again. For now what you're going to do is upload this file to your website again. Hopefully, you got everything working here and just keep checking your code. One little mistake again. Keep in mind that Javascript is case sensitive. So parse float, for example, make sure you get a capital f
Bill Rosener: compute. Answer. I put a capital a there, make sure everything is matching
Bill Rosener: semicolons at the end of the lines. And hopefully, you got everything working. Anyway, I'll catch you next. Video. Thanks a lot. Bye.