Simulado Programação

Ao acessar um protótipo do Figma, é possível ter a informação das cores de

cada elemento, como mostra a figura abaixo:

Pensando que existem vários momentos em que essa cor será utilizada, ordene

quatro blocos para criar uma variável global dentro do nosso código CSS

utilizando o valor hexadecimal da imagem acima. Ordene todos os blocos.

• }

• --verde:

• :root {

• #6FFF57;

Rafael está organizando sua página em HTML e até o momento ele tem o

seguinte código:
Analise o código de Rafael e, em seguida, ordene todos os blocos para trocar a

cor de fundo da página.

• background-color:

• --cor-fundo

• body {

• ); }

• var(

Podemos utilizar variáveis CSS para especificar uma cor-base através da

pseudoclasse :root{}. Fazendo isso, conseguimos usá-la em diferentes partes do

código de forma mais fácil.

A cor-base pode ser representada da seguinte forma:
Quando queremos aplicar a cor-base como cor de fundo para vários elementos

de uma página, como podemos fazer isso? Assinale a alternativa que executa

essa tarefa corretamente.

• a) background-color: var(--cor-base);

• b) background-color: var(cor-base);

• c) background-color: --cor-base;

• d) color: var(--cor-base);

Um grupo de alunos de tecnologia decide criar um site para divulgar os eventos

e as novidades do colégio. Eles querem que o site seja acessível de qualquer

dispositivo, portanto, a responsividade é uma prioridade para eles.

Qual das alternativas abaixo representa uma boa prática para implementar

responsividade com CSS no site da escola?

• a) Atribuir um tamanho fixo para todos os elementos da página.

• b) Usar somente código JavaScript para adaptar o layout da página.

• c) Usar o recurso @media para adaptar o layout de acordo com o tamanho da

  tela.

• d) Usar o recurso @import para importar diferentes arquivos CSS para cada

  tipo de dispositivo.

Answer explanation

O @media é uma regra do CSS que permite adaptar o design de um site de acordo

com as características do dispositivo, como a largura da tela. Dessa forma, a página pode se ajustar auto-

maticamente.

Guilherme desenvolveu o código e obteve o seguinte resultado:

Entretanto, ele deseja que sua página seja responsiva para dispositivos que

possuem tela maior que 768px. Nesse caso, seu desejo é que a estilização dos

botões mude para alinhamento na horizontal.

Ordene 5 blocos para adicionar a media query para esta estilização.

• .botoes {

• } }

• (min-width: 768px)

• @media screen and

• display: flex;

Answer explanation

Parabéns! Você alterou a estilização da sua página dependendo do tamanho da tela do usuário.

Analise o código abaixo:

Ordene três blocos para transformar o alinhamento das divs item de vertical

para horizontal.

• .container { display: flex; }

• .container { flex; }

• .class { display: flex; }

Answer explanation

O display:flex afeta diretamente os elementos filhos do seu elemento. Portanto,

quando utilizamos o seletor container vamos alterar a organização dos elementos filhos, que no caso são

os elementos com a classe item.

Analise o seguinte código:

De acordo com o código acima, qual é a resposta que deve aparecer no

console?

• a) 0,1,2,3,4,5

• b) 5,4,3,2,1,0

• c) -1,0,1,2,3,4

• d) -1,2,3,4

Answer explanation

Neste caso o i começa em -1 e vai até ser menor que 5, ou seja, 4.

Maria tem o seguinte código em HTML:
Ordene os blocos a seguir, de modo que Maria utilize apenas três blocos para

alterar o estilo do botão “Escuro” quando ele é clicado.

• |botao.onclick = function (){

• botao.

  classList.add(“fundo-preto”);}

• const botao = document.querySelector (“.botao”);

Answer explanation

O comando alterou as cores do fundo para preto e da fonte para branco do botão quando ele

é clicado devido às propriedades background e color do CSS e ao evento onclick atribuído ao botão no

JavaScript pela função.

Gabriel quer adicionar o seguinte efeito:

Ao clicar no botão “Escuro”, a tela da sua aplicação fica preta, ou, se clicar no

botão “Branco”, a tela ficará branca.

Para isso, ele possui o seguinte código que está incompleto:
Adicione os comandos necessários para finalizar seu projeto e obter o efeito

desejado utilizando três blocos:

• fundo.classList.add(“fundo-branco”);

• botao[i].onclick = function(){

• const fundo = document.querySelector (“fundo-branco”);

Answer explanation

Quando definimos a constante fundo, estamos atribuindo a ela as

propriedades do DOM (Document Object Model), fazendo com que selecione as

classes “fundo-branco” e efetue as modificações aos elementos referentes a es-

tas. Neste caso, adicionamos a função de onclick no botão para que, quando cli-

cado, sejam adicionadas as propriedades do CSS da classe quando a condição for

de atribuição (add).