freeCodeCamp Challenge Guide: Change Styles Based on Data

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";



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 


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'