freeCodeCamp Challenge Guide: Change Styles Based on Data

Guide
1

Change Styles Based on Data

Problem Explanation

Remind yourself once again what is the callback function with this

There is two ways you can complete this part, either with if-else logic or ternary operator.

if-else logic

An example from w3school


const money = 50;

if (money < 50) {

  return "I\'m rich";

}

else {

  return "I`'m poor";

}

Hints

Hint 1

What you need to remember is the bracket that the if-else logic associate with, (argument) and {statement}

Hint 2

Ternary operator

A more detailed explanation here. Ternary operator is a lot more concise and quicker to remember for a simple true or false statement. Read this


condition ? value if true : value if false

Solutions

Solution 1 (Click to Show/Hide)

For someone who still not sure here is a solution by using If-else statement

      .style("color", (d) => {
        if (d < 20){
          return 'red'
        }
        else {
          return 'green'
        }
      })
16 Likes