var displayAddress = ({location = 'location'}) => {
document.querySelectorAll('.details').textContent = ('location.(street,city,state)');
};
var displayBirthdate = ({dob = 'dob'}) => {
document.querySelectorAll('.details').textContent = ('dob.(age)');
};
var displayPhone = ({phone = 'phone', cell='cell'}) => {
document.querySelectorAll('.details').textContent = phone.cell;
};
This is the condition
- Modify the
displayBirthdatefunction to display the userāsagein the DIV with a CSS class ofdetails. Use thexyz years oldformat, assuming xyz is the age. - Modify the
displayAddressfunction to display thestreet,city, andstateof the location property of the user. Display it in the DIV with a CSS class ofdetails. Use thestreet, city, stateformat - Modify the
displayPhonefunction to display thephone, andcellproperties of the user. Display the information in the DIV with a CSS class ofdetails. Use thephone / cellformat
Same question asked by the same user in the Help forum.
Are you taking a test for a job?
Where is your code?
this is iit
var displayAddress = ({location = ālocationā}) => { document.querySelectorAll(ā.detailsā).textContent = (ālocation.(street,city,state)ā); }; var displayBirthdate = ({dob = ādobā}) => { document.querySelectorAll(ā.detailsā).textContent = (ādob.(age)ā); }; var displayPhone = ({phone = āphoneā, cell=ācellā}) => { document.querySelectorAll(ā.detailsā).textContent = phone.cell; };
I cleaned your code up. You donāt need to write everything on a single line, doing so just makes it impossible to read.
Several issues
This:
({dob = 'dob'})
This is not how you write arguments for functions. You write them like:
function (a, b) {
// Dostuff
}
Not
function ({a, b}) {
// Dostuff
}
Then querySelectorAll('.details') returns a list of all the html elements that have the class details. You canāt set the text content of a list: itās a list of things, not a single thing. querySelectorAll is probably the wrong function, going by the description, as the name suggests, it gets all the matching elements, but you only need one.
You need to find .details, then find ālocationā in details (and then the other two) and set the text content of those.
Then, textContent is a string you set. So if you set the text content as ālocation.(street,city,state)ā thatās literally what your setting, that string.
Finally, what is this from because this is about the 20th near identical question Iāve seen recently.
<!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: lavender;
margin: 0px;
overflow: hidden;
}
*{
margin: 0;
padding: 0;
}
header h2{
text-align: center;
margin-bottom: 2.79em;
text-transform: Capitalize;
}
img{
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
}
div.user-photo {
width: 150px;
height: 150px;
margin: 1em auto;
background: #fff;
overflow: hidden;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}
div.details {
font-size: 2.3em;
margin: 2.5em 0.2em 0.2em 0.2em;
color: #fff;
padding: 1.1em;
display: flex;
min-height: 6em;
background: #6200ee;
}
footer {
width: calc(100% - 2em);
z-index: 500;
position: absolute;
bottom: 0;
overflow: hidden;
display: flex;
justify-content: space-between;
margin: 0 1em;
}
footer button.mdc-icon-button {
margin: 0.5em;
background-color: #573594;
}
</style>
</head>
<body>
<header>
<h2>Salihu Abdulwahab</h2>
</header>
<div class="user-photo mdc-elevation--z3" >
<img src="https://via.placeholder.com/150" alt =""/>
</div>
<div class ="details mdc-elevation--z3"></div>
<div class ="messages"></div>
<footer>
<button id = "btn-address" required="required"
class="mdc-icon-button small material-icons" style="color: white;"><i> home</i> </button>
<button id = "btn-phone" required=""
class="mdc-icon-button small material-icons" style="color: white;"><i>phone</i> </button>
<button id = "btn-birthdate" required=""
class="mdc-icon-button small material-icons" style="color: white;"><i>date_range</i></button>
</footer>
<script>
var displayAddress = ({location = 'location'}) => {document.querySelectorAll('.details').textContent = ('location.(street,city,state)')};
var displayBirthdate = ({dob = 'dob'}) => {document.querySelectorAll('.details').textContent = ('dob.(age)')};
var displayPhone = ({phone = 'phone', cell='cell'}) => {document.querySelectorAll('.details').textContent = phone.cell};
const displayExtraUserInfo = (params) => {
document.getElementById("btn-birthdate").addEventListener("click", ()=> {
displayBirthdate(params)
})
document.getElementById("btn-phone").addEventListener("click", () => {
displayPhone(params)
})
document.getElementById("btn-address").addEventListener("click", () => {
displayAddress(params)
})
}
const notify = (msg) => {
const toastr = document.querySelector('.messages');
if(!toastr) return;
toastr.textContent = msg;
if(!toastr.classList.contains('on')) {
toastr.classList.add('on');
}
};
const clearNotice = () => {
const toastr = document.querySelector('.messages');
if(!toastr) return;
toastr.textContent = '';
toastr.classList.remove('on');
};
const displayUserPhotoAndName = (data) => {
if(!data) return;
// add your code here
let {results} = data;
//destructure arr
let [profile] = results;
//Assign Name
document.querySelector('h2').textContent = profile.name.title + ' '+profile.name.last+' '+profile.name.first;
//Display Image
document.querySelector('img').src = profile.picture.large;
displayExtraUserInfo(profile);
clearNotice();
};
const getAUserProfile = () => {
const api = 'https://randomuser.me/api/';
// make API call here
fetch(api)
.then(res => res.json())
.then(results => {return displayUserPhotoAndName(results)});
notify(`requesting profile data ...`);
};
const startApp = () => {
// invoke the getAUserProfile here
getAUserProfile();
};
startApp();
</script>
</body>
</html>
this is the whole test code
That is not an answer to the question we were asking
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.
As I mentioned in the other thread, it appears to be an interview question at andela.com. My guess is they recently posted a job opening, and this is from their interview form. Iām looking for a polite boilerplate response to brush these questions off, though Iām starting to be less inclined to be polite about it ā¦
2 Likes
Feels like an up/down vote system can be a great addition to the forum in response to a situation like this.
so what do i do now, time is almost out
If you are not able to come to a solution with the hints given to you, study more and try next time
The freecodecamp forum is mainly for has for help with fcc curriculum but Help is given to everyone, just not expect that someone will give you the answer
You can ask what topics you would need to cover to be able to solve it so you know where to start to study for next time
1 Like
I donāt mean to be harsh here, but youāre trying to pass a timed test without having a basic grasp of the concepts you need to pass the test (and do the job the test is for). Iām not willing to just give you the answer for this: it isnāt a difficult task, and you need to understand the language a bit better before you try again.
1 Like