Here we can see this is the bmr calculator and we have these input fields over here and we can fill in these values over here so if i just add a value and if i click on calculate.
We have the bmr displayed over here and we also have input validation for this so if you don't add any value and if i click on calculate we can see that it has this error.
Message and it says please enter all the details correctly so you have to enter a valid input over here and then you can click on calculate and the bmr will be calculated now in this video i'll show.
You how to add this to a blogger website now i also have the link of the source code in the description so you can just go ahead and copy and paste the code to your website so let's get started.
right here i'm in the dashboard of my blogger website and you can go ahead and add the bmr calculator to a post or a.
And now the next thing you need to do is you have to go into the html view so by default it will be in the compose view so just click on this button and click on html view and here you have to add.
The html the css and the javascript so let's go ahead and add the code over here so first of all let's add the css so i'll just create a style tag over here.
And in this style tag we will add the css so let's go to our source code and i will leave the link of the source code in the description so let's go to the style.css file.
And let's copy all of this from here and let's paste it over here inside the style tag and now let's add the html so let's go outside the style tag.
And now let's go to the source code and let's go to the index.html file and let's copy everything inside the body so let's copy everything from here till here and let's paste it inside the.
Blogger post Wesdigital
And now let's add the javascript so let's create a script tag over here and let's go back to our source code and let's go to the main.js file.And let's copy everything from here and let's paste it over here inside the script tag now if you scroll up we can see that you can go ahead and change these details.
Over here so here we can see this is the heading you can change the heading and you can change all these headings over here and here we have the error message so you.
Can go ahead and customize the error message over here and if you want to change the look of the bmr calculator you have all the css over here you can go ahead and change all of these css.
Code right now let's click on publish and confirm right now here we can see the post has been published so let's click on view post.
And here we can see our bmr calculator displayed and we have everything displayed correctly let's see whether this works so let's click on female and let's click on calculate.
And we can see that the bmr is calculated over here now we have a slight problem in the css we don't have enough padding at the bottom.
So if i click over here and click on inspect and if you go to the main division which is a bmr calculator.
You can just add a padding bottom so if i just type padding bottom of 20 pixels i think that looks alright so let's add this let's go back to our post.
And here we can see this is the selector
So here i'll just type padding bottom and set it to 20 pixels and let's update it and let's go back to our post.And let's refresh this page and now we can see we have the padding and everything looks alright let's see whether the error message is displayed so let's add some invalid input.
And let's click on calculate and we have the error message displayed over here so everything works all right so that's basically how you add a bmr calculator to your blogger website now i will leave.
The link of the source code in the description so you can go ahead and copy and paste the code to your website so that's basically 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.