# drawSquare explainer

The aim of this puzzle: Make the `drawSquare` function color the box.
Walkthrough of the solution: The `drawCircle` function works just the way the `drawSquare` function should except it draws a circle instead of a rectangle. If you add a line to run the `drawSquare` function, for example `drawSquare('red');` you’ll see a black box. Take a look inside the `drawSquare` function definition – the code inside the curly brackets. Notice the rectangle has all the attributes it needs except the `'fill'`. That means it will use the default color which is black. So you need to add an `.attr()`, but what color do you need to set it to? It should be whichever color is written in the parentheses when you run the function. `drawSquare('red')` should mean `.attr('red)`, and `drawSquare('orange')` should mean `.attr('orange')`. If you look at the `drawSquare` function declaration you’ll see a parameter called `color`. That `color` is a variable that will be assigned a value, such as `'red'` or `'white'`, when you run the function. Wherever that variable is written inside of the curly brackets, it will have the value it was assigned by the function call.
Sample code solution:
(Tap below to reveal)

``````function drawCircle(color) {
circle.attr('r', 15)
.attr('cx', 15)
.attr('cy', 15)
.attr('fill', color);
}
function drawSquare(color) {
square.attr('width', 30)
.attr('height', 30)
.attr('x', 30)
.attr('y', 0)
.attr('fill', color);
}
drawCircle('blue');
drawSquare('green');
``````

JavaScript Concepts: Code Block (function), Member Expression, Identifiers
D3 Concepts: .attr(‘r’,), .attr(‘cx’,), .attr(‘cy’,), .attr(‘fill’,), .attr(‘width’,), .attr(‘height’,), .attr(‘x’,), .attr(‘y’,)
Additional Code (hidden code that runs before the puzzle’s code):

``````var circle = svg.append('circle');
var square = svg.append('rect');
``````
4 Likes

I don’t understand the connection between the color string and the color parameter? How did it know that green is supposed to be green?

1 Like

The color of an SVG shape is set via the `'fill'` attribute. In this case, the `'fill'` attribute doesn’t have a color string directly used (like `('fill', 'red')`) but rather references a parameter (like a variable, but only used inside a function) like `('fill', color)`.

The value that `color` holds is passed through the function call. Since the function is defined like `function drawCirlce(color)`, when the function is called, whatever value is placed inside the parentheses is treated as the parameter `color`.

For example, in `drawCircle('blue')`, `'blue'` is treated as the parameter `color` when the function runs. This means wherever `color` is referenced inside the function, it is replaced with `'blue'`. So `('fill', color)` becomes `('fill', 'blue')`.

Hopefully this helps!
H 1 Like

How do you fix this problem?

Your function definitions each have an extra parameter: The `blue` after `color`, and the `green` after `color`. Those `blue` and `green` variables are not used inside of the function definition `{}`, so they should be removed.

Why does this happen?

The Function Definition describes what a function does. It usually has a name, inputs, and outputs.
The Function Call sends an order to run the function using specific input values.

When you run a function like `drawCircle('blue')`, your code thinks, “There should be a Function Definition for a function named `drawCircle`. It should also have 1 parameter that I can store my `'blue'` string inside of.” It will find the code `function drawCircle(color, blue)`, and see `function drawCircle` means this is a function definition for `drawCircle`. Then it looks inside the parentheses and sees this function requires 2 input values: 1 for the `color` parameter, and 1 for the `blue` parameter. But when you called your function, you only gave it 1 value, the string `'blue'`. It will start filling in the parameters left-to-right, so it takes the `'blue'` string and stores it in the `color` parameter, and then since the function call didn’t have a 2nd input, the `blue` parameter will stay empty (its value will be undefined). The block of the function definition never needed the 2nd parameter’s value – the `blue` variable/parameter is never used, just the `color` variable/parameter.

So, the code will output what you expected, but it’s best not to have extra parameters that the function doesn’t need. Sometimes there can be issues if the “extra parameter” has the same name as some other variable you need to use. For example, if you had `circle` as an extra parameter, then your code wouldn’t work. The `circle` would be undefined and then `circle.attr(...)` would cause an error because you can’t set attributes of an empty variable – they don’t have an `attr` property.

–Frankie

2 Likes

Can you pleas add a support to hebrow languag?

2 Likes

function

drawSquare

(

color

,

)

{

square

.

attr

(

‘width’

,

30

)

.

attr

(

‘height’

,

30

)

.

attr

(

‘x’

,

30

)

.

attr

(

‘y’

,

0

)

.

attr

(

‘fill’

,

color

)

;

}

;

drawCircle

(

‘blue’

)

;

drawSquare

(

‘green’ edit

)

;Preformatted text