I'm currently working on a project to create a BMI calculator following specific instructions. I've managed to follow all the guidelines except one regarding the letsCalculateBMI function. The instruction states:
letsCalculateBMIshould extract the selected value from the SELECT element, pass that value to agetSelectedUserfunction call, which in turn should return theuser objectcorresponding to the selected value. Thisuser objectneeds to be assigned to a variable calleduser.
I'm confused about how to make the getSelectedUser function work within the letsCalculateBMI function to retrieve the user object and assign it to the user variable.
In the computeBMI arrow function, the user parameter is immediately destructured into weight, height, and country properties for quick reference.
The current error message I'm encountering is
Uncaught ReferenceError: weight is not defined at HTMLButtonElement.letsCalculateBMIindex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Mini App</title>
</head>
<body>
<div class="select">
<select class="select-text">
<option disabled selected>Select User</option>
</select>
</div>
<div class="details mdc-elevation--z3">
<p>
<span class="prop" data-age>Age :</span>
<span class="value" data-age-value>23 years</span>
</p>
<p>
<span class="prop" data-height>Height :</span>
<span class="value" data-height-value>169cm</span>
</p>
<p>
<span class="prop" data-weight>Weight :</span>
<span class="value" data-weight-value>68kg</span>
</p>
<p>
<span class="prop" data-gender>Gender :</span>
<span class="value" data-gender-value>Female</span>
</p>
<p>
<span class="prop" data-country>Country :</span>
<span class="value" data-country-value>Nigerian</span>
</p>
</div>
<button id="oracle" class="mdc-button" onclick="letsCalculateBMI()">
Calculate BMI
</button>
<div id="outcome">
<h5 class="mdc-typography--headline5">
BMI
</h5>
<p class ="bmi-text"></p>
</div>
<script>
const users = [];
const countriesWithLowerBmi = ["Chad", "Sierra Leone", "Mali", "Gambia", "Uganda", "Ghana", "Senegal", "Somalia", "Ivory Coast", "Isreal"];
const featToMeter = 0.3048;
const bmiCountryRatio = 0.82;
const computeBMI = ({weight, height, country}) => {
const heightInMeters = height * featToMeter;
let BMI = weight / (heightInMeters^2);
if (countriesWithLowerBmi.includes(country))
BMI *= bmiCountryRatio;
return Math.round(BMI, 2);
};
const getSelectedUser = (userId) => {
return users.find(({id}) => id === userId);
};
const displaySelectedUser = ({target}) => {
const user = getSelectedUser(target.value);
const properties = Object.keys(user);
properties.forEach(prop => {
const span = document.querySelector(`span[data-${prop}-value]`);
if(span) {
span.textContent= user[prop];
}
})
}
const letsCalculateBMI = () => {
const value = document.querySelector('.select-text').value;
getSelectedUser(value);
const user = {weight, height, country}
const bmi = computeBMI(user);
document.querySelector('.bmi-text').innerHTML = bmi
};
const powerupTheUI = () => {
const button = document.querySelector('#oracle');
const select = document.querySelector('.select-text');
select.addEventListener('change', displaySelectedUser);
button.addEventListener('click',letsCalculateBMI);
};
const displayUsers = (users) => {
users.forEach(user => {
const select = document.querySelector('.select-text');
const option = document.createElement('option');
option.text = user.name;
option.value = user.id;
select.appendChild(option);
});
};
const fetchAndDisplayUsers = () => {
users.push(
{
age: 40,
weight: 75,
height: 6,
country: 'Nigeria',
name: 'Charles Odili',
id: 'dfhb454768DghtF'
},
{
age: 23,
weight: 68,
height: 6,
country: 'Nigeria',
name: 'Simpcy',
id: 'gibb12erish'
}
);
displayUsers(users);
};
const startApp = () => {
powerupTheUI();
fetchAndDisplayUsers();
};
startApp();
</script>
</body>
</html>