type or paste code here
```<!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>
Is this a homework?
Do you want us to do it for you? Because it includes all the information you need to solve it.
i just need a hint, i have been trying to solve it
here i what i have done so far but i am missing something
type or paste code here
```<!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
//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;
a
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 ...`);
notify(`requesting profile data ...`);
};
const startApp = () => {
// invoke the getAUserProfile here
getAUserProfile();
};
startApp();
</script>
</body>
</html>
Look at the notify
function. It looks for an element with a class “messages”. Does your HTML has one?
no, It doesn’t, if you look through the first code I posted you’d probably see where I was asked to input code, but it’s inside a script tag so I am confused
You can use JavaScript to create and add HTML elements.
const myDivElement = document.createElement('div'); // create a div element
myDivElement.className = 'messages'; // add class "messages" to the element
document.querySelector('body').appendChild(myDivElement) // append your div to body
Same with other elements.
i still don’t understand:sleepy:cry:
i need to create a heading for user’s name
please look at the second code i posted , please have a look at it and correct me where i made mistakes
You don’t have img
and h2
elements in your HTML, just like you don’t have an element with a class “messages”. I already showed you how to create them. Or you can just add those element directly to HTML.