Please help with this Javascript code

JavaScript
1

My code is pasted below…
I am trying to do this using the es6 syntax only…

In the getAUserProfile function :

  • Use the in-built browser fetch function to make an API call to the URL decalred as the api variable.
  • Handle the response from the API, call displayUserPhotoAndName with the response data after converting it to JSON

Step 2

Locate the displayUserPhotoAndName function and do the follwing within it:

  • After the first if(!data) return; statement that terminates the function if the expected data parameter is not provided, create a statement that de-structures the data parameter and obtains the results property from it;
  • Create a second statement in the next line that de-structures the results variable you just created, and obtain the first item from it (it is an Array!#). Your de-structured array item should be declared as profile . This represents the profile data for the user gotten from the API call that you want to display in your app.

Step 3

Still within the displayUserPhotoAndName function :

  • Set the HEADING element in your app to display the title, last name, and first name (in that order, separated by a single space) of the user profile returned by the API.
  • Set the IMG in your app to display the large photo of the user profile returned by the API.

Step 4

At the end of the displayUserPhotoAndName function, call the displayExtraUserInfo function and pass the profile variable you earlier de-structured from results .

<!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;      
        padding:0px;
        margin:0px;
        overflow:hidden
      }
      
      div.user-photo {
        width: 150px;
        height: 150px;
        margin: 1em auto;
        background: #fff;
        position: relative;
        overflow: hidden;
        display: flex;
    	border-radius: 50%;
      }
      
      h2 { 
        font-size: 1.5em; 
        margin: 3.5em 0; 
      }
      
      div.details {
        font-size: 2.3em;
        min-height: 6em;
        background: #6200ee;
        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;
        color: #fff;
      }
      
    </style>
  </head>
  <body>
    </br>
    <H2 align="center">Folalu Timothy Tomiwa</H2>
    </br> </br>
     <div class="user-photo mdc-elevation--z3">
       <img src = "https://via.placeholder.com/150"/>
    </div>
    
    <div class = "details mdc-elevation--z3">
    </div>
    
    <div class = "messages">
    </div>
    
    <footer>
      <div class="mdc-icon-button">
        <div class="material-icons">
          <button id="btn-address" class="mdc-icon-button material-icons">receipts</button>
          <button id="btn-phone" class="mdc-icon-button material-icons">polymer</button>
          <button id="btn-birthdate" class="mdc-icon-button material-icons">redeem</button>
        </div>
      </div>
    </footer>
    
    <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;
        
        let {results} = data;
        //destructure array 
        let [profile] = results;
        // add your code here

        // This Assign Name
        document.querySelector('h2').textContent = profile.name.title + ' 					'+profile.name.last+' '+profile.name.first;
       
        //Helps Display Large Image
        document.querySelector('img').src = profile.picture.large;
        clearNotice();
      };
            
      const getAUserProfile = () => {
        const api = 'https://randomuser.me/api/';
    	fetch(api)
  			.then((resp) => resp.json()) // Transform the data into json
         	.then(data => {
           // Work with JSON data here
          	
         	 return displayUserPhotoAndName(results);
   
  		}) 

        // make API call here
        const displayBirthdate = ({dob = 'dob'}) => {
          
        }
        
        const displayPhone = ({phone = 'phone', cell = 'cell'}) => {
          
        }
        
        const displayAddress = ({location = 'location'}) => {
          
        }
        
       const displayExtraUserInfo = (userInfo) => {
        document.getElementById('btn-birthdate').addEventListener('click',()=>{
          displayBirthdate(userInfo)
        } );
         
           document.getElementById('btn-phone').addEventListener('click',()=>{
          displayPhone(userInfo)
        } );
         
          document.getElementById('btn-address').addEventListener('click',()=>{
          displayAddress(userInfo)
        } );
       }
        
      
 
        
        notify(`requesting profile data ...`);
      };
      
      const startApp = () => {
        // invoke the getAUserProfile here
       getAUserProfile();
      };

      startApp();
    </script>
    

    
  </body>
</html>
3

(ERROR message!!! of the above code) You are not properly displaying the name of the user returned by the api. Review instructions (first part of step 3 above)… please help