Learn Modern JavaScript Methods by Building Football Team Cards - Step 33

JavaScript
1

Tell us what’s happening:

Step 33

Next to the Nickname: text, add an embedded expression that will show the player’s nickname if they have one.

Use a ternary operator to check if nickname is not null. If the player has a nickname, display nickname otherwise display “N/A”.

// running tests
You should use a ternary operator to check if nickname is truthy.
If your ternary is truthy, it should display the player’s nickname.
If your ternary is falsy, it should display the string N/A.
// tests completed

Your code so far

playerCards.innerHTML += arr.map(
    ({ name, position, number, isCaptain, nickname }) => {
      `
        <div class="player-card">
          <h2>${name} ${isCaptain ? "(Captain)" : ""}</h2>
          <p>Position: ${position}</p>
          <p>Number: ${number}</p>
          <p>Nickname: (${nickname} !== "null" ? "${nickname}" : "N/A")</p>
        </div>
      `;
    }
  );

I’m not sure where the error is coming from. Previous posts say I should strict compare in my ternary. I’ve reversed the order of truthy and falsey using === and removed the quotes in different places. Same error every time. The way I’ve written it is:

If the expression {nickname} does not strictly equal “null”, then it is truthy and should return the expression{nickname}. If it is falsey, then it should return “N/A”.

Am I reading the directions correctly?

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:122.0) Gecko/20100101 Firefox/122.0

Challenge Information:

Learn Modern JavaScript Methods by Building Football Team Cards - Step 33

2

Hi! I’m not sure why you have parentheses in the nickname line. It should look a lot like your ternary in the h2 line.

3

Hey Daniel! Yeah, I tried removing the parentheses, still getting the same error in the console.

4

I do not think you need the brackets. You also do not need to specify this condition !== "null" the optional chaining ? catered for that, Also, you need to use this syntax ${} once to interpolate your strings.

5

Null isn’t text. It’s special like true and false.

1 Like
6

Here’s all the things I have tried:

<p>Nickname: ${nickname} !== null ? ${nickname} : "N/A"</p>

<p>Nickname: ${nickname} ? ${nickname} : "N/A"</p>

<p>Nickname: (${nickname} ? "${nickname}" : "N/A")</p>

<p>Nickname: (${nickname} !== "null"  ? "${nickname}" : "N/A")</p>

This is frustrating. Maybe something is wrong with my computer?

7

You’re very close! Look at your h2 line for isCaptain.

Using ${} isn’t just for variables. It’s most commonly used with single variables, but its purpose is to tell the JavaScript compiler “Hey! I’m going to put some more JavaScript commands into the middle of this text!”

Just like the backtick (template literal) says, I’m going to do some text stuff here, the ${} says, I’m going to do some programming commands here.

1 Like
8 
<p>Nickname: ${nickname ? "${nickname}" : "N/A"}</p>

Like this?

9

Once you open your JavaScript command bracket with ${ you don’t need to use it again until you close it and start another one.

` text text text ${do all my JavaScript, including calling variables} text text text ${more JavaScript stuff} text text text`
1 Like
10 
<p>Nickname: ${nickname ? "${nickname}" : "N/A"}</p>

This doesn’t work. The console says:

// running tests
If your ternary is truthy, it should display the player’s nickname.
If your ternary is falsy, it should display the string N/A.
// tests completed

11

Your problem is here

You don’t need the quotes again and pay close attention to this comment here

The key here is to reference the variable not add anything extra around it.

Once you fix the syntax, then it will pass

1 Like
12

Oh, thank you! I know I’m getting the concepts, I still am having trouble remembering when to use which syntax.

13

yeah, it is complete normal for it take a while for syntax to stick more.
The more you practice, then the more the syntax will stick :+1:

14

Just realized you play oboe, had a friend from high school who plays, she said the reeds for that are hella expensive!

1 Like
15

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.