Bill Rosener: Hello. So Dr. Bell, welcome back in this video, we're gonna create a college expense calculator using HTML and Javascript in particular, we're gonna allow the user in our value for housing, tuition and books. And then, when we press, calculate total, it's gonna add them all up. Let me just change this value one of those values a little bit, and if I
Bill Rosener: and I'll see, sure enough, it's adding them up correctly. There, okay, now that we know what we're doing. Let's go ahead and get started. And we'll recreate this from scratch.
Bill Rosener: So the very 1st step I'm gonna do is open up visual studio code. I'm gonna come right up here to file new.
Bill Rosener: I'm gonna go ahead and type in assignment
Bill Rosener: 21 dot. HTML, I'm going to press the enter key and create file.
Bill Rosener: We're gonna go ahead and recreate this thing from kind of scratch
Bill Rosener: line by line, and then maybe we'll go ahead and see what AI is capable of doing
Bill Rosener: so at the very top. We want a little header. Tag.
Bill Rosener: maybe had a 2 tag
Bill Rosener: college
Bill Rosener: expense
Bill Rosener: calculator.
Bill Rosener: Okay, we're going to insert our script here in a little bit.
Bill Rosener: But for now let's come on down here a little bit further, and we'll start with the form.
Bill Rosener: and I need to give it a name. You could call this college calculator. I'm just going to call it the form one kind of keep it really simple. Here.
Bill Rosener: I need to close that.
Bill Rosener: Okay? And the 1st one is going to be housing. And I tell you what, if you looked at this, I kind of.
Bill Rosener: I kinda carefully formatted this in table. So everything lined up perfectly. Let's keep this video a little bit short. I'm gonna worry about that.
Bill Rosener: So I'm gonna type in housing
Bill Rosener: and poets
Bill Rosener: type equals
Bill Rosener: tax.
Bill Rosener: Now, I need to give it a name. I can also use an id. But I'm gonna give it a name. So I can access this in my Javascript.
Bill Rosener: I can specify a size for the text box. I'm just going to go with 7,
Bill Rosener: and then to make things while I'm developing. And I don't want to keep having enter values here. So I'm just gonna go ahead and enter a value here. And I'm gonna come, keep these nice and simple. Here I'll go with 4,500
Bill Rosener: on
Bill Rosener: housing. And then again, eventually, I will delete that.
Bill Rosener: Okay. Now I'm gonna put a paragraph break at the end just to have a little breathing room between the various things. I'll tell you. Let's go ahead and save this. Take a look what we've got. I'm gonna go to a file.
Bill Rosener: I'm going to press, save.
Bill Rosener: I'm gonna go ahead and right click
Bill Rosener: open and default Browser.
Bill Rosener: And let's see what we've got.
Bill Rosener: Okay and looking good here. So we've got our header, 2 tag college expense calculator. And we've got one text box
Bill Rosener: or the user can enter a value.
Bill Rosener: Okay, let's just go ahead and grab that one line of code. So I've got some paragraphs on the end paragraph at the end, just to add a little breathing room. The next one is going to be tuition.
Bill Rosener: and I'll go ahead and change this to
Bill Rosener: just 2,000,
Bill Rosener: and then I'm going to go ahead and paste this one more time.
Bill Rosener: and I'll add books
Bill Rosener: and put type same thing.
Bill Rosener: This one is going to have the name books
Bill Rosener: size 7, and let me just go with 500 on this one. So I've got the 2,500. So I should be getting 5,000 there.
Bill Rosener: Yeah, 5,000.
Bill Rosener: Okay, I'll tell you all. Let's go ahead and well, we could throw a little horizontal rule in here.
Bill Rosener: and maybe even only have it occupy a portion of the screen.
Bill Rosener: Okay, let's go ahead and take a look at that. I'll save this
Bill Rosener: back to my browser and refresh. It looks like I need to line that over there on the left.
Bill Rosener: and I'm gonna save that
Bill Rosener: and refresh
Bill Rosener: up here. You can press there, or you can use the keyboard shortcuts, too.
Bill Rosener: Okay? So anyway, that top part is looking great. Now, what we need to do is go ahead and create an area total to store the total amount and a command button.
Bill Rosener: So I'm just gonna go ahead and grab one of these lines of code.
Bill Rosener: copy it.
Bill Rosener: paste it.
Bill Rosener: And I guess I if I want to put that in both phase.
Bill Rosener: I can put a tutelt on, and then I'm gonna come over here
Bill Rosener: and give this the name total.
Bill Rosener: And here I definitely want to delete the value because there, the top ones are. Gonna save me a little time just while I'm developing it. Then I'll remove that. But here I never wanted to automatically insert a value.
Bill Rosener: Okay, then, finally, the last line is gonna be our so the 1st input types for type, equal text.
Bill Rosener: Now, I'm going to get type equals button
Bill Rosener: on click
Bill Rosener: equals
Bill Rosener: calculate.
Bill Rosener: And then the value
Bill Rosener: or the caption that I want to appear on the command button.
Bill Rosener: Okay, so I've got the total input, typical tax
Bill Rosener: name is total size value. Okay, input type button on click. So when I click on this button, it's going to look for a Javascript function called calculate, which you'll be working on next. So let me go ahead and save this.
Bill Rosener: Come back to my browser. Hit refresh.
Bill Rosener: and this is looking perfect again. If I press right here. Nothing's happening because we haven't credited our Javascript function. But we got the Ace mail hopefully finished term.
Bill Rosener: Okay, moving on. Now, I want to come up here to the script.
Bill Rosener: I'm going to create a
Bill Rosener: function called calculate
Bill Rosener: and call whatever I want as long as it matches.
Bill Rosener: Whoops
Bill Rosener: come back there
Bill Rosener: so long as it matches.
Bill Rosener: So down here I called it calculate.
Bill Rosener: So I need to make sure. Up here. I call call it calculate.
Bill Rosener: and I'll tell you. Well, let's just go ahead and initially put a value in here.
Bill Rosener: I'm gonna go a document.
Bill Rosener: dot form, one
Bill Rosener: dot total
Bill Rosener: that value equals. I'm just going to put some
Bill Rosener: dustin here initially.
Bill Rosener: Okay? So why? So I need to. 1st of all, make sure
Bill Rosener: that I've spelled this Javascript is case sensitive. So I've got calculate. So when I press on it, it's going to come up here. Look for a function called Calculate. And then what I'm going to do initially, I'm going to say, document dot form one y form one. That's what I called it here. And then I'm going to say total.
Bill Rosener: And here's total dot value equals test. Let me go ahead and save this.
Bill Rosener: Okay, and I'll go ahead and take a look at it over here in my browser and refresh.
Bill Rosener: Okay, so great. Right now.
Bill Rosener: I know when I press, calculate total, it's calling my Javascript function. And all it's doing is putting test in here. If you have no idea that there's really no sense to keep moving on. Make sure you've spelled script correctly. You're closing your script function, calculate. It needs to match identical
Bill Rosener: and then document form one. I don't have any like if I start putting a space here, it's not gonna work, because I've got no space up here. So make sure you don't have any spaces there. And typically you never want to put a space inside them.
Bill Rosener: A variable, for example.
Bill Rosener: Okay, let's go ahead and move on.
Bill Rosener: So now I'm going to go ahead and
Bill Rosener: work on the code a little bit more.
Bill Rosener: I'm to current. Declare 3 variables.
Bill Rosener: That's the bar. It's going to declare variables.
Bill Rosener: and I'm going to say, number one
Bill Rosener: is equal to
Bill Rosener: parse load
Bill Rosener: document, dot form one
Bill Rosener: dot housing
Bill Rosener: that's value.
Bill Rosener: and I'll go ahead and I close. That
Bill Rosener: can't tell you what. Let me just save a time here. I'll copy and paste this twice.
Bill Rosener: and I'm gonna say, Num 2
Bill Rosener: is equal to tuition.
Bill Rosener: not value.
Bill Rosener: and
Bill Rosener: oops. Make sure I get my 2 here.
Bill Rosener: and the last one will be a numb. 3.
Bill Rosener: And this will be books.
Bill Rosener: Okay. So what did I do? What have I done so far is I've placed housing and num one tuition and num 2, and books in a variable called Num. 3.
Bill Rosener: Now I can say total is equal to
Bill Rosener: number one.
Bill Rosener: plus
Bill Rosener: them, too.
Bill Rosener: plus
Bill Rosener: none through.
Bill Rosener: If you wanted to. You can see I'm using total twice, once is a variable. But then I'm also used total as the name of an input, and that's perfectly fine. But if you wanted to you could give this a different name.
Bill Rosener: And now what I'm gonna do rather than put in this test, I'm gonna display total.
Bill Rosener: and maybe I'll delete a line 2 here. Okay, and we should be ready to go. So I'm going to grab the 3 values housing tuition books. Put them in variables. Then I'm take number one, plus number 2, plus number 3, put in a variable called total. Then I'm going to take total and place it in document form one
Bill Rosener: dot total dot value. Let's go go ahead and take a look at this. I'm gonna go to file.
Bill Rosener: save
Bill Rosener: come back to my browser. I'm gonna hit, refresh or reload.
Bill Rosener: I'm gonna hit, calculate total. And sure enough, I'm getting 5,000. So if I've changed this to
Bill Rosener: 500,
Bill Rosener: sure enough, that makes you get a little bit larger for you to say if I change that to 500, sure enough, I'm getting
Bill Rosener: 3,000.
Bill Rosener: Okay. Well, Ted, let's go ahead and see what
Bill Rosener: AI would do for us. So right now, I kind of think AI has kind of learned a little bit about
Bill Rosener: my particular format here. So let's let's go ahead and see what AI is capable of doing.
Bill Rosener: I'm gonna come right up here, file new file.
Bill Rosener: We're gonna call this temp one dot hergus temp.it temp, I'll put it AI dot HTML
Bill Rosener: and Craig.
Bill Rosener: Okay, now I'm gonna do this. I press control. I on the keyboard. And again, that's gonna probably vary dependent on your extensions. I've got the extension codium installed.
Bill Rosener: So I'm just going to come right up here. Hit that control. I
Bill Rosener: I'm gonna go type right here. I'm gonna type a
Bill Rosener: create
Bill Rosener: HTML and a Javascript
Bill Rosener: function
Bill Rosener: to add
Bill Rosener: 3 values.
Bill Rosener: How's it in
Bill Rosener: tuition
Bill Rosener: books
Bill Rosener: and trying to think we should add something else. And I'm just gonna put other. So let me go ahead and change this. Just so it's a little bit different and
Bill Rosener: 4 values. And they're about to call this one miscellaneous.
Bill Rosener: So create HTML and javascript function to add 4 values, housing, tuition books, and miscellaneous. Let me go and hit the submit.
Bill Rosener: and that just looks way too easy. So anyway, it looks like it's a housing tuition books miscellaneous. Let me come up here and accept the code.
Bill Rosener: I'm going to go ahead and save.
Bill Rosener: I'm gonna go ahead and right click on this and open in default. Browser.
Bill Rosener: Okay, so let me put some
Bill Rosener: simple numbers in here.
Bill Rosener: 500,
Bill Rosener: 1,000,
Bill Rosener: 1,400
Bill Rosener: and hit, calculate.
Bill Rosener: And sure enough, it has added them all correctly. So anyway, I hopefully, I'm having walk through this
Bill Rosener: line by line. Now, when you generate the HTML. Maybe that code means hopefully makes it much more sense to you and plus if you ever are forced to edit, that's going to be much easier edit, if you understand the Javascript. But anyway, hopefully, in this video, you learned how to create an HTML,
Bill Rosener: a calculate college expense calculator using the combination of HTML and Javascript. And I'll catch the next video. Thanks a lot. Bye.