I need to complete this code HELP!

<!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>

What is your question?

i want to modify the displayUserPhotoAndName function to display a user’s name from ther API call in

What part are you stuck on? What isn’t working as you expect? What is it doing instead?

I modify the displayUserPhotoAndName … where it says //add code here

i can’t modify the displayUserPhotoAndName *

What have you tried?

   // add your code here
        data.textContent = data;
        if(!data.classList.contains('Chukwuemeka 0biano')) {
          data.classList.add('Chukwuemeka Obiano');
        }
        clearNotice();
      };

I am new, Please guide me…i think there’s something i am getting wrong

i would post my work maybe you’d help me

<!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
        data.textContent = data;
        if(!data.classList.contains('Chukwuemeka 0biano')) {
          data.classList.add('Chukwuemeka Obiano');
        }
        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 ...`);
      };
      
      const startApp = () => {
        // invoke the getAUserProfile here
          getAUserProfile();
      };

      startApp();
    </script>
  </body>
</html>

I suspect that classList is not what you want to be checking and modifying.

Also, just so you know, you have two different strings. One uses a zero in “0biano” and the other uses the letter ‘O’ in “Obiano”.

what do suggest then

What were you trying to accomplish with classList?

I was trying to create a heading for the user’s name

When you first retrieve data, it looks like below:

{
  "results": [
    {
      "gender": "female",
      "name": {
        "title": "mrs",
        "first": "nicole",
        "last": "taubert"
      },
      "location": {
        "street": "brunnenstraße 196",
        "city": "lüchow (wendland)",
        "state": "thüringen",
        "postcode": 10148,
        "coordinates": {
          "latitude": "-44.4186",
          "longitude": "70.2985"
        },
        "timezone": {
          "offset": "+4:30",
          "description": "Kabul"
        }
      },
      "email": "nicole.taubert@example.com",
      "login": {
        "uuid": "ce7a928f-0990-4f1a-bfd1-85f15c669717",
        "username": "bigleopard400",
        "password": "spunk",
        "salt": "LIa9gPU8",
        "md5": "d637e331d9f4eb77556536dec0cf34f0",
        "sha1": "b05848fc4b1ce69572adf2ea46bdca816c9a9cf5",
        "sha256": "45d562ae66f120c3076041b9f09a28bec343aceee399ac995a1a9ae984472b9c"
      },
      "dob": {
        "date": "1996-12-21T10:10:23Z",
        "age": 22
      },
      "registered": {
        "date": "2004-03-15T21:53:18Z",
        "age": 15
      },
      "phone": "0744-5404793",
      "cell": "0175-2187652",
      "id": {
        "name": "",
        "value": null
      },
      "picture": {
        "large": "https://randomuser.me/api/portraits/women/33.jpg",
        "medium": "https://randomuser.me/api/portraits/med/women/33.jpg",
        "thumbnail": "https://randomuser.me/api/portraits/thumb/women/33.jpg"
      },
      "nat": "DE"
    }
  ],
  "info": {
    "seed": "b6a26d967ab75bdf",
    "results": 1,
    "page": 1,
    "version": "1.2"
  }
}

data is not a DOM element, but for some reason you assign data again to another property (named textContent) in the data object retrieved from the API. classList would apply to a DOM element and not the data object you retrieved.

It is really not clear what you are trying to do here. For us to help you, you need to describe in detail what you are trying to do inside the displayUserPhotoAndName function.

this is absolutely what i want do… but i having difficulties with what code i could see the excute that

I just told you that what you have attempted to do does not really do anything and does not make sense. Can you explain what you wanting the displayUserPhotoAndName function to do?

I want to Modify the displayUserPhotoAndName function to display a user’s name from the API call in getAUserProfile() in a DIV with a CSS class of details . The parameters in *displayUserPhotoAndName must use destructuring, so I need to extract the name from the object

  // 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;
        
        clearNotice();