Build a Snowman explainer


#1

The aim of this puzzle: Fix the sizes of the snowman’s circles.
Walkthrough of the solution: There are three main parts to the code: creating the location and sizes variables, the buildSnowman function, and the .on('click',...) call. We know that we have to change the sizes of some circles, so we need to look for .attr('r',...). You can find it inside of the buildSnowman function definition. Currently, it always sets the radius of every circle to 30, but we need the size to change. The radius values we should use are the ones from the sizes array. Since we’re using the sizes array to count through our for...of loop, we know that element is storing each value as it goes through the loop. That means, if you assign element to the radius attribute, you will be setting the circle to the correct size.
Sample code solution:
(Tap below to reveal)

var location = 30;
var sizes = [15, 20, 30];
function buildSnowman(){
  for (var element of sizes){
    svg.append('circle')
      .attr('r', element)
      .attr('cx', 60)
      .attr('cy', location)
      .attr('fill', 'white');
    location = location + element*2;
  }
}
button.on('click', buildSnowman);

JavaScript Concepts: Arithmetic Operators (+, *), Assignments, Binary Expression (+, *), Code Block (function, for loop)
D3 Concepts: .append(), .attr(‘r’,), .attr(‘cx’,), .attr(‘cy’,), .attr(‘fill’,), .on(‘click’,)
Additional Code: There is hidden code that runs before the puzzle’s code that sets the SVG Shapes attributes.


#2

Why the snowman repeating twice at build a snowman problem in Animation 2 course?
How can I display snowman only as starting head, body & bottom ?


#3

For some odd reason I can’t get the VAR sizes to align like I want. See below:


#4

Hi @Nolan_Code,

It appears that you’re using element as a string (‘element’) rather than as a variable (element) in the section that draws the circle to the screen and that is what is causing your program to become confused.

Hopefully this helps, but if you would like me to go more in-depth, feel free to reply! :smile:


#5

Nope you nailed it. Thanks for the help.


#6

Thanks… although the puzzle explained everything more than well, and it was clear what I was supposed to do I still couldn’t figure out how to do it. The only thing I was sure of was that the required intervention was simple. It just didn’t crossed my mind that all I supposed to do was set the value of the radius so that it points out to variable? Something like that… Or? And then I felt silly when I read the solution, but now I’m not that sure about that. Anyway, or something better, great app and thanks for this explanation.


#7

most boring child ever