<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 
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.
In the screenshot button doesn’t have “Click me”
users variable and assign it an empty array literal.displaySelectedUser arrow functionletsCalculateBMI arrow functionpowerupTheUI arrow functionstartApp function, invoke the powerupTheUI function, followed by the fetchAndDisplayUsers function.In the powerupTheUI function, and using only the DOM Selector API :
displaySelectedUser as a change event listener for the SELECT UI element.letsCalculateBMI as the click event listener for the #oracle BUTTONThe fetchAndDisplayUsers tries to call a displayUsers function that does not exist. Lets fix that!
displayUsers arrow function just above the fetchAndDisplayUsers function. It should take a users parameter.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 nameusers array in fetchAndDisplayUsers . Feel free to not use real data values, but ensure the id is different from that of the existing user.When we select the sample user from the list, nothing happens. Let’s fix that!
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.Recall that the
displaySelectedUserfunction is called as an event handler. This means it will receive aneventobject when the DOM event is triggered.
displaySelectedUser function and de-structure the expected event parameter to just the target property.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.Object.keys(..) to get the collection of properties of user . Assign it to a properties variable.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
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
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
how have you done your step 3 ??
how have you done 3?
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>