Complete The Picture pt-br Explainer

Explicação de Complete a imagem

Objetivo deste desafio: Mudar a aparência do céu, dependendo da hora do dia.

Passo a passo da solução: A função chamada changePicture tem três if statements dentro dela que verificam o período do dia: manhã, meio-dia ou noite. Vamos começar com o que deve acontecer pela manhã. É preciso mudar a cor do sky para steelblue. Isso significa que, dentro das chaves da if statement que verifica se time === 'morning', você deve colocar: sky.attr('fill', 'steelblue); Agora, quando o timeOfDay for 'morning' sua imagem ficará boa! Durante a noite, três coisas precisam mudar: o céu, a lua e a grama. A cor de preenchimento do sky deve ser navy. Para transformar o sol em lua, mude a cor de preenchimento de skyLight para 'white'. Por último, a cor da grama deve escurecer para darkgreen.

Solução do código de exemplo:
(Toque abaixo para revelar)

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);

Conceitos de JavaScript: Bloco de Código (função), Funções de Chamada, Condicionais, Estruturas de Dados, Identificadores

Conceitos do Grasshopper: pickRandom(), print()

Conceitos de D3: .attr(‘fill’,), .attr(‘cx’,)

Código Adicional (código oculto executado antes do código do desafio):

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');