Hello, this is no this video, you're going to learn how to develop a college expense calculator using JavaScript. Let's start by taking a look at what you're not creating
So I'm gonna allow user to enter a value for house and I'm gonna enter some really simple value. So I can do the math to confirm, everything's working great.
How did for housing 200 for tuition and then box. And so now the user presses calculate total it's going to simply add a three step three, three values and display it here.
OK, now that we want to know now we know what we're going to create that. Let's get started here.
So the first thing I'm gonna do is I'm gonna open up notepad. I want to open up in some type of basic editor, like Notepad or Notepad and I tell you what, let me just show you why you would want to not use Microsoft Word.
Get started here there's several things Microsoft Word tends to insert special characters, but even wanted when I start putting quotes around this.
Notice how it's used in these smartphones. If I was to save this it would not work. It's got to be just a regular quotes that these smartphones, so
Go ahead and use Notepad Word pad and for example notepad. If you just went to Windows accessories you should find those
Okay, so I'll take a look. Very first thing was going to get going to insert college expense calculator number come right up here. Number type in ahead of time. I could use a header to as well right header one expense.
Calculator.
Know, behind closed. I have a three time. Okay, so I've talked to so basically just now I'm gonna start my three tag, I'm going to close it.
requires more work to do here, but let's go ahead and say this, let me come up here to file on the go to say mass. I'm gonna save it on my
On a folder called a town and I'm just going to call this calculator and I tell you what, when we just got looked at was, I called that calculator so simply put a to hear
So three things. I'm going to go ahead and specify a file or folder. This case happens to be on
My desktop here on the cost calculator to and then I'll just save this as a text document and I'm gonna go ahead and press Save.
Okay, at this point, I'm going to go ahead and come to my browser. This was just counted on the come up here and go to File, when we go to Open File. I'm going to choose my calculator to and I'm going to go ahead and press Open and here it is.
Sunday. Now what I'm gonna do is I'm gonna keep going back and forth between my case Notepad because he's worth bad for some other editors. Again you void Microsoft Word.
And I'm just going to be making some changes that take a look at it in the browser. Another way to do that would be to simply right click on your file, it's
Some you made some changes. And then just hit open with and you can choose any browser Firefox, Chrome Internet Explorer or Microsoft Azure.
Okay, so let's come along and tell you what I'm going to close this. Once I just keep coming back for this one.
I'm gonna come back here to my calculator to not going to go ahead and start working on the forum.
I'm gonna go ahead and create a forum on the call. Just so just fall for one is going to give it a name. Don't refer to that name and the JavaScript.
And I would close the form before I get started here. Okay, so the first thing at the very top that said housing.
And when we looked at was all formatted into a table which, if I'm still there. I came back here, we've got this nice table on I'm going to create this one very straightforward. I'm just going to go housing.
input type equals tax. I'm gonna go name equals housing, I can specify a size here on the size of the text box ready to go with a 10
You know what you could even there was in or a default value. The best put 100 here. So while you're dividing this developing in the development. You don't have to keep entering information there.
Okay, at this point, go ahead and insert a paragraph and I'm going to keep checklist periodically. So let me go ahead and save it again or come up here to File, Save.
Come up here and I'm gonna hit the refresh button. You can also hit control are like to do is sit on my particular control F bar which forces around the case of
The second cash and here we go. OK. So now I'm going to come along, or you could grab this line. If you wanted to some prototyping and will paste that. And next comes to fruition.
And then I need to give it the name tuition, so I can access it again by JavaScript. And again, feel free to insert a value so that when we are developing it. You don't have to keep entering that you soon.
Okay, next one was Brooks.
And will come along and I'm the type of books here.
Okay, then it'll be like that 300 kind of match, for example, at the beginning, and I'm gonna go ahead and save that you can also hit the keyboard Control us
You can see right there is going to save it. Don't come to my browser and I'm gonna hit refresh, or I can press appear again a controller five is going to force remove our boxer
OK, so now we've got our form. If I take a look. Next thing was a horizontal line going across somebody go ahead and insert that and then we're just simply be a
HR, I could if I wanted to put paragraph report or set a rule, and I could put another paragraph break. I wanted to know what we need to do is have a text box for our total
I'm just going to call this toggle
And they'll come over here and give it the name total
And then I'll put another paragraph break. Let's say maybe like it's just going to keep my
Little shorter
Okay, yeah. Now what we need to do is insert a command.
This is going to be uptight button know someone's replied tax will allow the user to enter data.
Then what you can do is I specify what guy. You should appear on the command. I'm not going to put in calculates
That skill that's going to appear on the commandment that could be anything you wanted to. And then what happens with one click here. We're gonna have to make sure it matches our JavaScript.
Open parentheses, close parentheses.
And we'll close it. Okay, so let's take a look here. I'll see if I'm gonna go ahead and save it, make sure everything's looking good.
Come back to my browser and hit refresh. And let me remove the default value.
Within total. So I'm gonna go ahead and I'm just going to what I could do is just simply place them. Are you there. Okay. So this one, I would say.
Come to come to my browser, and I would hit refresh. So we're better at three values when the user hits calculate total though it's not going to work. Yet it's going to have a strong values and places up in here.
Okay, so at this point, we're now ready. I was that HTML form. We come up here to the top. And we're going to start working on the script.
And this is going to be JavaScript.
Import forget to make sure your clothes, your script tag. Okay, now I'm gonna go ahead and create a functional. This is going to have to match. It's going to be that case sensitive
I have called this calculate your my form. So when the user presses on that. It's going to look for a function called calculate. It's got a match the case. The spelling everything
And what I love to do some little curly brackets going to start the function that's going to close the function. What I like to do is just go ahead and we're going to make sure everything is working correctly.
Okay, so what's going to happen is when the user press on and we're just going to have a testament to initially appear this total
So it's going to go into document formula. And actually, that's one form elements that the dolls.
And it's going to go in. Notice all lowercase total Thomas. I'm going to go for one total dollar value that's going to display towns. I'm gonna come up here to file.
Say, we'll come back to the browser and I'm gonna hit refresh. So now, and hit calculate total, sure enough, it is displayed in test within
Boxer competitor texture tag. Okay, listen, we got some more work to do here. We're getting close to them. So now we at least now when I press on this command button.
It's calling this function and it's displaying something whenever we go ahead and we're going to create some variables. Okay, number one.
Two and three. Make sure you get your comments between the variables and then a semi colon at the end. Okay, I'm gonna say number one is equal to
I'm going to do is, obviously, this is number one them to them three on add them up and display it in my total down. So number one, it's going to be a parse. Well that's account. Everything else is lowercase except that
We take a look at the document.
Formula One that housing.
Value.
Okay, someone take a look at the document form on and start with housing. So notice again it's case sensitive all lowercase all lowercase them okay then to Rama copy and paste this line to say just a little type in
What I'm saying I'm too.
Well, that's going to be the information in tuition.
Somebody come on down here and grab this information. And the last one, number three is going to be the information and books.
Okay, now I have read information. So really, these three lines here i'll do is i'll read the information this the call this information stored in the one and two and then through at this point, we simply need to add them all up.
Now granted, you say, I couldn't come up here and I've also created a variable called total I wanted to
And I'm saying total is equal to number one was no two plus three semi colon. Okay, now rather than displaying test. We're going to display.
So again, I've declared some variables. I've read the information from housing and then one tuition them to books and have three on the add them all up.
Placement a variable called total. And then I take total and display it in form one total type value. Let's check this out. I'm going to File, Save.
Will come back to my browser and hit refresh. And now, hopefully we're on display that sure enough, it is that in the 100 200 300 and display that is 600 okay but one little thing here for wanted to get $1 sign one little way to do this is that the best way is we can
dollar sign in front of total. So that's going to use the string concatenation of $1 sign was total this point, I'm gonna go ahead and save it.
Back to my browser and hit refresh and wow I'm gonna get that dollar sign typically at this point. Now what I'm going to do is come along and remove
I there wasn't that much you're checking going on. But at this point, I'll remove these default values. I'm going to hit File, Save and I'm gonna come along and refresh you and I probably should remove this back to
So now I've got a working model. So now I couldn't possibly interests of the real numbers.
And books and I was 879 and now when I hit to calculate total it's going to simply out of three three values and display it in total. And again, here was the JavaScript.
Pure of yours is not working, lots of little things could go wrong here mixture. You've got your quotes, just a JavaScript ride your commands instructions in with semi colons. It's case sensitive. This is
These down here I could use a capital H I could use whatever a combination of capital letters and lowercase letters. However, this is a built in function of your parcel and here it has to be all lowercase.
Letters, except for the capital of so make sure you got a capital up there. Your semi colons.
Just look over close that you'll find the mistake of. It's not working. Make sure you have in your scripts. I make sure you spell JavaScript crack way and then hopefully which point you should be working JavaScript.
Well, catch the next video. Thank you.