<!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;
}
div.user-photo {
width: 150px;
height: 150px;
margin: 1em auto;
background: #fff;
}
div.details {
font-size: 2.3em;
margin: 2.5em 0.2em 0.2em 0.2em;
color: #fff;
padding: 1.1em;
}
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;
}
</style>
</head>
<body>
<script>
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
clearNotice();
};
const getAUserProfile = () => {
const api = 'https://randomuser.me/api/';
// make API call here
notify(`requesting profile data ...`);
};
const startApp = () => {
// invoke the getAUserProfile here
};
startApp();
</script>
</body>
</html>
What is your question?
i want to modify the displayUserPhotoAndName function to display a user’s name from ther API call in
What part are you stuck on? What isn’t working as you expect? What is it doing instead?
I modify the displayUserPhotoAndName … where it says //add code here
i can’t modify the displayUserPhotoAndName *
What have you tried?
// add your code here
data.textContent = data;
if(!data.classList.contains('Chukwuemeka 0biano')) {
data.classList.add('Chukwuemeka Obiano');
}
clearNotice();
};
I am new, Please guide me…i think there’s something i am getting wrong
i would post my work maybe you’d help me
<!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;
}
div.user-photo {
width: 150px;
height: 150px;
margin: 1em auto;
background: #fff;
}
div.details {
font-size: 2.3em;
margin: 2.5em 0.2em 0.2em 0.2em;
color: #fff;
padding: 1.1em;
}
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;
}
</style>
</head>
<body>
<script>
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
data.textContent = data;
if(!data.classList.contains('Chukwuemeka 0biano')) {
data.classList.add('Chukwuemeka Obiano');
}
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>
I suspect that classList
is not what you want to be checking and modifying.
Also, just so you know, you have two different strings. One uses a zero in “0biano” and the other uses the letter ‘O’ in “Obiano”.
what do suggest then
What were you trying to accomplish with classList
?
I was trying to create a heading for the user’s name
this is absolutely what i want do… but i having difficulties with what code i could see the excute that
I want to Modify the displayUserPhotoAndName
function to display a user’s name
from the API call in getAUserProfile() in a DIV with a CSS class of details
. The parameters in *displayUserPhotoAndName must use destructuring, so I need to extract the name from the object
// add your code here
//destrucure obj data
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;
clearNotice();