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

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

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