# Complete the Picture explainer

#1

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: There is hidden code that runs before the puzzle’s code that sets the SVG Shape’s attributes.

#2

Typo for noon: “…should one line…”

–Scott.

#3

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

#4

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!

#5

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?

#6

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

#7

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

BR,
Oleg.