I really need help fixing this code

var displayAddress = ({location = 'location'}) => {
  document.querySelectorAll('.details').textContent = ('location.(street,city,state)');
};

var displayBirthdate = ({dob = 'dob'}) => {
  document.querySelectorAll('.details').textContent = ('dob.(age)');
};

var displayPhone = ({phone = 'phone', cell='cell'}) => {
  document.querySelectorAll('.details').textContent = phone.cell;
};

This is the condition

  • Modify the displayBirthdate function to display the user’s age in the DIV with a CSS class of details . Use the xyz years old format, assuming xyz is the age.
  • Modify the displayAddress function to display the street , city , and state of the location property of the user. Display it in the DIV with a CSS class of details . Use the street, city, state format
  • Modify the displayPhone function to display the phone , and cell properties of the user. Display the information in the DIV with a CSS class of details . Use the phone / cell format

Same question asked by the same user in the Help forum.

Are you taking a test for a job?

Where is your code?

this is iit
var displayAddress = ({location = ‘location’}) => { document.querySelectorAll(’.details’).textContent = (‘location.(street,city,state)’); }; var displayBirthdate = ({dob = ‘dob’}) => { document.querySelectorAll(’.details’).textContent = (‘dob.(age)’); }; var displayPhone = ({phone = ‘phone’, cell=‘cell’}) => { document.querySelectorAll(’.details’).textContent = phone.cell; };

I cleaned your code up. You don’t need to write everything on a single line, doing so just makes it impossible to read.

Several issues

This:

({dob = 'dob'})

This is not how you write arguments for functions. You write them like:

function (a, b) {
  // Dostuff
}

Not

function ({a, b}) {
  // Dostuff
}

Then querySelectorAll('.details') returns a list of all the html elements that have the class details. You can’t set the text content of a list: it’s a list of things, not a single thing. querySelectorAll is probably the wrong function, going by the description, as the name suggests, it gets all the matching elements, but you only need one.

You need to find .details, then find ‘location’ in details (and then the other two) and set the text content of those.

Then, textContent is a string you set. So if you set the text content as “location.(street,city,state)” that’s literally what your setting, that string.

Finally, what is this from because this is about the 20th near identical question I’ve seen recently.

<!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;
        margin: 0px;
        overflow: hidden;
      }
      
      *{
        margin: 0;
        padding: 0;
      }
      
      header h2{
        text-align: center;
        margin-bottom: 2.79em;
        text-transform: Capitalize;
      }
      
      img{
        max-width: 100%;
        max-height: 100%;
        display: block;
        margin: auto;
      }
      
      div.user-photo {
        width: 150px;
        height: 150px;
        margin: 1em auto;
        background: #fff;
        overflow: hidden;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
      }
      
      div.details {
        font-size: 2.3em;
        margin: 2.5em 0.2em 0.2em 0.2em;
        color: #fff;
        padding: 1.1em;
        display: flex;
        min-height: 6em;
        background: #6200ee;
      }
      
      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;
        background-color: #573594;
      }
      
       
    </style>
    
  </head>
  <body>
    <header>
    <h2>Salihu Abdulwahab</h2>
    </header>
    <div class="user-photo mdc-elevation--z3" >
      <img src="https://via.placeholder.com/150" alt =""/>
    </div>
    <div class ="details mdc-elevation--z3"></div>
    <div class ="messages"></div>
    <footer>
      <button id = "btn-address" required="required"
        class="mdc-icon-button small material-icons" style="color: white;"><i> home</i>   </button>
      <button id = "btn-phone" required=""
        class="mdc-icon-button small material-icons" style="color: white;"><i>phone</i>   </button>
      <button id = "btn-birthdate" required=""
         class="mdc-icon-button small material-icons" style="color: white;"><i>date_range</i></button>
    </footer>
    
    <script>
      
      var displayAddress = ({location = 'location'}) => {document.querySelectorAll('.details').textContent = ('location.(street,city,state)')};

      var displayBirthdate = ({dob = 'dob'}) => {document.querySelectorAll('.details').textContent = ('dob.(age)')};
      var displayPhone = ({phone = 'phone', cell='cell'}) => {document.querySelectorAll('.details').textContent = phone.cell};
      
      
    const displayExtraUserInfo = (params) => {
            document.getElementById("btn-birthdate").addEventListener("click", ()=> {
                displayBirthdate(params)
            })

           document.getElementById("btn-phone").addEventListener("click", () => {
                displayPhone(params)
            })
            document.getElementById("btn-address").addEventListener("click", () => {
                displayAddress(params)
            })

        }
      
      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
        
        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;
        
        displayExtraUserInfo(profile);        
        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>

this is the whole test code

That is not an answer to the question we were asking

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

As I mentioned in the other thread, it appears to be an interview question at andela.com. My guess is they recently posted a job opening, and this is from their interview form. I’m looking for a polite boilerplate response to brush these questions off, though I’m starting to be less inclined to be polite about it …

2 Likes

Feels like an up/down vote system can be a great addition to the forum in response to a situation like this.

so what do i do now, time is almost out

If you are not able to come to a solution with the hints given to you, study more and try next time

The freecodecamp forum is mainly for has for help with fcc curriculum but Help is given to everyone, just not expect that someone will give you the answer

You can ask what topics you would need to cover to be able to solve it so you know where to start to study for next time

1 Like

I don’t mean to be harsh here, but you’re trying to pass a timed test without having a basic grasp of the concepts you need to pass the test (and do the job the test is for). I’m not willing to just give you the answer for this: it isn’t a difficult task, and you need to understand the language a bit better before you try again.

1 Like