Hello and welcome to this video.
In this video we are going to create a directory for our project.
We will also create the hash tag email structure for the project.
I'm going to create the directory on my desktop by just right clicking ongoing New Folder and I'll just
keep the folder in there.
I'm just going to call it loan calculator so you can also create directory the same way.
If you are using a Mac.
So that's my directory that I have coded loan calculator.
Next thing I want to do is create the hash tag email structure for the project.
I am going to be using sublime text editor to create the structure.
So this is the sublime text editor.
I am going to add the hash to my code.
I have already pre staged it so I'll just add the code on and I'll explain the code line by line.
So the first thing I'm going to do is name my file here.
I'm going to court.
This is gonna be my hash TMM files.
I'm calling the loan calculator CML and I'm saving it inside my directory which I've called a loan calculator.
Quick Save.
You can see here a displays the name of the document and here on the bottom right.
Also you can see says Hastie CML or any code I add in here will be Hastie AML code.
I have added some basic structure to our CML document.
I'm just going to run through them with you.
Line 1 here is the doc type which basically is a declaration to the web browser just to let them know
that the type of document it should display is hate him and document.
And here this is where the hard to email documents text from dog type tells a browser.
This is his CMO five document.
So from line three to line 23 is what constitutes.
They had told each mail document.
So we've got the head section inside the head section we've got a meta concept.
This attribute basically refers to the unicode the type of characters it will accept UTF Dash 8 is the
standard character format used in the world.
And here on line 7 I've got a link to the style shift.
I'm going to be using an external style sheet which I will create later and I'm going to call it loan
calculator dot CSA.
I've just added a title called Long calculator.
So the title is what will be displayed in the browser window when the application runs.
Moving on to the body section here which this is the opening body tag and that's it close and tag the
body tag basically is where the content for the actual application is rendered.
So any content you see within the body tag is what is going to be visible to the user.
So here I've got an idea I'm going to wrap the content inside a div and I've given the div an I.D. attribute
of lone cow.
And here I've got an hate one tag.
This is a head in tag that will display the title of the application.
It will just say a loan calculator in here in between.
After the font I'm going to add some paragraph the paragraph will serve as input fields for the various
parts of the loan calculator.
And here I'll got a script.
This will be my javascript.
This is where I will add the logic or the function that would do the actual computing or calculation
of the low.
And this is the name I'm going to call it when I create the FA fa.
I have added some paragraph here are the three paragraphs here that will be used as input fields for
us to input the values that we will use to calculate the load.
So here called this will going to be the loan amount and it's going to be in dollars and they have given
the put an idea of amount the type is going to be in number and the minimum is one maximum five million.
And here are called the on change event the on change event basically occurs when the value of an element
has been changed.
So each time the values has been input it changes this on change event here.
We'll call this function which is a compute on function and it will real calculate and compute the new
value based on the input that has been entered.
So we'll be creating a function called compute loan later inside our JavaScript file.
Here we've got all not a field here called interest rate and it's going to be in percent.
So this is where we'll input the interest rate and the type of giving it's an idea value of interest
on the score rate.
The type is going to be in no minimum value is zero maximum.
It's gonna be a hundred in terms of interest rate.
I'm gonna start off with an initial value of 10 percent as the interest rate and then sort of cohere
called step the step attribute basically easy used to specify the legal number of intervals for an input
element.
So this tape is basically specifying the legal number of intervals for the input element and normally
you can use this with the maximum and minimum attributes you can see here called minimum entry beauty
and maximum entry bit also again.
We are attaching the on change event so any time these value changes it will call this function here
called compute loan and here for the other paragraph we've got the months to pay.
So this will be the value to be entered for the amount of month it will take to repay the loan.
So I've given this input an IED or month that type is going to be a no minimum values 1 maximum value
is 300 months 300 months basically is equivalent to 25 years.
So if you can change his value if you want to do that the value initial value of given me time to be
1 again I am using this step attribute and the value of that step is 1 again just to re reiterate that
the step attribute is is used to specify the legal number of intervals for an input element.
All right.
Again here we're calling The on change event so if any time the value changes it will trigger this function
here called compute loan and it will re compute the values entered here we've got a hedge to element.
This is what will display the actual amount to be paid monthly.
So the amount you pay monthly will be displayed inside this H2 tag.
So all the values in green here are no known as attributes the values in green are attributes attributes
basically provides additional information about hasty AML element.
Anyway you've got value here added value attribute basically specifies the value of an input element
whatever value you enter.
This is what is going to capture the value.
So I'm just going to save this.
We've basically finished the structure we can run this inside our hasty AML to see what it looks like.
So I'm just going to open up the directory and double click on this loan calculator to attach to AML
and you can see here this is the basic structure.
So this is exactly how I want the structure to look.
So in the next lecture we'll start doing the javascript part of it will create the logic that will make
all these work.
So that's it for this lecture.
Thanks for watching.
Bye for now.