A intenção dessa tarefa é ajudar o aluno a se acostumar com códigos que utilizam objetos, um conceito um tanto quanto estranho à primeira vista. Assim, aqui focamos na leitura e no entendimento do código. A solução deve ficar bem simples, precisando apenas de uma ou outra linha digitada.
A página acessível pelo index.html representa a linha de produção de uma fábrica de enlatados. Inicialmente, a fábrica dispõe de algumas latas vazias na linha, que aparecem na tela como quadrados azuis com uma identificação genérica (img 1).
Img 1 - Início
Ao pressinar o botão "Atualizar", novas latas - agora não vazias - são produzidas e, em seguida, colocadas na tela do usuário (img 2).
Img 2 - Após apertar no botão "Atualizar"
As latas produzidas podem possuir diversos conteúdos, chamados de opções. As opções são escolhidas aleatoriamente para as latas da linha de produção e podem ser, por padrão: milho, feijao, ervilha, sardinhas ou pessego. Para impulsionar as vendas, cada opção dispõe de uma lata própria. Por exemplo, as latas de milho possuem uma imagem de milho em sua embalagem junto do texto "milho".
Infelizmente, a fábrica parou de funcionar pois alguém retirou uma parte essencial da
função "coloca_latas_na_tela()" :///. Agora, quando se pressiona o botão "atualizar", nada acontece, deixando a tela somente com latas vazias,
como na img 1.
Assim, a primeira parte da tarefa é arrumar esse problema e fazer com que a fábrica volte a funcionar
que nem na img 2.
Com a fábrica consertada, os administradores acharam interessante criar mais duas opções
para produção. Eles não têm preferência alguma para as opções e apenas desejam que elas sejam
produzidas da mesma maneira que as antigas.
Dessa forma, a segunda parte da tarefa é criar outras duas opções de enlatados. Você deve
ter que modificar tanto o objeto "fabrica" do "script.js" quanto criar algumas classes
no arquivo de estilos "style.css"