I was given this assignment twodays ago without an instruction on what to do please i need help with this i am new to this

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.