Hi all.
I have my html done for my page implementing these in my form, but I am very lost on how to actually link them together so that they will calculate using var
Just shooting in the dark, as we arenât seeing your code, but you would need an array of javascript objects, kind of formatted like this:
const BMIChart = {
'female': {
'18': [
{ 'min': 0, 'max': 16, 'verdict': 'Too Skinny' },
{ 'min': 17, 'max': 30, 'verdict': 'Healthy' },
{ 'min': 31, 'max': 35, 'verdict': 'Overweight' },
{ 'min': 36, 'max': 50, 'verdict': 'Obese' },
],
'19': [
{ 'min': 0, 'max': 18, 'verdict': 'Too Skinny' },
{ 'min': 19, 'max': 31, 'verdict': 'Healthy' },
{ 'min': 32, 'max': 36, 'verdict': 'Overweight' },
{ 'min': 37, 'max': 50, 'verdict': 'Obese' },
],
/* Continue with this same structure, to copy all the table data for female */
},
'male': {
/* Use the same structure as above, to create the table data for male */
}
}
With that in place, you would simply take the value from each of your inputs, and filter the BMIChart object.
let gender = document.querySelector("input[name='gender']").value,
age = document.querySelector("input[name='age']").value,
bodyFat = document.querySelector("input[name='body-fat']").value;
// This would filter out every other row, just leaving us having to determine which bracket this person
// falls in.
let myTableRow = BMI[gender][age];
// The only thing left is to iterate over the `myTableRow`, and see if the bodyFat is between min and
// max for each level.
Without knowing your level of JS skills, itâs hard to say exactly how that might work, but thatâs the easiest way I can see. There are other, far more concise and ES6-y ways to do it, but it seems to me this is the most intuitive.
If you like, try setting up a jsfiddle or codepen or a repl.it, and we can cobble together a solution.
1 Like
Yep, so that structure Iâd showed above pretty much marries straight into this. The only tricky bit is finding the one result in the row that matches your bodyfat value.
The big question is, how comfortable are you with javascript? Have you used things like Array.filter(...) yet?
This is actually my first time using javascript, hence me being extremely lost. I inserted all the js code for the females and males, as well as the âletâ, but am now lost on how to get the results. I believe we were also supposed to incorporate âifâ statements, so not sure how that would work in the code you gave.
This is you jumping in at the deep end. There is no way, as your first time using javascript, that this is a trivial example. Yes, there will be if statements. Lots and lots of them. The structure (just to kind of map out a first-time approach) might look like:
if (gender === 'female'){
if (age === 18){
if (bodyFat <= 16){
// here we handle all female 18yo with a body fat % at or below 16
} else if (bodyFat <= 30){
// this is the case of female 18yo with a body fat between 17 and 30
// by filtering the under 16 first, anything under 30 will now be over 16
} else if (bodyFat <= 35){
// same as above, but body fat between 31 and 35
} else {
// and anything OVER 35 is all handled here.
}
} else if (age === 19){
// here, you would have the same four brackets, with different numbers for
// bodyfat. And you would do this for every age on the female table
}
} else {
/**
* Here, gender is male. Or anything not female. So the table is different, but
* the handling is exactly the same. Lots of if statements, first for age, and within
* that for body fat.
**/
}
Again, there are FAR simpler ways to do this, but as they expect if statements, youâre going to be DROWNING them in if statements.
If you want to see this running so far, Iâve set up a starting repl for you to play with: https://repl.it/@TobiasParent/Freecodethrowaway-homework-challenge
1 Like
Thanks for the help again! I have inputed all of the if/else statements, but even in your example code when I click the calculate body type button, it does not calculate and alert whether it is skinny, average, overweight or obese.
Do you have the code working somewhere? Did you build it on your local machine, or on that repl I pointed you to?
Hey Randell. The lectures were based around these if/else statements, so even though the criteria doesnât say it appears they are mandatory. Unfortunately, the instructor does not answer questions as he directs them to the TAâs who take days to respond, which does not work well with weekly assignments.
I have it in both my local files and repl, but it will not allow me to post the link.
At any rate, inside the deepest nesting of each if statement (in the bodyfat if blocks), the easiest solution is simply to output the alert for each one. So in the first (female, 18yo, 14% body fat), you would alert("Your body type is too skinny");
Another approach would be to build a string in each of those if statements, and then output that string once after all the if statements have evaluated.
Would I implement it like this?
if (bodyfat < 16){
verdict += âToo skinnyâ;
alert(âYou are skinny!â); }
If you alert that, then you can get rid of the verdict line. Otherwise, exactly right.
HmâŚIâm confused as to where the alert supposed to go if that cancels out the verdict?
if (bodyfat < 16){
alert("Your body type is Too skinny");
}
This is the following code I have right now for the 18 year old females, but it is still not alerting me
if (gender === âfemaleâ){
if (age === 18){
if (bodyfat < 16){
alert("Your body type is too skinny")}
else if (bodyFat < 30){
alert("Your body type is average");
} else if (bodyFat < 35) {
alert("Your body type is overweight");
}else {
alert("Your body type is obese");
}
And that code is happening inside the calculate buttonâs addEventListener handler, like I showed you?
That is correct, but I deleted the
verdict = "Your body type is " ;
from the code as I am no longer using it. Your code for some reason does not actually calculate it on repl.it when I input the information.
My ta told me it is not working for 2 reasons, but I have not been able to fix it. She said all of the âelse ifâ statements are not closed. This is what the start with the button code and else if statement looks like and Iâm not sure how it isnât closed.
She also said my radio buttons are not being stored, and I cannot figure out how to do that.
your radio buttons are stored in gender, thatâs sort of the point of it. it only saves the selected radio button, but itâs in there.
If you donât close the second else if, the age === 19 one, then yeah, thatâll be the problem. without seeing the full code, we canât really tell.