How to build a simple BMI calculator application

100

yeah that’s what some other folks are tell me now. the whole text wiping away thingy. I guess it should be a problem from their end

101

its happening right now, I just clear my cache now to refresh and every went off

102

please any progress, I still don’t knw my faith

103

which stage of the code are you having the challenge… I’m stuck in creating a ‘displayUser’ function even though I’ve done that

104

my function looks like this yet I’m still getting the error : ‘Create a “displayUsers” function that iterates over its parameter and updates the UI’:sweat:
please I need help, what am I doing wrong

const displayUsers = (users) => {
        let sel=document.querySelector('select');
        users.forEach(function(user, key) {
          sel[key] = new Option(user.name, user.id);
        });
      };
105

bros still in stage one, #oracle button not having specified style rule

106

share the code lets see

107

Im getting an error “Awwww snap! Your BMI calculation is not correct. Review the instructions and continue.” on stage 3. anyone with the solution??

1 Like
108 
<title>Mini App</title>

<style>
  
  div.user-photo {
    margin: 1em auto;
  }
  body{
background-color:white;
  
  }
  .select{
	margin-bottom:2.5em;
  }
  
 div .user-photo{
	width:150px;
    height: 150px;
    overflow:hidden;
    margin: 1em auto;
   border-radius: 50%;
  }
  
  .user-photo img{
    width : 150px;
    height:150px;
    border-radius:50%;
    
  }
  .details{
	color:white;
    background:#6200ee;
    font-size:1.3em;
    margin-top:4em;
    padding:0.5em 1em 0.5em 1em;
    border-radius:10px;
   
  }
  .details p{
    margin:0.3em;
    
  }
  
  #outcome{
 position:absolute;
    right:2.2em;
    bottom:6.5em;
    width:100px;
    text-align:center;
  }
  #outcome h5{
    padding:1em;
    background-color: #fff;
    border-radius:10%;
    margin:0;
  }
  
  #outcome p{
    height:40px;
    color:white;
    border-bottom:solid white 5px;
    font-size: 2em;
    margin:0;
    padding:0.5em 0  0.5em 0;
    
  }
  
#oracle {
	margin-top:2.5em;
     border: 1px solid;
      width:100% auto;
     
  }
</style>
filter_list 
</button>
<!-- Select User-->
<div class="select">
  <select class="select-text">
    <option disabled selected value=""> Select User</option>
  </select>
</div>
<!--user photo -->
<div class="user-photo">
  <img src="https://via.placeholder.com/300.png/09f/fff" alt="user-image">
</div>
<!-- details -->
<div class="details mdc-elevation--z3">
  
  <p>
    <span class="prop" data-age>Age :</span>
    <span class="value" data-age-value>28</sapn>
  </p>
  
  <p>
    <span class="prop" data-height>Height :</span>
    <span class="value" data-height-value>1.68cm</span>
  </p>
  
  <p>
    <span class="prop" data-weight>Weight :</span>
    <span class="value" data-weight-value>55.90kg</span>
  </p>
  
  <p>
    <span class="prop" data-gender>Gender :</span>
    <span class="value" data-gender-value>Male</span>
  </p>
  
  <p>
    <span class="prop" data-country>Country :</span>
    <span class="value" data-country-value>Nigeria</span>
  </p>
</div>
		<!--oracle -->
  <button id="oracle" class="mdc-button">Calculate BMI</button>
 
  <!---outcome -->
<div id="outcome">
  <h5 class="mdc-typography--headline5">BMI</h5>
  
  <p></p>
</div>

<script>
  const fetchAndDisplayUsers = () => {
    users.push({
      age: 40,
      weight: 75,
      height: 6,
      country: 'Nigeria',
      name: 'Charles Odili',
      id: 'dfhb454768DghtF'
    });

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

  startApp();
</script>
That is the code no ,please kindly help let me leave stage one
109

set your #oracle width to just 100% as in

#oracle{
width: 100%;
}
110

maybe you mistakenly added or removed a code from a stage you already cleared, crosschecking might help. and hey how did you get past the ‘displayUsers()’ function, I’m stuck there and i really need help. I’ve tried different codes but it wouldn’t budge, here’s what i have currently

const displayUsers = (users) => {
        users.forEach(user => {
          let sel= document.querySelector('select');
          let opt = document.createElement('option');
          
          opt.value = user.id;
          opt.textContent = user.name;
          sel.appendChild(opt);
        });
      };

please what am I doing wrong

112

if you have a correct computeBMI function, please share

114 
<button id="oracle" class="mdc-button"> Click Me</button>
115

remove the values you personally inserted in the


Age :
28

then you can move to the next stage