Better solution for "Update the height of an element dynamically" from D3 challenges

Contributors
#1

The forum post containing the solutions to this challenge is not replyable or editable: freeCodeCamp Challenge Guide: Update the Height of an Element Dynamically

So I am making a new topic. The solution as presented in forum post uses template strings:

.style('height', d => ${d}px)

But the challenge instructions do not mention the use of template strings, nor do any of the previous challenges. It works, but feels disconnected to the challenge. How would the user know to use a template string / string literal here?

Here is my solution that completes the challenge, and is more consistent with the instructions in this challenge and previous ones:

.style("height", (d) => d + "px");

3 Likes
#2

Here is the entire code for my solution:

<style>
  .bar {
    width: 25px;
    height: 100px;
    display: inline-block;
    background-color: blue;
  }
</style>
<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    d3.select("body").selectAll("div")
      .data(dataset)
      .enter()
      .append("div")
      .attr("class", "bar")
      // Add your code below this line

      .style("height", (d) => d + "px");

      // Add your code above this line
  </script>
</body>
#3

The instructions do not say you have to use a template literal, because you do not have to in order to solve the problem. That being said, users would have already learned about template literals in a preceding JavaScript section of the curriculum, so the solution seen in the guide should not confuse them.

#4

If a user skips to the subsequent challenge it has a callback function written in the sample code. That tells me a callback function is what the author of the challenge intended.

I propose we add a second solution that includes a callback function.

1 Like
#5

The current solution does use a callback function (see below):

d => `${d}px`

That is a callback function, just like yours uses a callback function. The only difference is the template literal (current) vs. string concatenation (yours).

#6

Okay, it sounds like you are satisfied with the 1 solution, so I won’t spend any more of your time on this. Have a good one :+1:

#7

I agree with amartincastro. The solution does not follow what was taught in the previous lessons. There should be a second solution to keep a sanity check for people that do not know what is template literal is.

#8

Welcome, qodetinker.

This lesson covers template literals: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals

It comes before the lesson in question. So, we would expect campers to know what a template literal is.

If a camper skipped that lesson, then I would still leave the guide post as is, because they are encouraged to research what syntax is being used.

#9

mine worked with just:
.style("height", (d) => d)

the next lesson says:
.style("height", (d) => (d + "px"))

#10