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 now.
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 tab 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 Wesdigital
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.
Elements so inside the controls division let's create a form and in that we will have all the input fields and here first of all we will have the heading for the edge so let's.
Type s3 and let's type a is over here and below that we will have the input field so let's type input and we will keep the type to text.
And we will set the id to age and we'll also have a default value we'll set it to 28 by default and if you go back to the website we can see that.
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 four 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 male and the other is for female and if i click on male 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 the 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 the 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'll 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 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 a 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 a 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 type 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 of 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 and in the.
Next video we will add the css and make it look like this 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 lot for watching have a nice day me.