# Complete the Picture explainer

The aim of this puzzle: Change the way the sky looks depending on the time of day.
Walkthrough of the solution: The function called `changePicture` has three if statements inside of it which check what time of day it is: morning, noon, or night. Let’s start with what should happen in the morning. You need to change the color of the `sky` to `steelblue`. That means, inside of the curly brackets for the if statement that checks if `time === 'morning'`, you should put: `sky.attr('fill', 'steelblue);` Now, when the `timeOfDay` is `'morning'` your picture will look good! For nighttime, three things need to change: the sky, the moon, and the grass. The `sky` fill color should be `navy`. To make the sun into a moon, you change the fill color of `skyLight` to `'white'`. Finally, the grass color should darken in color to `darkgreen`.
Sample code solution:
(Tap below to reveal)

``````function changePicture(time) {
if (time === 'morning') {
sky.attr('fill', 'steelblue');
}
if (time === 'noon') {
sky.attr('fill', 'deepskyblue');
skyLight.attr('cx', 150);
}
if (time === 'night') {
sky.attr('fill', 'navy');
skyLight.attr('fill', 'white');
ground.attr('fill', 'darkgreen');
}
}

var timeOfDay = pickRandom([
'morning',
'noon',
'night'
]);
changePicture(timeOfDay);
print(timeOfDay);
``````

JavaScript Concepts: Code Block (function), Calling Functions, Conditionals, Data Structures, Identifiers
Grasshopper Concepts: pickRandom(), print()
D3 Concepts: .attr(‘fill’,), .attr(‘cx’,)
Additional Code (hidden code that runs before the puzzle’s code):

``````var sky = svg.append('rect').attr('width', 500).attr('height', 150);
var skyLight = svg.append('circle').attr('r', 30).attr('fill', 'yellow').attr('cx', 10).attr('cy', 10);

let cloud = 'M441.953,142.352c-4.447-68.872-61.709-123.36-131.705-123.36c-59.481,0-109.766,39.346-126.264,93.429  c-9.244-3.5-19.259-5.431-29.729-5.431c-42.84,0-78.164,32.08-83.322,73.523c-0.309-0.004-0.614-0.023-0.924-0.023  c-36.863,0-66.747,29.883-66.747,66.747s29.883,66.746,66.747,66.746c4.386,0,8.669-0.436,12.819-1.243  c20.151,27.069,52.394,44.604,88.734,44.604c31.229,0,59.429-12.952,79.533-33.772c15.071,15.091,35.901,24.428,58.913,24.428  c31.43,0,58.783-17.42,72.955-43.127c11.676,5.824,24.844,9.106,38.777,9.106c48.047,0,86.998-38.949,86.998-86.996  C508.738,185.895,480.252,151.465,441.953,142.352z';

var cloud1 = svg.append('path').attr('d', cloud);
cloud1.attr('fill', 'lightgrey').attr('transform','scale(0.2) translate(200 80)');

var cloud2 = svg.append('path').attr('d', cloud);
cloud2.attr('fill', 'lightgrey').attr('transform','scale(0.1) translate(120 80)');

var cloud3 = svg.append('path').attr('d', cloud);
cloud3.attr('fill', 'lightgrey').attr('transform','scale(0.15) translate(1000 80)');

var cloud4 = svg.append('path').attr('d', cloud);
cloud4.attr('fill', 'lightgrey').attr('transform','scale(0.1) translate(2300 420)');

var ground = svg.append('rect').attr('width', 500).attr('height', 150).attr('y', 150).attr('fill', 'green');
``````
1 Like

Typo for noon: “…should one line…”

–Scott.

Thanks for flagging! This is fixed and will be reflected the next time we push out content changes.

Ah, I found my problem and fixed it! On to the Quiz! :).
(.attrib (‘fill’, ‘white’) is in the wrong place!)
`

Hi. I’ve tried to include a screenshot that illustrates my issue. The puzzle keeps telling me to include a line of code that’s already present. (Skylight.attrib (‘cx’,150)). Admittedly, I’m doing this w/out my glasses but I think I’ve hit a glitch. Enjoying the App very much, despite it, and learning a lot! Ty!

Hi! I completed the task, but I still have one issue: my result differs with example. The sun in the morning and in the noon is always white. I tried to add attribute fill yellow to if statement of noon, then an error appears. How can I make the sun yellow as in example?

There is quite a bit of additional hidden code for this puzzle. Part of that code is:

`var skyLight = svg.append('circle').attr('r', 30).attr('fill', 'yellow').attr('cx', 10).attr('cy', 10);`

which will make the sun yellow if you don’t have code that changes it. I believe you have `skyLight.attr('fill','white')` inside of your function but outside of all of your If Statements – maybe at the very bottom before `};`

There should be a check for that. Thanks for letting us know!

–Frankie

You are right! Thanks for explanations! Now it works as it should be.

BR,
Oleg.

1 Like

Please I updated all code as instructed but it’s not passing me through another lesson.

Hey there, you’re very close! In your last if statement (the one checking if `time` is `'night'`), change the line:

``````ground.attr('darkgreen')
``````

to

``````ground.attr('fill', 'darkgreen')
``````

Hope this helps!
Ben

I did it the exact same way and it sent me to the support forum

Instead of ‘steelblue’ I put ‘streetblue’ lol

What makes the skyLight move to the upper left corner during the day and night? Shouldn’t we set the “cx” for them as well?