How to build a simple BMI calculator application

not yet cant seem to get the .foreach iteration

i am in chalange 2 step 5
i keep getting this error: create a displaySelectedUser function that iteratess over its parameterand updates the UI.
please anybody that have passed through this should hepl me please

my code but it’s also not passing. i get error users is not defined…any one with a better reason of why please share
`
const users = [];

  const getSelectedUser = (userId) => {
    return users.find(({
      id
    }) => id === userId);
  };

  const displaySelectedUser = (target) => {
    const user = getSelectedUser(target.value);
    const properies = Object.keys(user);

    properties.forEach(prop => {
      const span = document.querySelector(`span[data-${prop}-value]`);
      if (span) {
        span.textContent = user[prop];
      };
    });

  };

  const letsCalculateBMI = (height, weight) => {
    let height = document.getElementById("height").value;
    let weight = document.getElementById("weight").value;
    let bmindex = (weight / (height * height)) * 703;
  };

  const powerupTheUI = () => {
    const buttonClick = document.querySelector('#oracle');
    const selectItem = document.querySelector('.select-text');
    selectItem.addEventListener('change', displaySelectedUser);
    buttonClick.addEventListener('click', letsCalculateBMI);
  };

  const displayUsers = (users) => {
    users.forEach(user => {
      const selectElement = document.querySelector("select");
      const optionElement = document.createElement("option");

      optionElement.text = user.name;
      optionElement.value = user.id;
      select.appendChild(optionElement);

    });
  };

  const fetchAndDisplayUsers = () => {
    users.push({
      age: 40,
      weight: 75,
      height: 6,
      country: 'Nigeria',
      name: 'Charles Odili',
      id: 'dfhb454768DghtF'
    });
    users.push({
      age: 50,
      weight: 68,
      height: 4,
      country: 'Rwanda',
      name: 'Bihire Boris',
      id: 'dfhb454768BghgF'
    });

    displayUsers(users);
  };

  const startApp = () => {
    powerupTheUI();
    fetchAndDisplayUsers();

  };

  startApp();
</script>`

which challenge are u

ur parameter target should be wrapped in curl braces.
remember to use query selector instead of document.getElementByID
pleae who has done or in challenge 3

<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>



<style>

  body {

    background-color: #fff;

  }

  

  div.user-photo {

    margin: 1em auto;

  }

  

  .select {

    margin-bottom: 2.5em;

  }

  

  .user-photo {

    width: 150px;

    height: 150px;

    overflow: hidden;

    border-radius: 50%;

  }

  

  .details {

    color: #fff;

    background-color: #6200ee;

    margin-top: 4em;

    padding: 0.5em 1em;

    border-radius: 10px;

    font-size: 1.3em

  }

  

  .details p {

    margin: 0.3em

  }

  

  #outcome {

    position: absolute;

    width: 100px;

    text-align: center;

    right:2.2em; 

    bottom:6.5em;

  }

  

  #outcome h1{

    padding:1em; 

    background:#ffffff; 

    border-radius:10%; 

    margin:0 

  }

  

  #outcome p{

    height:40px; 

    color:#ffffff;

    border-bottom:5px solid #ffffff; 

    font-size:2em; 

    margin:0; 

    padding:0.5em 0 0.5em 0;

  }

  

  #oracle{

     margin-top:2.5em; 

    border: 1px solid; 

    width:100%

  }

</style>
<button id="filter-query"class="mdc-icon-button material-icons">

  filter_list

</button>



<div class="select">

  <select class="select-text">

    <option selected="true" disabled="disabled">Select User</option>

  </select>

</div>



 <div class="user-photo">

  <img src="via.placeholder.com/150" alt="user">

</div>



 <div class="details mdc-elevation--z3">

   <p>

     <span class="prop" data-age>Age</span>

     <span class="value" data-age-value></span>

   </p>

   <p>

     <span class="prop" data-height>Height</span>

     <span class="value" data-height-value></span>

   </p>

   <p>

     <span class="prop" data-weight>Weight</span>

     <span class="value" data-weight-value></span>

   </p>

   <p>

     <span class="prop" data-gender>Gender</span>

     <span class="value" data-gender-value></span>

   </p>

   <p>

     <span class="prop" data-country>Country</span>

     <span class="value" data-country-value></span>

   </p>

</div>



<button id="oracle" class="mdc-button">Calculate BMI</button>



<div id="outcome">

  <h1 class="mdc-typography--headline5">

    BMI

  </h1>
  <p></p>

</div>

<script>

const users = [];
const getSelectedUser = (userId) => users.find(({id}) => id == userId)
const displaySelectedUser = ({target}) => {
const value = target.value;
const user = getSelectedUser(value);
const properties = Object.keys(user);
properties.forEach(property => {
const span = document.querySelector([data-${property}]);

    if (span) {
      span.textContent = `${property}: `;
    }
})

};
const letsCalculateBMI =()=>{ }
const powerupTheUI =()=>{
var selectElement = document.querySelector(‘select’);
selectElement.addEventListener(‘change’,displaySelectedUser);

    var button =  document.querySelector('#oracle');
    button.addEventListener('click',letsCalculateBMI);

  }
  const displayUsers=(users)=>{ 
    var parent = document.querySelector('select');
    
    users.forEach((user) => {
      var option = document.createElement('option');
      option.textContent = user.name;
      option.setAttribute("value",user.id);
      
      parent.appendChild(option);
    	
  	})

}

  const fetchAndDisplayUsers = () => {
    users.push({
      age: 40,
      weight: 75,
      height: 6,
      name: 'Charles Odili',
      country: 'Nigeria',
      
      id: 'dfhb454768DghtF'
    });
    
    users.push({
      age:25,
      weight:70,
      height:5,
      name:'Fallon Eve',
      country:'Senegal',
      id:'abcd123456EfghiJ'
    });

    displayUsers(users);
  };
  
  const startApp = () => {
    powerupTheUI();
    fetchAndDisplayUsers();
  };

  startApp();
  </script>

The questions are viz;

  1. Create a displayUsers arrow function just above the fetchAndDisplayUsers function. It should take a users parameter
  2. It should use the array .forEach function to iterate over users and populate the SELECT UI element with OPTION elements. Each OPTION should have its value set to the id of a given user, while its display text should be set to the user’s name.

I’ve tried to write the following code but still giving error.

const displayUsers = (users) => {
    var parent = document.querySelector('select');
    
    users.forEach((user) => {
      var option = document.createElement('option');
      option.textContent = user.name;
      option.setAttribute("value",user.id);
      
      parent.appendChild(option);
    	
  	});
  }

Your help would be highly appreciated, thank you.

We can not see your full code, so we have no idea what error you are seeing.

May I ask what this code is for? I have seen a similar question several times already.

Assignment for what?

Sounds like you need to be asking these questions of your trainer or find some new training. You should definitely look at the curriculum here if you are having trouble with these kinds of problems. We don’t know what training you have had and we want to teach rather than just give you the answers.

Okay sir.

Thank you.

<button id="filter-query" class="mdc-icon button  material-icons">filter_list</button>

Do you have a question?

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

I assume this is the same homework problem that a few other people have asked for help on recently on the forum. We do not have enough information to help you: what you have posted is just a small syntactically correct piece of HTML. We have no idea what’s wrong with it, because we cannot see the instructions for the task that you are looking at: they are, I assume, on a computer screen in front of you and we are not you.

Thanks. The Instruction is to create a button element with an id and two classes

The code you posted creates a button element with an id and has three classes. If you only need two classes, then you should remove one.

’ ’ ’ i need help to answer this technical assessement

Step 1 Within the STYLE tag, give the BODY element a white background Create a BUTTON element with ID of filter-query, and give it a CSS class of select-text mdc-icon-button and material-icons. Set its text to filter_list. Create a DIV element and give it a CSS class of select. Within the DIV, create a SELECT element with a CSS class of select-text The SELECT element should have an option that is disabled and selected by defualt. Give this option any text you like, e.g “Select User” Next, create a new DIV with a CSS class of user-photo. Inside it, create an IMAGE and set its src to a placeholder from https://placeholder.com/Make sure to give your IMAGE an alternate text Next, create a DIV with CSS class of details and mdc-elevation–z3. This DIV should have 5 PARAGRAPH elements, each containing a SPAN with CSS class prop and another SPAN with CSS class of value Step 2 Using the SPAN elements so far created, your app will display the Age, Height, Weight, Gender, and Country of any given user. Let’s call these the user properties!

For a given user property, e.g Age, locate a PARAGRAPH element and give the child SPAN with class prop an HTML attribute of data-age, then set its text value to Age :. The SPAN with class value should have an HTML attribute of data-age-value. The HTML attributes do not need to have a vlaue. Just like for Age, do same for all the user properties listed above, such that all pairs of SPAN elements are mapped to excatly one user property. Feel free to order them anyhow you like. Step 3 Create a BUTTON with an ID of oracle and CSS class of mdc-button. Give the button an call-to-action text of your choice, e.g “Calculate BMI” Create a DIV an ID of outcome. Within it, create a HEADING element with CSS class of mdc-typography–headline5. Set the text of the HEADING to BMI. Next to the HEADING and still within the DIV with ID of outcome, create an empty PARAGRAPH. Time to make your app look good. To get a better preview as you go along, feel free to set some dummy data values in the SPAN elements for each user property

Step 4 The .select DIV should have a bottom margin of 2.5em The .user-photo DIV wrapping the user’s IMAGE should have 150px of width and height, and styled to display as a circle. You might need to explore the overflow CSS property to make the IMAGE comply with the circular shape of the DIV Step 5 The .details DIV should have white foreground color and #6200ee background color, font size of 1.3em, top margin of 4em, padding top/bottom of 0.5em and padding left/right of 1em, and optional curved edges of 10px The PARAGRAPH elements within the .details DIV should have margins of 0.3em The DIV with ID of outcome should use absolute positioning, with 2.2em from the right edge and 6.5em from the bottom edge of the viewport. It should be 100px wide, and have centered text. The HEADING within the DIV with ID of outcome should have 1em padding, white background, 10% curved edges, and no margins. The PARAGRAPH within the DIV with ID of outcome should have a white foreground color, solid white 5px bottom border, 2em font size, no margins, 0.5em top/bottom padding and no left/right padding Step 6 The BUTTON with ID of oracle should have 2.5em top margin, solid 1px border, and occupy the available horizontal space.’ ’ ’

Blockquote ```

<title>Mini App</title>

<style>
  body{background:#ffffff}
  div.select{margin-bottom:2.5em}
  div.user-photo {
    margin: 1em auto;
    height:150px;
    width:150px;
    border-radius:50%;
    overflow:hidden;
  }
  div.details{color:#ffffff; 
  background:#6200ee; font-size:1.3em; 
    margin-top:4em; 
    padding:0.5em 1em 0.5em 1em; 
    border-radius:10px;}
  .details p{margin:0.3em}
  div#outcome{position:absolute; 
    right:2.2em; 
    bottom:6.5em; 
    width:100px;
    text-align:center}
  #outcome h5{padding:1em; 
    background:#ffffff; 
    border-radius:10%; 
    margin:0 }
  #outcome p{height:40px; 
    color:#ffffff;
    border-bottom:5px solid #ffffff; 
    font-size:2em; 
    margin:0; 
    padding:0.5em 0 0.5em 0;}
   #oracle{margin-top:2.5em; 
    border: 1px solid; 
    width:100%}
</style>
filter_list
Select User
user photo

Age :35

Height :1.6m

Weight :75kg

Gender :Male

Country :Nigeria

  <button id="oracle" class="mdc-button">Calculate BMI</button>
  <div id="outcome"><h5 class="mdc-typography--headline5" >BMI</h5><p></p>
</div>
```