now if you want to know what is bmr and how it is calculated you can go to this website called calculator.net and you can search for bmr calculator you can find all the information about bmr over here but in this video we will start designing this from scratch using html css and javascript and here we can see we have these input fields we have the age the gender the height the weight and you can go ahead and change these values.
And just click on calculate and it will display the number of calories per day over here so let's change something over here let's change this to 25 and now let's click on calculate and we can see that the number has changed and now if we select female and click on calculate we can see that we have a different result over here so we use a formula to calculate this bmr and we get all these input field values and just calculate it based on the formula.
And we'll do that using javascript right so here i have created this folder called bmr calculator and i just opened it with vs code so first of all let's go ahead and create all the necessary files so let's click on new file and we'll create an html file i'll just name it index.html and we also need to have a css file let's name it style.css and we'll also create a javascript file i'll just name it main.js let's start with the index.html file now in vs code you have the shortcut where you can just press exclamation and press tab and you will 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 server i'll just tap style.css and in the body i'll just link the javascript file so let's type script colon src and press tab and here i'll just type main.js all right let's start by creating a container division to hold everything so let's create a division with the class of pmr calculator and in that we will have two sections one is this control section and the next is this results section.
So let's create a division of the class of controls and before that let's create an h2 for the heading so let's type bmr calculator and now let's open this in our browser so i have this extension called live server installed in vs code so once you install that you can just right click over here in the html and click on open with live server and now we can see we have the heading displayed over here let's go ahead and write the html for all the other.
We have the heading and also the input field right now let's create another heading for gender so let's create an s3 and i'll just type gender over here and here we can see in general we have two radio buttons so i'll just add this inside a division so let's create a division with a class of gender and in that we will add the s3 and here let's go ahead and create an input field and we'll set the type to radio.
And we will set the id to mail and we'll also set the value to mail and now let's create a label and this label is for this id mail so here inside 4 i'll just type mail and here inside the label i just type mail so if you go back to our design here we can see we have this mail radio button and if i click on this label we can see that the radio button is active right now let's copy both these.
Lines of code and let's paste it down here and the second one is for female so i'll just select male from here and i'll just change this to female and here also i'll just type female and now we can see there are two radio buttons one is for mail and the other is for female and if i click on mail we have the first radio button active and if i click on female we have the second one active but here we have a problem we just need to have one of these options checked at one time so what we need to do is we need to add a name attribute to.
Both these input fields so here i'll just type name and i'll just give it a value of gender now we have to add the same name to the other input field as well so here i'll just type name equals gender and now if you go back to our design and if i click on one of these options we have it selected and if i click on the other option we have the other one selected and we have just one selected at a time and now the next thing we will do is we will have the mail option selected by default so if i just refresh this page we can see that none of these.
Are selected so here i just add an attribute checked and now we can see that the mail option is selected by default right now let's move on to the next input field which is height so let's create an s3 and i'll just type height over here and let's create an input field and we'll keep the type to text i just add an id of height and we'll set a value by default and i'll just set it to 180 and here we can see in front of this.
Input field we also have centimeters written over here so for that we need to add one more division so let's create a Wesdigital
Division with the class of unit and here i'll just type cm for centimeter and we will include all of this inside a division so let's create a division with a class of height and i'll just include all of this inside this division all right now the next thing we will do is create the input field for the weight so let's create a division with the class of weight.And in that we will have an s3 with the text of weight and then we'll have an input field with the type of text and id of weight and we'll also add a value and we'll set the value to 65 by default and here we can see we have this unit kg so let's create a division of the class of unit and here i'll just tap kg and if you go back to our design here we can see we have all these elements displayed over here right now let's go ahead and create the calculate button.
So let's go outside this controls division so i'll just go outside over here and let's create a division of the class of result and in that the first thing we will have is this button so let's create a button and we will give it a class of calculate button and here i'll just tap calculate and then we need to have this result displayed over here so we'll create a division with the class of result message.
And in that we will type the first thing is the value and then we have calories per day and if you take a look at this we can see that we have a different styling for this number so let's add this inside a span so that we can style it differently so i'll just type span and i'll just give it a class of calories and i'll just cut this ending tag and paste it after this number.
Right now let's go back to our design and this is how it looks we have all the elements displayed over here so that's basically it with the html right here i'm in the source code of our design and here we have already linked our css file over here so let's go to style.css file and let's get started with the design now the first thing we will do is we will style the container division so for the container division we have a division with the class of bmr calculator so let's go back to our style.css file.
And let's type dot bmr calculator and let's set a max width of 300 pixels and we will set the font family to roboto and sensative and we'll also set a padding of 8 pixels top and bottom and 24 pixels left and right and we'll also add a box shadow and we'll set the values to 0 4 pixels 8 pixels negative 3 pixels rgb a 0 0 0 and 0.3.
And this is how it looks right now now we'll also add a line of code called box sizing and set it to border box so that we have the correct height and width for the elements so let's type bmr calculator and we'll also select all the elements inside this bmr calculator division so let's type comma and bmr calculator and asterisk so this is select all the elements inside this class and let's set the box sizing to border box right now the first thing we will style is this heading so for the heading we.
Have an h2 so here we can see we have this h2 so let's style that here i'll just type bmr calculator h2 and let's set the text align to center and we will set a background color of dark gray and we'll set the color of the text to white and let's set the font weight to 100 now if we go back to the original design we can see that we have this heading spanning across this container division.
So here if i just add a background color we can see this is the width of this container division which is bmr calculator and we want this heading to have the same width so for that we can add a negative margin so let's type margin and here we can see we have added a padding of 8 pixels and 24 pixels so we have to add a margin of negative 8 pixels and negative 24 pixels and now we can see it is.
Having the same width as the container division right now let's add a margin bottom
And let's set it to 8 pixels and let's also add a padding and let's set it to 16 pixels right now let's remove this background color now the next thing we need to do is we need to style all these headings now for those headings we have an s3 so here we can see inside the form we have this s3 for age gender and so on so let's target.The s3 i'll just type bmr calculator and it is inside the form so just a form s3 and let's set the font size to 15 pixels and let's set text transform to uppercase and i will also set a margin of 16 pixels top 0 for right and 10 pixels bottom and 0 for left now the next thing we will style is these input fields so the input fields are inside this form and we have this.
Input field with the type of text so let's target that here this type bmr calculator for input with the type of text and first of all let's set a width of 100 percent and we will add a padding of 4 pixels top and bottom and 16 pixels left and right and let's set the font size to 24 pixels and we'll set the font weight to bold and we'll also change the border so i'll.
Just a border and let's set it to one pixel solid and for the color we'll set it to d5 db dd now let's add a little bit of gap between all these elements so we will target the form so let's type bmr calculator form and let's set the display to flex and reset the flex direction to column and we will add a gap of 4 pixels right now let's add a left margin for.
The second radio button so if you go back to our html here we can see for the second radio button we have an id of female so let's type bmr calculator form female and let's set a margin left of 20 pixels right now let's style these units we have centimeter and kg written over here it should be positioned at the right side over here so here we can see we have these units displayed over here at the right now if you go back to our html.
File here we can see we have this division with the class of height and in that we have this unit so we'll position the unit relative to this height and we will position this unit relative to this weight so first of all let's add position of relative to height and weight so let's type bmr calculator form height and bmr calculator for weight and let's set the position to relative and now let's position these units and for the units we have a division of the.
Class of unit so let's type bmr calculator for unit and let's set the position to absolute and we'll set the right position to 20 pixels and we'll set the top position to 50 pixels and let's set the color of the text to 777 that's it with the units now let's style this button now if you go back to the html file here we can see we have this button with the class of calculate button and it is inside this result division.
So let's type bmr calculator result calculate button and let's set a padding of 8 pixels top and bottom 24 pixels left and right and we'll set a margin of 16 pixels top and bottom and 0 for left and right and let's set the font size to 18 pixels and we'll set the phone to weight to 100 and let's set the text transform to uppercase and let's set the border to none.
And we will add a background color and i will set it to 333 and reset the color of the text to white and we'll set the cursor to pointer and we'll also bring it to the center now we have to bring both these elements to the center we have to bring the button and also this result message now both of them are inside this result division over here so let's target that let's type bmr calculator result and let's type text align set it to center.
And let's set the color of the text so let's tap color and let's set it to 4e4e4e and let's set the font size to let's try 18 pixels and now let's style this number so for the number we have a different styling over here so if you go back to the index.html file here we can see for the number we have created a span and we have given it a class of calories.
So let's target this so here let's start bmr calculator result calories and let's set the color of the text to green and let's set the font size to 38 pixels and let's set the phone to weight to 900 and we'll also add some margin right so let's type margin right and we will set it to 8 pixels.
And if you want to bring both of these to the center vertically you can just add a line of code which is vertical align and set it to middle right now let's add some gap between this button and this result message so for the button let's add a margin bottom and let's set it to let's try 32 pixels and that looks alright so that's basically it with the styling of our bmr calculator and with that we have completed the css of this design.
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.
We have this id of h and for the radio buttons we have a name of gender for both these radio buttons and then we have an id of height for the height and then we have an id of weight 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 tap const calculate button equals document dot query selector bmr calculator result calculate button right now let's reference the age so.
Let's type 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 so we'll 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 tap 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 all 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 column 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 will 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 coma 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 two 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 so now if i just add some random letters over here and if i click on calculate we can see that we have this uh not a number displayed over here now we don't want this to happen we don't want to calculate the bmr when we don't have a valid input so when we have an invalid input we want to display a message over here an error message and we'll also highlight the input field so that the user knows which is the invalid input and even if we have a blank input field and if i click on calculate the bmr.
Should not be calculated because we don't have a value over here so for that we need to add input validation now let me show you a demo of what we're going to design so now here we can see we have these input fields over here and if i just delete this value from here and if i click on calculate we can see that we have this input field highlighted over here and we have this error message please enter all the details correctly and if i just add some random value over here and if i click on calculate we can see we still have this uh highlight for the input field and also this error.
Message but if you have a valid input you can just type that over here so if i just type 30 and if i click on calculate we can see that the error message is gone and now we have the bmr calculated over here the same goes with these two input fields over here so if i just add some invalid input and if i click on calculate we can see that the bmr is not calculated and we have this error message and we also have this input field highlighted and if i just remove all the values and if i click on calculate we still have this error message so this is what we're going gonna do in this.