Transcripts
1. 1 Finance Deposit Calculator Application Introduction: Come back to this module.
So in this module, we will build the
calculator application. Let me first show you
the final version of the project that we will build
in this particular module. So this will be the
project that we will build in this
particular module. You can see it has this nice
reddish card like structure. Then we have these sliders. So by changing these sliders
either left or right, we can actually
update the value of this particular element
if I actually invest one. And if I change the
rate of interest to this particular six
but my increase, or I can say the decrease
the time period, if I click on now
invest now button, then you can see invested
amount is like one cro piece. And then the estimated returns, it's going to be triple 60. So the total value
will be 16660 rupees. All right. So this is
actually a perfect value because the online Apdcalculator is also going to be
calculated the same values. If I show you applications, you can see this is the
grow dotin which is the most famous website used in India for the investing purpose. So if I actually here,
you can see I have added the same values and the values are actually
totally the same. If I refresh the web page, then you can see on
investment of one groupies, on the interest rate of 6.5%. If I decrease the interest rate means the time period,
not interest rate, then you can see
it's actually going to give us a same value, which is 6,660 rupees. Now if I actually
update the value here, like 6.8 interest, and now if I actually
increase the amount to like something ten crpies. So if I actually enter
the values manually, ten croupiesO I actually
do the same here also, like ten acrops rate of
interest is going to be 6.8. So you can see it actually
gives us 69,754 icon, then you can see it also
gives us the value 69,754. Now, the results are
totally the same. Just like in the
final version of the application means this
real time application, you can see, it's actually a more professional application built by entirely big
website or a company. So exactly it's going to
give us the same values, just like you can see
it here. All right. So this will be the
project that we're going to build in this
particular module. So in the next lecture,
we're going to start with the estimate
part of the project.
2. 2 Finance Deposit Calculator Appliation HTML: For the saving of the
time, I have created the required files inside
the Visual Studio code, which is the index Pt trial
CSS and scripted JSFile. You can see I have already
launched the final version of the application that we want to build in this
particular module, and this will be the project
I have launched inside the chrome Browser using
the golf server extension. This will be the version
of the application that we want to build in
this particular module. All right, the first
thing is we need to actually create a one
main division tag. That particular tag class name
is going to be calculator, and then we need to place all of these particular
elements one by one. The total investment,
the input type, and this particular span
is going to be wrapped inside the one division
tag. All right. So let's start doing
it one by one. Coming back to the index
estimL under the body ten, the first thing is, I will
be plating one division tag. And actually, I'm going to
give a class name calculator. All right, so this would
be the class name, make sure it is in small case. After that, I believe placing a one heading that is going
to be like FT calculator. All right. I I control
save then you can see we get the heading
FD calculator. Then I will going to
place the division tag. That particular division
tag is basically used to create this
kind of division, which is the input
section, right. Under that particular
input section is going to have a one label tag. Then we have the input type, which is going to be range,
the type of the input, and then we have
the span element to actually show the value of the range slider, right. Coming back to the version
of the application, here I need to specify
the class name, which is going to be
like input section. Input iPhone section. Then I need to
specify the label. The label four is going
to be like investment. Then I need to specify
the total investment. All right, so it is going
to total investment. All right. And then I need
to specify the input type, which is going to be
label, not label, it is like range because label is the
tag that we have used for displaying the label at
the top of the range slight. That is this particular
input type range. So here I specify the ID, which is going to be
like invest amount, or I can simply use
the investment. Then I need to specify
the minimum value. The minimum value
that it can actually goes up to 10,000, all right. And then I need to specify
the maximum value. The maximum it can goes
up to ten lac rupees. So make sure I have
added like six zeros, and the step value that
it will be used for the changing of the Snider
is going to be like 10,000. All right. And the
default value, whenever we launch
the application, the value of this
particular slide L will remain, which is the value. So I will be here using
the one lack groups. So make sure I have
here five zeros. So if I control save
it, then we get this particular range slider, means the range input. After that, I need to here
specify the span tag, so span tag, or I can
say that span elements. Then I need to specify the ID, which is the investment value, so investment hyphen value. All right, if I control save it, we didn't able to see anything. Here I need to use
the Rupee symbol. If I actually type here
and Rupees symbol, and I can simply copy this particular
symbol from the here. I can simply copy that
particular symbol and coming up here inside the
s radical and pasting it. All right. This is our Rupi symbol and
I'm going to close it. Here I will be adding the
values like one lack, which is the default value, so one lack So here I will be adding the
three zeros control Savin, then you can see we
get the Rupi symbol along with the value, one leg. That is what we want to display. Then similarly, I'm going to copy this particular
input section division, copying it and pasting
it one more time here. Now I need to change some value. The main class name of this particular division time
is going to remain same, which is the input section, and then I need to
change the label value. Label value here, I will
be using the interest. Interest hyphen rate. And then I need to change the label that we
want to display, which is going to be
like rate of interest. Rate of interest, actually
I need to use the per NMP. Y it is not doing that. I need to consider it
as a PA, P tout, A, which is going to be per M. Then now it's time to update the values of the
input type range. The first thing is we
need to update the ID, ID is going to interest
rate. All right. Then we need to change
the main and max value. So the minimum value,
it can take up to one. The maximum value, it
can sport up to 15. Not one, 15, it's like 15. Then the step value, so step value is going
to be like 0.1. And then the value that
I want to display, which is going to be 6.5. All right. And after that, we need to change the
value of the span element. So here, instead of using
the investment value, I will be using the
interest rate value. You can see it is like
interest rate value and the interest rate that
I want to display according to the
value that is here, which is going to like 6.5%. We want to appoint a 6.5%. Symbol. So you can see, we get the rate of
interest per annum 6.5%. Next, again, I'm going to copy this particular
input section and wasting it one more time for
the time period in years. I'm going to copy this here, and here I will be
changing the value, which is going to be
time period in years. And here, I need to
change the value to time period instead
of interest rate. So I'll be using the
time hyphen time period. And then I also need
to change the idea of the input type
range time period. Then we need to change the
minimum and max value. So minimum value, it
can support up to one. Maximum it can go up to 20. Step value here, I will be using the one and the value that I
want to display by default, which is going to be five. And then I need to
change the span ID. So instead of using
the interest rate, I will be using here a
time period, hyphen value. And then I need to change the value of this
fan element suit is going to be five years. If I save it, then you can
see time period in years, which is five, right? Now we have plays
first three sections, which is total investment. That is just one rate of
interest and time period. It's time to specify the
rest of the TML elements. Here, after the end of
this particular division, I need to specify the button. Button I need to call a method on click of a
button. This is the click. Here I'll be using
the calculate FD. This will be the function. We will call whenever
we click on the button, and then I will be here
using the invest Invest now. If I control, save
it, then you can see we get the button, invest now. After that, we need to
create another button tv, here I need to create the class, which is going to nine
out output section. A cose section, and then I
need to specify the P tag, which is for the
paragraph element. This will be our
invested amount. So if I actually
copy the value from here to save a little bit
of time, invested amount. Again, I'm going to create
a duplicate of this one. Then this our estimated returns. Now I'm going to copy
this total value. No estimated returns,
why it is not copied. Now we have this of them. After that, instead of that, I'm going to specify
the span tag, span then I need to specify
the ID of the span tag, it is invested amount
invested hi fun amount, and then I need to specify
the hi fun symbol, and then I need to
close the span tag. Okay. Similarly, I'm going to copy this
particular spend tank, pasting it here, and
also inside of it. Then I need to just
simply change the ID. So instead of using the investment amount for this particular
paragraph element, I will be here using
the ST method returns. And then for this
particular one, I will be using the total
pen value. All right. Control sat, we carry
hyphens along with these as a paragraph element for this particular
output section. So I have now placed
all the HTML elements. In the next lecture,
we're going to start with the CSS
so that it will look like to this particular FD calculated version
of the application. All right. So all of this stuff we're going to do in
the next lecture.
3. 3 Finance Deposit Calculator CSS: Now from this lecture onwards, we're going to start with
the CSS part of the project. So for that, we need to
use the style CSS spie. Instead of this particular one, first time I'm going to select
the body selector, body, and then I'm going
to start it block of the code, and inset that, first time I'm going to
change the font family to actually SensF after that, I'm going to specify
the background color. So background color is going
to like an ad, all right? And then the display
is going to be flex. After that, I will be here
using the justified content, which is going to be
center, then align items, which is going to
be center as well, and then I will be
using the height, which is going to
100 pH after that, I will be here using
the margin to zero. Then you can see the
content is actually shifted to the center of
the browser screen. Then I'm going to specify the class is the main
class heading of the division tag in which the entire elements is
actually wrapped up. I'm going to copy this
particular class name coming back to the tdard CSS. Here I'm going to specifying
the name of the class. Then I'm going to specify
the background color, or I can simply use the
background and here I will be using the
linear gradient function. Then this is going to
be like 120 degree, then has symbol, and then I
will be using the F five, six, four, five, six, then has symbol, and here I
will be using the f55 76c. And then I'm going to
specify the border, which is going to one
pixel boder solid, and I will be error using the hash symbol three
times D, right? Then I need to specify
the border radius, which is going to be
like eight pixel. And then I will be
applying the pedding. Pading is going to
be like 28 pixels. After that, I'll be using
the width property. Width is going to be like
520 pixels, 520 pixels. And then I will be error
using the box shadow, so box shadow is zero, zero, 20 pixels, and then I will be error using
the RGPA's zero, zero, zero, and the
Alpha is going to 0.1. So Posion is going to be a relative and I will
be using the overflow, which is going to blank, hidden. And then I will be
using the animation, that is this one, which
is going to fade in. So it like one easing out. Okay, so now you can
see the division is actually enhanced
a little bit. After that, I will be
adding some more code to the main calculator division
by using the before. So it is basically used to add some CSS code before the actual
thing is going to happen. First I'm going to
set the content to empty one, all right. After that, I will be specifying the position to absolute. Then I have to
specify the top to -50% and left to -50% as well, right, and width is
going to be like 200% and then I will be
applying the height to 200%. After that, I will be
adding the background, which is going to
be linear gradient. Again, I will be
on the 120 degree. So here I will be
adding the f039. Actually not nine, it's F 093fb. After that, I will be
adding the F five, six, four, five, six. Control saved, then you can see, we get this kind of color. But we need to use this index property and here I need to specify
the minus one. Then it actually goes behind the calculator and after that, I need to add the animation,
which is like rotate. Rotate, which is going to
ten a linear infinite. Now we need to create
the key frames of all of these two ones, which is rotate and fade in. Add rate keyframes,
identifier name, which is going to fade
in for the first one. Then again, I need to
create another key frame. This one is for the rotate. Inside the fade in, past I will be using the chrome. From then starting
this slope of the cold and setting it to
opacity to zero. After that, I will be adding
the two tex tight line. It's like two and here to set the opacity to one. All right. And now you can see before the particular thing is actually applied,
if I refresh it, then you can see first it
scores to be a little pink, and then it's actually
turned back into its red color of the division. Which is the main D
calculator division. After that, we need
to add the rotation. Here I will reason the from starting its block of the code, then transform function because
we want to transform it, here I will pesing the rotate. I want to rotate it
from the zero degree and I'm going to simply
create a duplicate of them and here I need to
remove it by using it to transform rotate and I want to rotate
it to 360 degree. Right. So now if I refresh it, you can see it's
actually perform that particular little
bit of the rotation. Okay, so now we need to add the code for the
calculator heading. The first thing
is actually done, which is this kind
of animation effect in a rotational form. After that, I will be
adding here a calculator. Each one and then to
start block of the code. So here I have to change the
font size. Not like that. First, I need to change
the font size to 34 pixel. And then I need to
change the margin, like a bottom to 20 pixel. And then I need to
change the text align property to
actually center, and then I need to change
the color to white. Control, save it, then you can see the color is
actually changed. After that, we need
to add the code for the input section, this all the input section. I'm going to copy this
particular class name. Coming back to the style dot
CSS and here into specify the dot and pasting the name of the input section class name. So first I need to change
the margin bottom property so that there is some spaces
between these elements, so margin bottom, which is
going to be like 25 pixel. After that, I will be adding the position to
actually relative, and then I'm going to add this index property
to actually one. So as you now there is a
margin is actually applied. Now it's time to add the
codes for the label. So input section, and then we need to target the
labels or the label tag. So label first, we need to change the display to
block level element. If I do that, then you can see the input slider and the span is actually
shifted to the next line. Then I change size to 24 pixel. So now the font
size is increased. Then the margin bottom property, so that there is
some spaces between the input type and the label, which is going to be five pixel. After that, I will be adding the color to actually
white, not weed. It's like white. Now you can see the color is
actually changed. All right. Now the next is going to
target the input type range. So again, input section, and then I need to
target the input. Then you'll want to
specify the type as well. Not F type, it's like type. And here, I need to
specify the type, which is going to be range. Then we need to start
a slope of the code. Instead of that, and to set
the width to actually 100%. Then after that, I need to change the cursor
two pointer one. You can see now the input
range so gets styled modified. After that, we need to target the input section span element. So again, I need to target
the input section class. Then we need to target the
span elements. All right. So here first, I will
be at the display to block level element, block. Then I need to change
the color to white. After that, I'm
going to increase the font size to 20 pixel. Then I'm going to change the
margin to top to five pixel. So you can see now
it's also modified. All right, so now it's
time to add the code for the button because right
now it is very simple. So here I'm going to
target the button, then starting as
block of the code. Inside the button, first
time I'm going to change the width to actually 100%. Then I'm going to
change the padding to actually ten pixel. After that, I'm going to
change the background color. This is going to 28a7 45. Controls it and you can see the button color is
actually modified. After that, it's time to
change the color to white. Then I need to
remove the bottle, so border is going to be none. After that, I'm going to change the border radius to
actually four pixel, where I can go with
the six pixel. Then I'm going to change
the cursor to pointer one. After that, I'm going to change the phone size to 16 pixel. After that, I'm going to
change the index to one. Now you can see the button
code is actually modified. After that, we need to add
the Hover effect to button, so button, and hover, which is a basic thing,
background color, I'm going to change it to
hastan symbol two, one, 88, 38. Save it, if I hover over it, then you can see it actually
gets a little bit darker. Now it's time to
add the code for the output section. All right. So here I'm going to simply use the dot symbol and come back
in index to test table. I'm going to copy the class
name output section, right? Then starting its
block of the code. First, I'm going to
change the margin a property to 20 pixel. Then I'm going to use the
text align property center. After that, I will be here
using the deposition, which is going to be relative, and then I need to
use Z index one. I see now it's
actually shifted to this center row All right. Now it's time to add
the output section. Add this particular one output section, then paragraph element. So here, I need to change
the margin from like a top and bottom to five pixel and from left and right, it is
going to be zero. After that, I'm going to
specify the font size, which is going to
be eight pixel. Then I'm going to
specify the color, which is going to be white. On sbin, you can see the
color is actually changed. Now it's time to add
another thing here, like output section,
then the Spentag and then start of the core. Then output section going
to life font weight. This is like phone weight,
which is going to be bold. You can see now it's
actually gets cold. Now, everything is
actually stand up. The only thing is left
is actually when you to modify the style of
the input slider, for that, here we need
to add some extra code so that it can look like to this final
version of the project. Although it seems very useful in the basic
versions, you can see here. You can change the value and you can even change the
value of this one also. Like this type. We need
to modify the code. Here, first time we
want to do that, I need to use the input because when you have to
target the input type range, so here to specify
the input type equals and started
block up the code. Here to specify the range. Then first it to the webkit, then appearance this
particular webkit appearance, and it's going to be nu. After that, I'm going to err use the width, this particular one. Width is going to like 100%. There is a percentex symbol. The next thing, I will
be err using the height, not mean height, it's
going to like height. Actually, I will be here
using the height 28 pixel. That's actually complaining. Okay, so I need to
remove this one, I think, appearance is working. There is no need to
specify the webkit. Then I need to use
the background. So background has symbol DD, and after that, I will be here using the outline property. Outline is going to be none. After that, I'm going to
set the opacity to 0.9. Then I need to add the transition with this
particular one, which is going to be like 0.2 is then I need to set
the transition opacity. Prosity and w 0.2 S. Okay. After all, save it.
Then you can Z. Now then put slider is
changed a little bit. All right. Next, we need to change the hover because if I
show you the final version, there the hover is
actually applied, which basically
changed the color a little bit to the
whiter version. So for that, I need to
again us the input, then here into specify
the type Then again, here I to specify the range. It's time to start its
block up the code. Then I'm going to set
the opposity to one. Now if I hover over it, I refresh it, it will basically change
the color a little bit. Now it's time to actually modify the Now it's time to actually
modify these sliders, that is these
thumbs, not slider, this thumb of the input range. I'm going to cope with this
first line of the code and starting its
block of the code. Okay. And here, I specify
two column, then a web kit. Not file upload,
it's like the kit and here I intro slider
thumb. That is this one. After that, I need to set the appearance to actually none. Then I'm going to
here set the width, which is like this
particular one, which is going to be 20 pixel. Then I need to set the
height also to 20 pixels. And then I'm going to change
the background color, which is like green to eight, a seven, four, five. Not at the rate,
it is like symbol. After that, I'm going to change the cursor
to pointer one, and finally, the last property, I will be using the
boradius to 50%. Control save now
you can see we get the green thumbs of the
input range, right? So this is what we
actually want to do. All right, so that's
marks the completion of the CSS part for this
particular project, which is the FT calculator. So from next lecture onwards, we're going to add the logical part inside the Javascript. So when we interact
with these liners, the value should be changed and reflected back to
the span elements. And when we click
on the invest now, we want to calculate these
three output elements values, which is the investment amount, which is the invested amount, estimated returns,
and the total value. So all of this stuff
we're going to do in the next lecture.
4. 4 Finance Deposit Calculator JS: Temp to start with the
Javascript part of the project. So for that, we need
to use scripts file. Inside this particular file, first time going to here,
use the dom content loaded. So it is like document
Dd add eventis. So I'm going to add the
listener to the dom content loaded means I'm going to listen to the
dom content loaded. And here, we need to specify
an anonymous function. Then to start a
dock of the code. Okay. And inside a bit, I'm going to start creating
one const variable, which is like investment input. Then this is going to be to
document to no this is like it is like like this
particular one, document to Get element by ID, and then here I need to
specify the ID name. So if I come back to the indexM, so here we have the investment, simply copy it and coming back to Script dogs, and here
I'm going to paste it. So this is our
investment variable. So I'm going to create a copy
of this particular one and pasting it to more time. Then this one is like
the investment rate. So variable name of this
particular one is going to be interest interest rate input. The idea of this particular
if I come back to the indexes tML this
is the ID name. I need to copy this
particular name, coming back to script dg, and here I'm going to
replace the ID name. Then I need to create
a third variable. This particular one is going
to be lifetime period input. Then come to index totes
TML here I'm going to simply going to paste the ID name of
this particular one. Copy comp to script dogs, and here I'm going
to past the ID name. So now we have the
references to all of these three input sliders
variable inside of it. Now it's time to listen to the input listeners
of these three. So whenever we listen
to the input listeners, we need to call the function to update the value of
these span elements, which is the next step to
implement this kind of logic. So here, I'm going to use the investment that is
this particular one, which is the first one,
add event listener, so adding the listener, so we want to listen
to the input listener. And then here and to
specify the function, which is going to an
anonymous function. Instead of it, I need
to call the code, which is the update
investment investment value. And then I need to
specify the dtaut value. All right. Similarly,
I'm going to copy this one and pasting
it two more times. Then I'm going to change
the variable name in interest rate from investment input to
interest rate input, and this one is for the time period input,
which is a third one. And then I need to update
the function name as well. So this particular one is
going to be like update. Interest rate, value. And this particular one is
going to be like update, T PE ROD period value. All right. So I I control Save it, nothing
is going to happen. Now here, this dot
value is actually representing the input type, which is these three
input variables, that is the sliders. Okay? So now it's time to create these
functions so that we can update the values when we drag these sliders either
left or right. So it's time to create all these three
functions one by one. So here, I'm going to actually
specify the function, so function update investment
or interest rate value. So first is the update
investment value. And this particular function is going to accept
a parameter value. Then I'm going to copy
it two more times, and here I'm going to change it to update interest rate value, and this one is update time
period value. All right. And now so I need to actually here provide the
initial value updates. I also need to call
these function outside of it so
that inside of it, when we are actually calling these functions on click
of the slider buttons, but also I need to call these three functions on click of the
investment now button, whatever value is present
inside the span elements, I need to call all of these three functions in
that situation as well. So here I need to provide the
initial values update also. So it is like update or I can simply do what I am going to hear actually copying and
pasting the function names. So copy it and pasting it here. Then this one is also
copying and pasting it. Now inside of it, I need
to change the parameter, which is going to be
like investment input, no investment input dot value. Right here, I need
to also do that like interest rate input value, and this one is like
time period input value. All right. So now if
I actually change it, nothing is going
to happen because inside this particular code, I need to update the inner text property
of the span element. So let's start doing
it one by one. So first inside of
this particular one, I need to get the reference of the span element because right now I have the reference
of these sliders, but there is no
way I can actually update the value of
the span element. So for that, I need to get the reference of the span elements inside these functions. So here I will be adding the document dot
get element by ID, and now I need to
specify the ID name. So if I can come back
to index to test and here we have the input type. This is for the
investment, then this is the values that I
need to specify here, come back it, and here
I'm going to paste it. And then I need to provide the inner text property
at this particular one. Then this is going to be equals to the temple letter literal. So here I will be using
the dollar symbol. Then I'm going to use
the curly bracket. Intead I'm going to use the
parse float function because I'm going to convert
the values into float. And then I need to pass the value inside this
particular parse float, which is going to be value. Then the value is actually, I need to convert it
into two local so that we get the values in the
form of Indian standard. Here I will be using
the two local string, and then I need to pass
the parameter value, which is EN, which is basically based on
the Indian standard. This is just for
converting the text on the basis of the local string. It is not necessary. You can even actually
ignore this part. Totally, it's because we can do the calculation by using
the parse float value. All right so I can
copy it and pasting it here two more
times inside of it, and then I need to
simply do what. Here, I need to change the
values of the IDs, right? This particular one is actually
the interest rate value. That is this particular
span element value to the scriptJs here I need to change the value to
interest rate value, and this one is like
our time period value. Copy it, come back to ScriptJs and here
I'm going to change. Change it to time
period hypon value. So now if I actually
update these sliders, then you can see
the value is now updating inside
the span element, all of the three values
is now updating. So our basic thing
is actually done, which is basically with
use of the slider, we need to update the values. Nice time to calculate the FD, which is a fixed deposit on the basis of the
click of the button. So here, we have already added the function inside
the click of the button, so I need to create
this particular function inside the Javascript. So here I will be
using the function, then pricing in the
name of the function, then starting its Doc upta code. So first, I need to
get the three values, which is the principal rate
of interest and time period. So all of these values
are actually stored inside this particular ones
like these three inputs. So I need to get the values
from these three things. So what I'm going to do it here, I'm going to simply copy this
document get element by ID. And then I need to store these values inside
the variable. So the first variable is
going to be here cost cost, and this is actually
our principle. Principle then this is going
to be equals to parse float, so I need to convert
the value into float, parse float and then here to pass the document dot
get element by ID, investment and then to actually
remove the terminator, and then to specify the
terminator outside of it, and here I need to use dot
value because we want to perform the calculation on the values, not on the strings. Then I'm going to paste
it two more times. This one is going
to be our rate of interest rate of interest, and this one is going
to be our time period. All right. And then I
need to change the IDs. So here I have already specified the ID, which
is the investment, then the interest rate, so I need to replace the ID name with the interest rate here. And then I need to
change the values like time period and changing
it here also time period. All right. So now we have the initialization
of the variables, it's time to add the logic. So for adding the logic,
there is a formula. So here I will be using the
const and is equal to four. This basically used to calculate the interest rate utterly so that we can get the
more accurate result. Then I need to use the
formula like total amount. Total amount is equal
to principal amount. So we need to multiply the
principle like this one, and here we need to
multiply it with the rate of interest along
with the time period. So it is like math. This is the formula
that I get it with the Internet so that to make
the application working, then I have actually modify the formula according
to my variables values. So here, I need to actually
add the rate of interest. Then I need to
divide the rate of interest with the
100 and after that, I need to divide it with the quarterly based
interest rate. Then I need to specify here coma and then multiply it with the value of the rate of actually with the
value of the time period. Well, not like that. I need to specify it inside
the double codes. Okay. So here we're actually getting some issues in the code. Actually, here, I need
to close the bracket. That is why it's actually
giving the problem. So now the brackets are
not perfectly period up. You can see here and
this is the brackets. All right. So now
the logic is added. Now it's time to
actually calculate the total and interest, right? So in order to calculate
the interest and, which is a total interest
and by the depositing of the FD so to calculate it, we need to minus the
principal amount from the total amount. So here I'm going to name
the variable interest, and then this is
going to be equals to total amount minus
with the principal. So now we have get
all the values. So now the next step is
we need to actually set these values inside these
three output elements. So let's start doing
it one by one. So here I'm going
to use the document to get element by ID. And then here I need to
specify the name of the ID. So I want to update the
inner text property because it is a span element, so I need to update its
inner text property, and then then I
will be here using the template literal
inside of it, I'm going to specify
the dollar symbol, and from there, I want
to get the value. So I want to get the value from the principal variable that
is actually at the top. So principal amount, that is the main amount which so we are going to display this
particular value in front of the invested amount, right? So here it is going
to be like taught to local string that is
this particular one. Inside of it, I'm going to pass the double clods IN
hyphen IN. All right. Similarly, I'm going
to copy this and pasting it two more times. So let's start modifying the codes of these
lines of the code. Also here I'm going to
specify the ID name. So coming back to indexes tML if I actually
come back here, it is like invested amount, copy the ID name compared to Scriptojs here I'm going
to paste the ID name. Similarly, copy the estimated
returns, pasting it here. Then I'm going to
copy the total value, copy and pasting it here. All right. Now we have
pasted all the IDs, it's time to modify the code inside these particular ones. This particular one is going
to have the taller symbol. Then the pair of curly brackets inside of it, I'm
going to use the math, that is this particular when
math taught round function, and then I'm going to specify
the values under this, which is the interest
and not oms is like interest and then
similarly here, that is this particular
total value. We are initializing the values under the principal amount. So I'm going to
remove these things principle local string. Here, I need to simply
specify the values under the math taught round function. Inside of it, I'm going to specify the value, which
is going to be total. Amount. And also, I need
to add the Rupis symbol. If I click it, then you can
see, we get the rupis symbol. So I'm going to copy
the Rupis symbol. In front of the dollar,
I'm going to add it. Okay. So this is invested amount or in front of
the invested amount, I'm also going to edit. Now, before actually here I have getting some
errors in front of it. Here, the tilt
character is removed. That is why it is actually
giving the error. Now the error is actually sold. Okay, so before actually
running the application, also coming back to the A
version of the project. Here we have actually defined
the update investal value. I need to actually provide
here some more things because this two local string is not required for the
interest rate value. Instead, I need to define the interest rate in form
of percentage symbol. So here I need to append
the percentage symbol. Once I actually get the value, interest rate is equal to
parse float and value taught. So here I need to
use the two fixed instead of the two local string. I want to display two fixed
and after the two fixed, I want to display a single value along with the
percentage symbol. After the bracket, nu tiers specify the percentage symbol. Similarly for this
particular one, which is the time
period, I need to display a single digit. So these two local
string is not required. So inside the parts float, I
need to remove this thing. This is not required. Instead, I need
to simply display the data by using the value. That is this particular one, which is the parameter value. If I control save it, now we get the percentage symbol
along with the single value. If I update it, now the percentage symbol
is also existed. Now if I click on the invest, we get the investment and also the rate of interest
in this particular format. So it is not properly formatted. Here you can see
this particular one, which is the estimate returns
and also the final value. So here, this is because I need to use the two local
string to these two as well. That is why we are not getting the comas perfectly
like this one. Here the two local
string is helpful. In this particular case,
I'm going to copy it. After the interest, along with the tot, I'm
going to copy it. After the interest, I'm going
to taste it here and up. This also control save it. Now if I click on invest by reducing it time
period to one, then you can see
now the string is formatted according to
the Indian currencies, or you can say that according
to the Indian figures. If I actually click on
the investment here, then you can see if we
get this interest rate, 6.5 on investment of 140000. I I invest one lag rupees, then we get a interest rate
of six lag 6,060 rupees. All right. So replication is
now working perfectly fine. That's marks the completion
of this particular module. The only thing which
can actually be a little tricky is this
particular logic, which is the
calculation of the FD, which is based the total amount. So this is actually a formula, which is basically
a calculation, how the interest rate
is actually calculated. So you can actually explore
the Internet to find out some basic tutorials
because this is not a part of the explanation
of the interest rate because it can be a
little tricky to explain. It will take a whole big
lecture to explain each and every concept of the
interest rate calculation. Instead, you can use the
Internet to find out the formula and then convert that particular formula
into your code. Just like I did, I actually store the
variables of the principal, then multiply it with
the rate of intral, divide it on the basis
of the quarterly, and then multiply it
with the time period. Then I finally able to
calculate the total amount, then in order to calculate
the interest earn I actually subtract the value of the principal amount
from the total amount. Then I get the interest
earn, and after that, I just simply
display those values inside the UI element that these particular span elements to get the result printed on the screen on the click of the pattern, which
is the invest now. So I give you the
basic overview of the application, how it
is actually working. So I think you like
this particular module. So if you like this module, then leave your review because your review motivates
me to create more awesome and unique
projects like this. So thank you for watching, and I willme the next lecture.
Thank you very much.
Vijay Kumar, Just Do! Do!
