Bill Rosener: Well, this is Bill Rosener. Welcome back in this video we learned how to create a grade calculator using Javascript. Let's start by taking a look at what you learned how to create, and then we'll go ahead and walk through it. So I have a little header to tag up here. It says, grade calculator. Put your name, have a couple of text boxes, and when I press that calculate grade it's going to do 3 things. It's going to take the 80 and 90, add them up, get the average
Bill Rosener: above
Bill Rosener: 70, they'll display passing, and then finally, the grade. Now that we know what we want to do. Let's go ahead, and I get started here.
Bill Rosener: So if I take a look here, I was just working on my desktop. Here it is. There was. That was the finished, and I'm going to go ahead and recreate this from scratch. So the 1st step I'm going to do is go ahead and open up an editor. I'm going to go ahead and use visual studio code, and I'll just simply come right up here and go to file new text file.
Bill Rosener: And very 1st step we want to do is I just simply will go ahead and type outer to tag.
Bill Rosener: grade, calculator, close the header to tag
Bill Rosener: and then go ahead and put your name.
Bill Rosener: and maybe even a little paragraph, just to get going there.
Bill Rosener: Okay, now, let's go ahead. And now save this. Let me come up here to file and go to save as.
Bill Rosener: and I can see here I'm in temp.
Bill Rosener: and I'm going to call this one
Bill Rosener: assignment.
Bill Rosener: 2 dash js, dot, HTML, and let me save that. And this will be a little bit easier to read. I'm gonna tap, save.
Bill Rosener: So here it is assignment 2 dash javascript dot HTML, I've saved it. I can now simply go in right click open in default, Browser.
Bill Rosener: And there it is. Okay.
Bill Rosener: So at this point I'm not. Typically I go ahead and close, and then I come back, and I'll just keep opening that thing open, back and forth. Let me save a little time. Speed up this video. So
Bill Rosener: let you just let you know I have provided you a screen capture of all the code. But I think it helps if you kind of walk through this line by line here.
Bill Rosener: Okay, anyway, at this point, I'm now gonna come back here in this, I'm gonna go ahead and grab a little code
Bill Rosener: copy that and I'll paste. I'll start working on the form.
Bill Rosener: And maybe at this point, once I've got one of these oops.
Bill Rosener: Go ahead and copy that and paste.
Bill Rosener: Then I'm going to make sure I change this to exam 2,
Bill Rosener: and I'll change this to exam 2 as well.
Bill Rosener: And maybe I'll change this to my name.
Bill Rosener: And typically what I'll do is I'll put some default values in here while I'm developing and testing it. Once everything is working, I'll go ahead and delete any information in there. But I'm gonna go ahead and leave it at there.
Bill Rosener: So at this point we've got 2 command buttons. So let's go ahead and grab.
Bill Rosener: Put another line in here. And again, I'm gonna this will speed up the video here.
Bill Rosener: So now I'm going to have an man button. It's going to display calculate grade on it. And when I click on it it's going to look for a Javascript function called compute grade.
Bill Rosener: Yeah, I'll tell you what, I'm just go ahead and finish this off.
Bill Rosener: Okay, then I'm gonna so I'm gonna start the form. I gave it the name form one. I'm gonna close the form. Then we'll have 3 text boxes down here. They're going to display the average status and grade. Let's go ahead and take a look at that. So I'm gonna say, that
Bill Rosener: come back to my well, right click on it. Open a default browser.
Bill Rosener: And there we go. So that's working perfectly. Now, if I press on the calculate grade, nothing's gonna happen because we haven't done anything with the Javascript yet.
Bill Rosener: Okay, now let's go ahead and start working on the Javascript.
Bill Rosener: And I'm gonna come up here to the top.
Bill Rosener: I'm going to paste.
Bill Rosener: So I'm gonna start my script, make sure I close my script.
Bill Rosener: Okay, so start the script, close the script. I'm going to create a function called compute create. And it needs to match notice again the capital G there.
Bill Rosener: And just to make sure things are working. Let's go ahead and
Bill Rosener: just put a little test message
Bill Rosener: oops. It needs to be a semicolon.
Bill Rosener: So now, when I press on this, it should say test. So I'm gonna come up here to file.
Bill Rosener: click, open and default browser.
Bill Rosener: And now, when I press calculate grid.
Bill Rosener: sure enough, it is displaying test.
Bill Rosener: Okay.
Bill Rosener: okay. Now coming on, let's go ahead and action. I can delete that I just wanted to. There's no sense continuing. If you're not getting test to display, that means something is wrong, and maybe make sure you get your starting bracket, your closing bracket compute grade. Everything is looking good there.
Bill Rosener: Okay, I'm just gonna grab a little code here.
Bill Rosener: So these 2 lines right here.
Bill Rosener: I'm declare 2 variables. Exam, one and exam. 2.
Bill Rosener: 1st line is going to extract
Bill Rosener: the information from document form one exam, one form, one dot, exam. One dot value. That would be the 80. Then I'm going to grab in this case the 90 that's going to be stored here. I'm going to add them up. Then I'm going to divide by 2, and I'll tell you what. It will go ahead and display this information.
Bill Rosener: and I'm display that in average dot value equals average.
Bill Rosener: So down here
Bill Rosener: is my text box for average. So I've computed the average. Now, I'm gonna say, document form one dot average equals average. So let me save this.
Bill Rosener: Go ahead and open up my default, browser
Bill Rosener: and compute grade, and sure enough, is taking those 2 numbers, adding them up, divided by 2.
Bill Rosener: Let me come back. We'll add a little bit more code. Here. Tell you what. Let me enter some other numbers here.
Bill Rosener: I mean something. 91. Let me see what happens if I get that.
Bill Rosener: Now I'm still getting some nice numbers here, let me go ahead and put one thing in here.
Bill Rosener: This is going to round it to 2 decimals. So if you're getting some unusual numbers and you want to round it, you can simply say, average equals the round.
Bill Rosener: and that's going to round that to 2 decimal points there. Okay.
Bill Rosener: okay, next step is, let's go ahead and compute
Bill Rosener: whether or not, they're passing or failing. That's gonna be done using an if statement.
Bill Rosener: So I'm gonna take a look at the average. Here was the average
Bill Rosener: adding up to 2 divided by 2, and if that's greater than or equal to 70, I'm going to display
Bill Rosener: notice in form. One dot status form, one dot status I'm display passing.
Bill Rosener: If that is not true, I'm going to go ahead and display failing. So let's go ahead and check this out
Bill Rosener: right click open and default browser and hit compute grade. And sure enough, everything is working here so far.
Bill Rosener: and you can see by having the 80 and 90 every time I try and check this, I'm not having to enter those values right away.
Bill Rosener: Okay, now, let's go ahead and get another great big if statement here. And this is going to compute the grade.
Bill Rosener: Okay? And here's what's gonna happen is, I'm gonna take a look at the average. If it's greater than or equal to 90. I'm gonna say, form one dot grade equals. Here's my grade.
Bill Rosener: I'm going to say that is equal to an A if that is not the case I'm going to go. Well, is it greater than or equal to 80? If someone display? B. I'm going to take? Well, that's not the case. Is it greater than or equal to 70 a. C. And just kind of keep on working my way down. And finally, if nothing, if it's not greater than 60. I'm going to go ahead and display an F.
Bill Rosener: So let me go ahead and take a look at that, save that open and default. Browser
Bill Rosener: hit a compute grade. And sure enough, everything is working perfectly here.
Bill Rosener: Okay? So at this point I would probably come along.
Bill Rosener: Now we've got everything working. But I'll let you. Why don't you go ahead and leave your values in there? That makes it a little bit easier when I grade them. But at this point I would typically go ahead and remove the default values.
Bill Rosener: I would save it.
Bill Rosener: Opening my default, Browser. And I can see I've got nothing here initially. So then I could put
Bill Rosener: 80 and a 70.
Bill Rosener: It's a calculate grade, sure enough. It's a 75 still passing. And the same.
Bill Rosener: okay, well, hopefully. Now, let's take a look here hopefully in this video, you learned how to simply
Bill Rosener: create a little simple grade calculator which is going to add up 2 numbers and display whether or not
Bill Rosener: display the average, whether or not they're passing. And then finally their grade. And if you want to just play around
Bill Rosener: you go ahead and try cod minimium, and you might be surprised.
Bill Rosener: if you went over here and maybe and created a new document you might want to do is come right up here to file new text file.
Bill Rosener: And you just come right up here. I'm gonna hit the control. I and you can type in
Bill Rosener: create a Javascript, create a let me type on create, actually create a grade talk later.
Bill Rosener: And then maybe I'm gonna put.
Bill Rosener: You've seen Javascript and HTML,
Bill Rosener: and I probably would want to get more specific there, create a grade calculator that allows
Bill Rosener: 2 values to be entered using Javascript and HTML, and we'll see what
Bill Rosener: it does. And it's looking very similar to what I just got done doing rather than
Bill Rosener: using form one. They're just going to simply get the element. Let me go ahead and hit. Accept here.
Bill Rosener: And I'm gonna right. Click on this. Let's see what this one does. I tell you what, I'm gonna go ahead and
Bill Rosener: I'm gonna put
Bill Rosener: dash AI, just so we know we're looking at the right one. I'm gonna save that oops
Bill Rosener: bio. Actually, I need to give it a name
Bill Rosener: and go to a file, save as
Bill Rosener: I'm just going to call this temp dot HTML, and hit save.
Bill Rosener: Okay. Now I can right. Click on it. Open a default, Browser.
Bill Rosener: Here's my grade calculator, AI,
Bill Rosener: and I'm gonna go ahead and put an 80, and I'll put a 70, and I'll get to calculate.
Bill Rosener: and the average is 75, and this one might have to do a little more work. I'm not having to display the status or the grade. But you can see it's simply adding up those 2 values and computing a grade there. Okay, well, hopefully, in this video again, you learned how to create a simple little grade calculator. Using Javascript at this point, you simply take your file
Bill Rosener: and you would take this file right here and upload that to your website. I'll catch you next. Video. Thanks a lot. Bye.