Now this is how it works we can see that we have the option of entering the amount the interest rate and the tenure and then we can see that the loan emi the total interest payable and also the total amount will be displayed over here and we also have this chart over here where it displays the total interest and the principal loan amount now let's go ahead and change this value to something else let's type 80 000 over here and let's click on calculate and we can see that the loan emi and the interest and the total amount is displayed over here and we also have the.
Chart updated over here so this is how it works we're going to create everything from scratch using html css and javascript and this is also responsive so if i decrease the width of the browser window we can see we have a different layout for all the elements and it looks alright in the mobile version as well right so here i have created this folder called loan calculator and i just opened it with vs code so let's go ahead and create a new file so let's click on new file and we'll just create an html file i'll just name.
It index.html and we also need to have a css file so let's create a new file and let's name it style.css and we also need to have a javascript file i'll just name it main.js let's start with the index.html file now in vs code you can just press exclamation and press tab and you'll have this basic html5 code and let's link our css file over here so i'll just type link and press tab and in the edit file just type style.css and we'll also link our javascript over here so i'll just type script colon src.
And press tab and here let's type main.js all right let's start by creating a container division so let's give it a class of loan calculator and in this we will have a division with a class of top for this top section over here so let's create a division of the class of top and in that we need to have a heading for loan calculator so let's create an edge too and here let's type loan calculator.
And then we'll create a form to add these input fields so let's create a form and let's create a division for holding each of these input fields so let's create a division of the class of group and here we will have a division of the class of title for this title so i'll just type dot title and here i'll just type amount and then we need to have the input field so here i'll just type input and for the type i'll just keep it to text and then we will give it a class of loan amount.
And i'll just paste it down two more times and here we need to have interest rate and here for the value i'll just type 7.5 by default and here for the class i'll just type interest rate and then we have the tenure so here let's type tenure in months and for the default value i'll just type let's say 120 and here for the class i'll just type loan tenure.
Right that's it with all the input fields so here we can see the three input fields are displayed over here now the next thing we will do is we'll create a division with the class of result to add all these elements so let's go back and let's create a division so here i'll just create a division with a class of result and in this we need to have a left part and a right part so in the left part we will have.
These details over here so here let's create a division of the class of loan emi and in this we need to have an s3 for the heading so i'll just type s3 and here i'll just type loan emi and then for this value i'll just create a division of the class of value and for the value i'll just type some random number for now and let's go ahead and copy this division and we'll just paste it two more times and then for the second division we will have a class of total interest.
And here for the heading i'll just type total interest payable and then for the value i'll just type some random value and the next division is total amount so i'll just change the class to total amount and for the heading i'll just change this to total amount and here i'll just type some random value right now the next thing we need to do is create this button so let's create a button and we'll give it a class of calculate button.
And here for the text i'll just type calculate and then we need to have a chart on the right so here we have the left division so let's create a right division over here so just create a division with the class of right and here we will have the chart so for now i'll just type chart over here right now let's go back to our design and we can see that all the elements are displayed over here now let's start styling this so let's go to our style.css file and first of all let's target the loan calculator which is the container division so let's type dot loan calculator.
And we'll get a font family of roboto and sans serif Wesdigital
And let's set the width to 600 pixels and we will set the margin to 24 pixels top and bottom and out of the left and right so that it'll be in the center now let's give it a background color of white and we will add a box shadow so i'll start box shadow and let's set the values to 0 12 pixels 50 pixels negative 11 pixels rgba and 0 0 0 and 0.2.Right now let's add some rounded corners so i'll just type border radius and let's set it to 8 pixels and we'll set the color of all the text to 1421 3d right now let's style the top division so here we can see we have created a division of the class of top so let's tile that here let's type loan calculator and let's set the background color to the dark color 14213d and let's set the color of the text to white.
And we'll set a padding of 32 pixels right now let's tile this heading so let's type loan calculator top h2 and let's set a margin top of zero right now we want all these groups to be one next to the other so let's target the form so i'll just type loan calculator form and let's set the display to flex and we'll also set a gap of 8 pixels.
Between each of them and we'll set the justify content to space between so that they have the correct spacing now we will have some gap between the title and this input field so let's type loan calculator and we had given it a class of title so let's set the margin bottom to 16 pixels now we can see that the border radius is not being displayed over here on the top division so for that we have to go over here to the container division which is the loan calculator and we have to set.
The overflow to hidden so that anything outside this division is not visible and now we can see we have the rounded corners right now let's style these input fields so let's type loan calculator form input and let's set the font size to 20 pixels and we will add a padding of 8 pixels top and bottom and 24 pixels left and right and we'll set the width to 100 percent and now we can see we don't have the correct width for all of these elements because of the padding so for that let's.
Go over here to the top and we will add a line of code called box sizing border box so let's type loan calculator and also loan calculator and all the elements inside that so i'll just type asterisk over here and here i'll just type box sizing and set it to border box now what happens is that it will include the padding and the border of the element inside the width of the element so now we can see we have the correct width so let's scroll down and now let's tile the result solid step.
Dot result let's start loan calculator dot result now we want these elements to be on the left and this chart to be on the right so here i'll just type display of flex and let's tap justify content and space between so that both the elements are on the extreme left and right and let's also bring it to the center vertically so i'll just type align items to the center right now let's tile the left part so i'll just type loan calculator result left and let's set the width to 100.
Percent and we'll set the padding to 8 pixels top and bottom and 32 pixels left and right if you give it a background color we can see that we have this full width for the left division but when we will add the chart it will take up the space that it needs so let's remove this background color all right now let's tile these headings so for the headings we have an s3 i think so here we can see we have an s3 so let's style that so here let's type loan calculator left.
S3 and let's set the font size to 16 pixels and the font weight to 400 and we will have a margin bottom of 8 pixels right now let's tile these values so for the values we have a division with the class of value so let's style that here i'll just type loan calculator result value and let's set the font size to 30 pixels and let's set the font weight to 900 and we will have a padding bottom.
Of 10 pixels and we'll also have some border at the bottom so let's start border bottom
And let's set one pixel solid and we will have a color of rgba 20 33 61 and 0.2 for the opacity now you can also add the currency that you want over here on the left so you can use a before selector for that so here just type loan calculator result value column column before and here list type content.And here in the content you can type the currency and just type dollar symbol now you can see we have the currency displayed over here let's add some styles so i'll just type font size and i'll just set it to 18 pixels or let's increase it to 24 pixels and let's set the font weight to 400 and we'll also add some margin right so let's type margin right and let's set it to 20 pixels or i think 10 pixels i think six pixels it looks.
Alright you can go ahead and play with these values and style this to your needs i'll also set the opacity to let's say 0.4 right now let's tile this calculate button so for that we have a button with the class of calculate button so here i'll just type loan calculator calculate button and for this we will have a background color of e63946 and let's set the color of the text to white and we also remove the border so let's start border none.
And let's set a padding of 8 pixels top and bottom and 32 pixels left and right and we'll also add rounded corners so i'll just type border radius and set it to 8 pixels and let's set the font size to 18 pixels and let's set the font weight to 900 and we'll also set the cursor to pointer so that when we hold over this we have this pointer and let's also add some margin top so just have margin and 24 pixels for.
Top and bottom and zero for left and right and i think that looks all right we'll also add some basic styles for the mobile version so let's tap at media and here we'll just have max width of 650 pixels now when the width of the browser is less than 650 pixels we will set the width of the loan calculator to 90 percent of the screen so let's type 90 and we'll also add a max width.
Of 500 pixels and let's decrease the width of this browser window and now we can see when we decrease the width of the browser window we have a max width of 500 pixels and when we decrease the width even more it changes back to 90 percent i will also bring all these elements one below the other so here we just type loan calculator form and we'll set the flex direction to column so now we can see all these elements are one below the other and we'll also.
Increase the gap a little bit so let's tap gap and let's set it to 16 pixels i think we can increase it a little bit more so i'll just type 20 pixels and that looks alright now let's go ahead and position these elements one below the other so we will have these details at the top and then we'll have this calculate button and then we'll have the chart so let's target the result division so i'll just type loan calculator result and let's set the flex direction to column.
And we'll also set the text align to center and now we can see everything looks alright we have the chart over here so that's basically it with the styling of our loan calculator now in this video we will add the javascript to calculate the loan emi the total interest payable and also the total amount so the result will be calculated based on the values that we enter over here in these three input fields right here is our code and we have written all of this in the previous video and we also linked our javascript.
File over here right now the first thing we will do is we will reference all of the elements that we need into our javascript so we need to reference these three input fields we have these classes loan amount interest rate and long tenure and then we need to reference these values so we need to reference the loan emi value over here and then we need to reference this total interest value and then also this total amount value and then the last thing we need to reference is this calculate button so we have this class calculate button over here so let's reference all of this in.
Our javascript so let's go to our main.js file and first of all let's reference all these three input fields so we have these classes loan amount interest rate and loan tenure so here i'll just create a constant i'll just name it loan amount input and here we'll just type document.queryselector and we have a class of loan amount and then the next thing we will reference is the interest rate so i'll just type interest rate input.
And adjust that is equal to document.queryselector and here let's type interest rate and the next thing we will reference is the long tenure so i'll just upload tenure input and we'll set it equal to document dot query selector and here let's tab loan tenure right now let's reference the values so let's scroll down and here we can see for the loan emi we have this division with the class of loan emi and in that we have this division with the class of value and in the same way we have this.
Class of total interest and then we have this class of total amount so let's reference these so here we just type const loan emi value equals document dot query selector and we have a class called loan emi and in that we have a class called value now in the same way let's reference the total interest so i'll just type total interest value and i'll just set it equal to document.queryselector.
And we have a class called total interest and in that we have the value class and then let's type const total amount value equals document.queryselector and here we'll just have total amount and value now let's reference this calculate button so we have a class of calculate button over here so let's reference that here let's have const calculate button equals document.queryselector calculate button.
All right now the next thing we will do is we'll convert the values that we get from this input field into a number so we'll convert it into a float which is a decimal number so for that let's create a variable so i'll just type let and for the loan amount i'll just create a variable called loan amount and here we need to type parse float so this will convert anything that we have inside this parenthesis into a float so let's type loan amount input dot value now in the same way let's create variables for the interest rate and also the loan tenure so let's tablet.
Interest rate equals parse float and here let's tab interest rate input dot value and let's type let learn tenure equals parse float and learn tenure input dot value now here's the formula that we're going to use to calculate the mi and here we can see r is the rate of interest calculated on monthly basis so the value of r is basically interest rate divided by 12 divided by 100 so let's create a.
Variable for that so that it's easy for us to calculate so i'll just type let interest equals and here i'll just type interest rate divided by 12 divided by 100 right now the next thing we will do is we'll create a function to calculate the emi so let's create a function called calculate emi and in this function we will add the formula to calculate the emi so let's create a variable called emi and we'll set it equal to the formula so here you can see the formula on the screen so let's type loan amount.
Times interest which is interest rate divided by 12 divided by 100 times and he will create a parenthesis and here i'll just type one plus interest and we need to raise this to the loan tenure so for that we will use a javascript function so i'll just type math dot p or w to raise it to the power so here i'll just type comma and we will raise it to the long tenure so i'll just type one tenure over here.
And we need to divide this by the same value minus one so i'll just copy this and paste it over here and here let's type minus one and we need to add a parenthesis over here and we need to close it over here so this is our formula now let's return this emi value so i'll just tab return emi now the next thing we will do is we'll create a function to update all the values so if we go back to our chrome.
Here we can see we have these values over here so we need to update all these divisions so for that we have already referenced it over here so here we can see loan emi value total interest value and total amount value so we need to update all these values so let's create a function for that here let's type const update data and let's create a function over here now in this function we will take the emi as an argument and we will update all the values based on the emi so the first thing we will do is update the loan ami value so just type loan emi.
Value dot inner html and we will round it so i'll just type math dot round and here let's type emi the next thing we will update is the total amount so the total amount is basically emi times the long tenure so let's create a variable for that so i'll just have let total amount equals loan tenure times emi and we will round this value as well so i'll just type math dot round and i'll just add this inside the parenthesis now here i'll just type total amount value so this is the variable.
Suggest total amount value dot in our html and we need to set the html to the total amount all right now the next thing we will update is the total interest payable so the total interest payable is basically the total amount minus the loan amount so let's create a variable for that so i'll just have total interest payable equals math dot round and here let's type total amount minus loan amount right now let's add this.
Value to our total interest value so here i'll just have total interest value dot inner html equals total interest payable right now the next thing we will do is we'll call these two functions so let's create a function called init and here we'll call the function calculate emi and this function returns as the emi value so i'll just store it inside a variable so i'll just type let emi equals calculate emi right now let's.
Call this function update data so this should be data so here i'll just type update data and here i'll just pass the emi value all right now let's call this function over here so i'll just type in it and let's go back to our browser and let's see whether it works and we seem to have some problems in the formula because the value is not correct so let's right click over here and click on inspect and let's go over here to console and we don't have any errors over here so let's check out the values so first of all.
Let's type loan amount and we have the correct value displayed over here let's type interest rate and we have the correct value let's type loan tenure and even for the loan tenure we have a value of 20 000 so we have to change it so let's go back to our code and let's scroll up and uh here we can see for the lone tenure we are adding the loan amount input so let's change this to loan tenure input so just type loan.
Tenure input right now let's go back and let's see whether it works and now we can see we have the correct values 237 8488 and 28488 now let's go ahead and change this value so let's go back to our html let's change the values over here so i'll just change this to 30 000 and let's change the interest to 8.5 and let's change the value of the month to 240. right now let's save this and let's go back to our browser and now you can see.
We have the updated result over here so everything is working all right all right now the last thing we will do in this video is to make this calculate button work so let's go back to our vs code and let's go to our main.js file and here we have already created this constant for the calculate button so let's add an image listener for that so here let's type calculate btn dot add event listener and we will listen for the click event and let's create an arrow function over here and we'll just copy these two lines of code from here.
And paste it over here right now let's go back to our chrome and let's see whether it works so let's change this back to 20 and let's click on calculate and we can see that the value is not being updated so let's right click over here and let's click on inspect and if we go to our console and if i just type loan amount we can see that the value is still 30 000 over here so the value has not been updated so for that let's go back to our code and let's create a function to update.
All the values so let's create a function called refresh input values and here let's copy all of these three lines of code and also this line of code over here for the interest and paste it over here and we need to remove this let from here because we are not creating a new variable we're just assigning these values to the variable so i'll just remove all the lit right now let's call this function over here inside the calculate button so i'll.
Just type refresh input values right now let's go back to our browser and let's change this to 20 and let's click on calculate and now we can see that the values have changed so everything is working all right let's change something over here as well and let's change this to 120 and let's click on calculate and we have the result displayed over here now if we go back to our code we can see that we have the same code over here and here as well we just have this function called refresh input values.