Right now now in this video we will add the javascript and make it work so when we click on the calculate button we want to calculate the bmr based on these input values and we have.
To display the result over here so we will do that in this video let's get started all right this is our source code and if.
You go to the index.html file here we can see we have already linked our main.js file now the first thing we need to do is we need to reference some of these elements from the html into our.
Javascript file so we need to reference the calories span over here because we need to update this value and we need to reference the calculate button and then we need to reference all.
These input fields we need to reference the weight the height the gender and the age and for all these elements we have these ids and classes so for the input fields.
For the weight input field and then we have this calculate button class for the button and then we have this class called calories so let's reference all of these.
In our javascript let's go to the main.js file so let's tap const calories equals document.queryselector bmr calculator.
And in that we have the result and in the result we have the calories and now let's reference the button so let's type const calculate button equals document.
Dot query selector bmr calculator result calculate button right now let's reference the age so.
Let's tap const h equals document.queryselector bmr calculator form and we have an id of h and then we have the gender but we need.
To get one of these values from here Wesdigital
So we will get the values when we click on this calculate button so we will do that later for now let's reference this height so let's type const height equals.Document.queryselector bmr calculator form hash height and then lastly we have the weight so let's type const weight equals document dot query selector.
Bmr calculator form weight right now let's create a function to calculate the bmr now for the bmr we are.
Using a formula which goes like this bmr equals 10 times weight plus 6.25 times height minus five times.
H plus five so this is the formula that we're gonna use for the male and for the female we're gonna.
Use this formula bmr equals 10 times weight plus 6.25 times height minus 5 times h.
Minus 161 so this is the formula now let's create a function to calculate this formula so we'll create a function called calculate bmr now in this function we're going to.
Receive some arguments over here so we're going to receive the weight we're going to receive the height we're going to receive the age and we can also receive the gender.
Right now let's add an if condition over here so let's tap if gender equals male then we're going to return this value right here and i'll just copy this from.
Here
And paste it over here now if it is a male then we're going to return this value right here or else we're going to return a slightly.Different value which is this one right here so let's copy this and let's paste it over here right now the last thing we need to do.
Is we need to add an event listener to this calculate button and we need to call this function calculate bmr so let's type calculate button.
Dot add event listener and we will listen for the click event and let's create an error function over here and here we need to call the function calculate bmr and we need to.
Pass the values of these input fields now if we scroll up we can see that we have these constants over here we have the age height and weight but these are the elements now to get.
The value we need to add dot value so here first of all we need to get the weight so let's tap weight dot value and then we need to have the height.
So let's tap height dot value and then we have the age so let's type h dot value and then we need to have the gender so let's get the gender first of all.
So here let's create a variable called gender value equals document.queryselector and he will just have bmr calculator.
Form and here we need to type input and for the input field we have a name so here we can see we have a name of gender for both these input fields so let's type name equals.
Gender and then we need to get the value of the checked input field so right now mail is checked so here we can just type colon checked.
And here we need to type dot value so this will store the value of whichever of these radio input fields are selected and store it inside this value general value and here we will.
Pass the value so just tab general value now this function will return to us a value so let's get the value over here let's store it inside a variable so let's type let bmr equals and we'll get.
The value from this function and we'll store it inside this variable now let's display this variable inside this calories division right here so we have already.
Referenced that over here calories so let's type calories dot inner html equals bmr right now let's test and see whether this works so let's change some of these values let's change this to 25.
Let's change this to let's say 80 and let's click on calculate and here we can see we have this value displayed over here and if i select.
Female let's click on calculate and we have a different value and let's see whether we have the correct value displayed over here so let's add these same input values into our original.
Design so we have 25 female 180 and 80. and let's click on calculate and we have one six three nine and here also we have one six three nine.
Now the last thing we need to do is we need to add this comma after this first value because for the number we have a different format so we don't have.
The comma displayed over here now you can do that easily using a function called to locale string and you need to pass en.
Hyphen us and now let's save this and now let's add some values and let's click on calculate and we have the comma and everything is.
Working all right so that's basically how you can add functionality to this bmr calculator using javascript now in the next video we will add input validation for these input fields so.
That even if we add any characters over here it should say that this has an invalid input and it should not calculate the bmr so we will do that in the next video so that's it for this.
Video if you have any doubts you can ask in the comments below and if you like this video please click on the like button and subscribe to this channel to get the latest video updates thanks a.