I am having the same issue, my code is right below, everything looks good, but I can't proceed more than this, its on javascript
<!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: 0;
height: 100%;
overflow: hidden;
}
h2 {
margin-bottom: 2em;
text-align: center;
}
div.user-photo {
width: 150px;
height: 150px;
margin: 1em auto;
position: auto;
background: #fff;
border-radius:100px;
}
div.details {
background-color: #6200ee;
font-size: 2.3em;
margin: 2.5em 0.2em 0.2em 0.2em;
color: #fff;
padding: 1.1em;
min-height: 6em;
}
img {
width: 150px;
height: 150px;
border-radius: 100px;
display: inline=block;
}
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>
<h2>kingsley Okpara</h2>
<div class="user-photo mdc-elevation--z3">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
</div>
<div class="details mdc-elevation--z3"></div>
<div class="messages"></div>
<footer>
<button id="btn-Address" class="mdc-icon-button material-icons" style="color:#ffffff;">Address</button>
<button id="btn-Phone" class="mdc-icon-button material-icons" style="color:#ffffff;">Phone</button>
<button id="btn-Birthday" class="mdc-icon-button material-icons" style="color:#ffffff;">Birthday</button>
</footer>
<script>
const style = window.getComputedStyle(backgroud-color, null);
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>