How to build a simple BMI calculator application

<title>Mini App</title>

<style>
  
  div.user-photo {
    margin: 1em auto;
  }
  
</style>
<script>
  
  const fetchAndDisplayUsers = () => {
    users.push({
      age: 40,
      weight: 75,
      height: 6,
      country: 'Nigeria',
      name: 'Marcus John',
      id: 'dfhb454768DghtF'
    });

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

  startApp();

</script>

Firstly, welcome to the forums.

While we are primarily here to help people with their Free Code Camp progress, we are open to people on other paths, too. Some of what you are asking is pretty trivial in the Free Code Camp context, so you might find that if you’re not getting the instruction and material you need in your current studies, the FCC curriculum will really help you get started. At a modest guess I’d say investing a 4-5 hours working through the curriculum here will really pay off. You can find the curriculum at https://freecodecamp.org.

With your current questions, we don’t have enough context to know what you already know or don’t know, so it is impossible to guide you without just telling you the answer (which we won’t do).

It is pretty typical on here for people to share a codepen / jsfiddle example of what they have tried so that anyone helping has more of an idea of what help is actually helpful.

Please provide some example of what you’ve tried and I’m sure you’ll get more help.

Happy coding :slight_smile:

1 Like

Tell us what’s happening:

Hey guys am having a test Assessment, I got struck just at the beginning of the test. am suppose to add a button like to: Click Me! into the webpage. and it not workout for me, anytime I try to run the code I get this message: You have not created the #filter-query BUTTON as specified. please help me out friends .

Your code so far

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

    <style>
      
      body{
        background: white;
      }
      div.user-photo {
        margin: 1em auto;
      }
      
    </style>
  </head>
  <body>
    
    
    <button id="filter-query" class="mdc-icon-button material-icons">Click Me!</button>
    
    <script>
      
      const fetchAndDisplayUsers = () => {
        users.push({
          age: 40,
          weight: 75,
          height: 6,
          country: 'Nigeria',
          name: 'Charles Odili',
          id: 'dfhb454768DghtF'
        });

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

      startApp();

    </script>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36.

object

Looks like on the screenshot your button is missing the title text.

@jenovs how, please can you explain a bit further?

In the screenshot button doesn’t have “Click me”

This appears to be an assignment for a job interview. You should really be doing the work for this on your own. If you are stuck, you should ask for clarification from the hiring company.

Step 1

  1. Create a users variable and assign it an empty array literal.
  2. Create a displaySelectedUser arrow function
  3. Create a letsCalculateBMI arrow function
  4. Create a powerupTheUI arrow function
  5. Within the startApp function, invoke the powerupTheUI function, followed by the fetchAndDisplayUsers function.

Step 2

In the powerupTheUI function, and using only the DOM Selector API :

  1. Set displaySelectedUser as a change event listener for the SELECT UI element.
  2. Set letsCalculateBMI as the click event listener for the #oracle BUTTON

Step 3

The fetchAndDisplayUsers tries to call a displayUsers function that does not exist. Lets fix that!

  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
  3. We can see a sample user in our app; a certain Charles Odili from Nigeria! Add a new user object (e.g representing yourself) to the users array in fetchAndDisplayUsers . Feel free to not use real data values, but ensure the id is different from that of the existing user.

Step 4

When we select the sample user from the list, nothing happens. Let’s fix that!

  1. Create a getSelectedUser arrow function above displaySelectedUser . It should take a userId parameter and use the Array .find function on the users collection to find and return the selected user object . Your .find call should take an inline arrow function and de-structure its parameter to obtain the id property.

Step 5

Recall that the displaySelectedUser function is called as an event handler. This means it will receive an event object when the DOM event is triggered.

  1. Update the displaySelectedUser function and de-structure the expected event parameter to just the target property.
  2. Next, displaySelectedUser should call getSelectedUser with a certain property of target that represents the selected value of the SELECT element from the change event. Feel free to do some Googling if you dont know the property in question. Finally, assign the result of your .getSelectedUser call to a user variable.
  3. Next, use Object.keys(..) to get the collection of properties of user . Assign it to a properties variable.
  4. Iterate over properties with the array .forEach function, and display the properties in the UI. *Hint: * a given property like Age has a corresponding SPAN element with a data-age-value attribute. You can use ES6 template strings to build the query selector targeting the SPAN for that property, and then query the DOM with it. You also want to make sure you only update the UI if the DOM query was successful. Good luck!

Firstly, welcome to the forums.

While we are primarily here to help people with their Free Code Camp progress, we are open to people on other paths, too. Some of what you are asking is pretty trivial in the Free Code Camp context, so you might find that if you’re not getting the instruction and material you need in your current studies, the FCC curriculum will really help you get started. At a modest guess I’d say investing a 4-5 hours working through the curriculum here will really pay off. You can find the curriculum at https://learn.freecodecamp.org.

With your current questions, we don’t have enough context to know what you already know or don’t know, so it is impossible to guide you without just telling you the answer (which we won’t do).

It is pretty typical on here for people to share a codepen / jsfiddle example of what they have tried so that anyone helping has more of an idea of what help is actually helpful.

Please provide some example of what you’ve tried and I’m sure you’ll get more help.

Happy coding :slight_smile:

1 Like

as an answer to your question, this what i have been able to do but it is still throwing error. Any help would be appreciated

 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:'Ossai Ebube',
          country:'Senegal',
          id:'abcd123456EfghiJ'
        });

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

      startApp();

Chidimma please come back here. we need you

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

1 Like

Chidimma I’m also stuck at the last step. Have you had any luck in solving it. Kindly get back to me.

How did you reach the final one cos the 3 step is giving me headache

1 Like

how have you done your step 3 ??

how have you done 3?