Build A BMI Calculator in React JS - useState Hook & Conditionals

hey what's up guys clint here back with another video and just a few days ago i released a video of us doing a simple bmi calculator in just plain vanilla javascript and obviously it was quite simple and rather quick and this one is going to be a bmi calculator but we built it in react js now it is quite uh overkill to build something like this and react this is a very very simple project but the reason i built this in react is to really i think it just really solidifies some of the react concepts that i'm learning right now and hopefully that you can learn as well so here we have our bmi calculator on a nice little um nice little card layout here and it's going to take a couple inputs um i'm in america so we are using the imperial system sorry for everybody watching if you're in the using the metric system but here it takes in weight and pounds and also height in inches and down here it's going to display my bmi with a little message and also a little stick figure so let's jump in here and see i'm 250 pounds about 74 inches high which is about 6 2. let's submit this and boom it says my bmi is 32.1 and then i'm overweight unfortunately here so it shows a little overweight guy there now if we were to change this to say we'll say 200 pounds this is changes our message just says i'm a healthy weight now and also displays a healthy weight individual now if we were to change this to 150 pounds which 150 pounds would be quite skinny at my height of 6.2 and that displays an underweight fellow there of course we're gonna have a reload button that refreshes the screen now this is very simple code like i said it is quite overkill in react but it really i've really helped learn some of the concepts especially the you state hook and just managing state and react so here we don't want to explain any figures here unless we have a value and then of course if we hit the submit button without any values we won't display a little alert to please enter a valid weight and height so very very simple i know it's overkill but if you want to learn how i did this and react let's jump in and i'm going to start from the beginning all right here we are in vs code just a blank editor i'm gonna go and press the control back tick button to open up our terminal and i'm gonna change over to my desktop here and let's create our react app mpx create dash react dash app and i'm gonna call this bmi calculator dash react go ahead and press enter this will only take a moment all right it says happy hacking here that means we're ready to go i'm going to go ahead and pull over the directory we just created this is our react application now what i'm going to do first is just clean up a few things that we're not gonna be using just to declutter the app.css this app.test the logo.svg the report web vitals and the setup test let's just go ahead and remove those there we go little less things to stare at and the index.js let's go in there we're going to delete this and also this report web vitals there we go we can close that we're no longer going to be needing that in our app.js let's delete this code there and then i'm just going to change that to a lowercase just so i don't confuse myself now at the top we'll replace that with import react from react technically i don't think we need to do this anymore but just so i don't be my confused myself and i'm just used to doing it let's go and start our server here all right and then what we're going to do first i just really want to start with our jsx just to get it all out the way and then we'll go ahead and style it and then we'll add our logic at the end for our calculations just to make sure this is working hello let's see boom there it is perfect so let's go and get started we have our outermost div is going to be this class that we named app next we're going to do a container so class name container then i want to add an h2 at the top and i'm going to give this a class name of center and we're going to call it bmi calculator perfect and then we're going to have a form inside this form we're going to have a div with a label and input the label is going to be weight and pounds and since i'm in america we're going to be using the imperial system sorry for basically the rest of the world is using a metric and input we'll say a value with weight perfect you know i'm just going to delete that we're just doing a self-closing tab there and let's copy this down we're going to get some errors here don't worry we'll go back and fix that this next one is going to be height and inches perfect and the value of course is going to be height and then below this div but also within the form we do another div with a couple buttons let's give it a class name of btn submit we want this type to be submit cool and i'm going to copy this down and i'm going to add a btn outline to this second button here perfect all right and then below the form right here we're going to have a div and inside this div let's give it a class name well we're here as well center in here we're gonna have an h3 and we're gonna say your bmi is then bmi and this is our state we're going to go back and add our state here in just a moment and p tag and this is going to say message this is going to display our little message and then just below this div whoops this let's give this a class name image container and in here when i have an image source and i'm just going to call this image source give it an alt tag so react doesn't complain to us and see that should be it for now so i realize we have all these errors let's go ahead and fix that so we can just um not have to worry about anything else also i'm going to import index.css before i forget to do that so our state we're going to put it just below this app right here and above the return so this is going to be our state and we're going to have uh four pieces of state here constantly going to have weight and set weight so we're taking two values for our state equal equal to use state and we're going to set this as zero and also we need to import our state right here at the top we're going to command this curly brackets use state so here we are we're going to copy this down a few times this next one is going to be height you can call it whatever you like this just makes sense to me height the next one is going to be bmi we'll say set bmi now this one instead of zero i want to set this one as an empty string and the same for this one as well i also want to be an empty string the last one is going to be message and we'll say set message so that's it for our state that image source let's just define that down here we'll put it as a string for now so we don't get any errors perfect now let's go ahead and do some styling on this thing so it's a little bit prettier to look at i'm going to start here at the top and again i don't like using a bootstrap or anything like that what was in a tight bootstrap i don't like using bootstrap or anything like that always a good idea in my opinion to sharpen your css skills especially if your goal is to be a front-end web developer like i said so this year the app class here is our outermost div here i'm going to flex direction of column i'm going to justify content to the center align items to the center as well with a width of 100 and let's do a height height of 100 viewport height perfect now the next one is going to be our container and what we want to do is give it a box shadow and i'm going to have zero pixels all the way around but we wanted to span about 12 pixels and width oh forgot our color it's kind of a light gray perfect there we go now let's do a border radius we'll say 8 pixels padding one rim liking that there let's go ahead and do our input with 100 font size 1.2 ram adding 8 pixels on the top and bottom 4 pixels on the left and right and margin 8 pixels and let's do sorry 8 and 0 on the left and right and let's do a border radius again of eight so everything is consistent there we go perfect perfect starting to look a little bit better here let's style these buttons next so btn let's do display not inline but block and with a hundred percent and font size 1.2 ram we want the buttons to display across the screen like so perfect margin 8 pixels and 0 on the left and right same for the padding let's do 10 pixels background color let's do black text is going to be white border 1 pixel solid black there border radius eight pixels and cursor pointer whoops pointer ah there we go okay and of course our uh button outline so btn outline for our secondary blend we're going to reverse the colors here so background color is going to be white and our color here is going to be our light black see how that looks perfect now we can go ahead and do our center class whoops fix align center and i'm going to give this a little bit of margin here um just because we're in this the only thing is i want margin of these top and bottom here so i'll just keep it easy next when i have a couple more things some text here so for our p tag i'm gonna give a margin of 10 pixels top and bottom and then our image container which you can't really see here because we don't have anything in there just an empty div right now text align center and then image container image and we want the height of our image to be 200 pixels so let's see i think that is it for our css everything is looking great so we can go ahead and close our index.css we're all done with that now what we want to do let's go ahead and code our logic here so we already have our state that we're going to be using to manage our weight our high our bmi and then also a message we're going to be printing out so the next thing to do is to do our calculations so i'm going to say here let calc i'm going to call it calc bmi where it's going to be an arrow function and this is going to take in an event and what we want to do we don't want the actual form to to submit to the server so the way we do that we can uh say prevent submitting what we want to do is type event dot prevent default just a javascript function here and that will actually prevent our form from submitting to the server now if no values are entered we want to display an alert otherwise we want to proceed with our calculations so to do that we're going to say we're using if statement and say if weight is equal to 0 and height is equal to zero we want to say alert please enter a valid weight and height otherwise if we have um if we do have uh some values entered otherwise we'll say else we're gonna proceed with our calculations so for our bmi it's our bmi that we're managing here right here so let bmi equal and the way we calculate our bmi and the imperial system is going to be weight divided by height squared so we can just say height times height times 703 and then after that calculation we want to set it to set bmi this is updating our state and i'm gonna say to fix again just a javascript function here um we'll set it to one so without this two two-fixed function here we'd get along like basically probably like a ten digit number and we don't want that we just want it to say you know 32.1 we don't want to say 32.15678 that would just be too confusing so we're going to keep that like so and but now nothing's going to work here um but we need to grab our inputs here so let's scroll down to our inputs and what we want to do is we want to add so we already have the value here but we want to do is add an unchange event here so on change on whoops unchange and we're going to take in the event here it's just going to be an arrow function like so and it's going to set weight to event dot target value perfect just like so and then what we also want to do make sure that's correct there oh sorry we don't need this here perfect now we want to do the same thing for height on change like so perfect event set height event.target dot value now you may see in some tutorials just sit e there and that's fine as well we can abbreviate it like so if we wanted to do that whoops i hate those pop-ups so and that'll work all the same just like like that so if you ever see the e there or event it's the same thing so i'll go and leave them like so just to show that they will both work now again let's see if this will work we already have our bmi down here that should be outputting and so when when we type in our weight it's going to get the value that we type in and it's going to calculate it here and it's going to output with our bmi oh wait before we before we enter anything it's not going to work we do we forgot to add something to our form so we want to add an on submit it's going to run our function here it's like the main thing so calc bmi which if we scroll up it's our function so let's have a look everything should work now 250 74 inches boom so there has it our displays are bmi so technically our application is working properly but we're not getting any message yet nor are we getting our our little person here so and also what this one says submit it should say clear and of course our reload and our reload button is not working so let's go and change that and for our reload all we're going to do is just add a little just add a little function here we can do it right here and we'll just say let reload oops window whoop window.location dot reload boom there we go and then down here i'm going to say on click run the reload function that we just created let's have a look boom clears out our application there so perfect now we got that let's go on and let's display uh we want to display our message so and then we'll do our picture so for our message we'll go right here into our function so we have this our calc bmi function and the event.prevent default will prevent it from being submitted to our server and then we have our little if statement here to only run our calculation if we enter some values then here it is running our calculation so right underneath this set bmi is where we're gonna add logic or message and we're gonna do another if statement and this is gonna be within this statement so if there's no values entered then the bma bmi won't be calculated and this message logic will not even be executed so that's why we're putting it inside this all inside of this function here inside of this if statement so what we're going to say is if bmi is we'll say less than 25 we're going to say set message set message you are underweight else if a bmi will say is greater than or equal to 25 and bmi is we'll say less than 30 what we want to say whoops i'm going to say set message to you are a healthy weight else we'll just set the message to you are overweight so we have if our bmi is calculated it's going to store our number in this bmi here and then we're going to take our number if it's less than 25 it's going to tell us we're underweight it's going to store it in this message here then if it's between 25 or 30 it's going to store that we are healthy weight and if it's over 30 or anything else which would inevitably be over 30 it's gonna say we are overweight so and then why we have this stored as an empty string if this was a if we had it as a zero same with a set bmi it would be listed as zero and we don't want that so that's why we have this one stored as empty string and this one as well and uh we could even if you say um there is no message then this would be displayed there as well so you can get creative with it but i'm just going to leave it blank as an empty string and let's go ahead i think that's it let's go ahead and test this out so 250 pounds six foot two which is 74 inches says i'm 32.1 and it says i am overweight so what if i was to be 200 pounds i should be a normal so yeah this is a healthy weight then it follows 140 pounds at six foot two that's severely underweight for that height so perfect so now all we have left to do is our image so there's many ways to to do this i'm not going to import any images for this and you could you could do it in css and to just show certain classes and basically put um you know just contingent upon the classes we're going to use but i'm going to do this um with just a file path in the image source so what we're going to do where's our image source that we there we have it right there i'm actually going to move this down you don't have to you can kind of put it wherever you want but i'm just going to put it right here it doesn't really matter as long as it's above this return and kind of in here somewhere so we have it here image source we actually don't even need that we can just leave it blank like so i just we did that earlier so we would stop seeing that error so what we want to do here is show image based on bmi cal calculation perfect so what we want to do we'll just say if just some more logic here if um if bmi we'll just say less than one almost zero basically a zero image source we want to be null so no value whoops okay else i hate all those pop-ups drives me crazy else if bmi is less than 25 what we want to do is set the image source to our path here now and this is our path let's see source and then jump outside the directory assets and then we want to display underweight dot p e n g there we go so this is not going to work though because we're not importing the image at the top and when you're not going to import the image you have to do something a little bit different just add a little bit of code here so what we're going to do is highlight that put it in um in parentheses there and then we just say require and that's all we need to do can't resolve let's see why i can't oh i never imported my images so that's one thing we need to do you guys sorry about that we do need to create an assets folder i thought i'd already imported or put my images in here apparently i did not so what i'm going to do is type in assets here it's going to be our folder and i already have my images picked out i'm going to pull them over and basically here are our images we had a healthy guy an overweight dude and then also an underweight dude as well so that's what i'll be using i used it i pulled it over from a vector website i'm not sure which one i'll have to look it up and i'll put it in the in the description below so here we have an underweight guy we haven't done any other logic so nothing else should be displayed so 250 boom wait nothing shows so what we want to do next is kind of the same thing we're doing up here um else if we'll say bmi is greater than or equal to 25 and bmi is less than 30. what we want to do is image source set and again we're going to do the require and this is going to be slash ass up source slash assets slash healthy weight i think is the name just want to confirm healthy just healthy png else and again let's see image source equal to require so basically we're saying if their bmi is less than 25 we're going to show the underweight if it's between 25 and 30 we're going to show the healthy guy than anything else which again which would be over 30 but if it's not less than 25 or 25 to 30 it has to be over 30. then we're gonna display the overweight guy so our source assets overweight.png let's have a look and we can reload our guy there so if we're 120 pounds at six foot two that's quite skinny you are underweight now if i was a 200 pound dude which is an average sized guy for six two it said i'm a healthy weight and of course if i were to be 250 which is what i am go and submit and we're going to be an overweight guy so and we can clear it so that's the what we built today that concludes this tutorial on how to create a bmi calculator in react it was quite overkill to create a whole react application just for a very simple bmi calculator which we very easily created basically the same thing and just pure javascript and a lot less time so it is quite overkill but i really enjoy using all the state i think it really helps solidify some of the um concepts and learning some concepts and react which is never a bad idea to brush up on so and that's why i'm here to help learn for myself and also to teach you guys a thing of two as well so thanks for watching you guys i hope you enjoyed it if you did like the video and consider subscribing to my channel i'm going to be putting out some more react content just like this and potentially some other technologies as well so thanks for tuning in you guys i will see you on the next one

Channel: Code Commerce

Views: 12,233

Keywords:

Id: dq57PcOx56k

Length: 25min 33sec (1533 seconds)

Published: Sun Jan 02 2022