Please help with this Javascript code

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>

@flash94 You are the 10th person I have seen post code similar to this in the last 2 days. What is this for exactly?

Also, tell us specifically where you are having problems. Are you getting error messages? If so, what are they? What part of the requirements are you not understanding. You have to tell us what you don’t understand. Otherwise, we are just guessing at what you need help with.

2 Likes

(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