Entrar Ainda não tem acesso?
2
respostas

Cor

Referente ao curso JavaScript: manipulando elementos no DOM, no capítulo Manipulando elementos da página e atividade Separando funções e métodos

por Camilla Ribeiro
| 65.7k xp | 26 posts

Só quero uma esclarecimento de como que troca a cor da pagina, aonde esta ela nesse caso, só trocando uma palavra.

const html = document.querySelector('html')
const focoBt = document.querySelector('.app__card-button--foco')
const curtoBt = document.querySelector('.app__card-button--curto')
const longoBt = document.querySelector('.app__card-button--longo')
const banner = document.querySelector('.app__image')

focoBt.addEventListener('click', () => {
    alterarContexto('foco')
})

curtoBt.addEventListener('click', () => {
    alterarContexto('descanso-curto')
})

longoBt.addEventListener('click', () => {
    alterarContexto('descanso-longo')
})

function alterarContexto(contexto) {
    html.setAttribute('data-contexto', contexto)
    banner.setAttribute('src', `/imagens/${contexto}.png`)
}
2 respostas
por RODRIGO SILVA HARDER
| 2300.6k xp | 4888 posts
Alura Scuba Team Monitor de Fórum Ops

Oi, Camilla, tudo bem?

A função alterarContexto() apresenta como parâmetro o contexto que pode ser "descanso-curto", "descanso-longo" ou "foco". Nessa função temos duas linhas de código, uma responsável por alterar a cor de fundo e outra por alterar a imagem:

function alterarContexto(contexto) {
    html.setAttribute('data-contexto', contexto); //código responsável pela troca da cor de fundo
    banner.setAttribute('src', `/imagens/${contexto}.png`); // código responsável pela troca da imagem
}

A linha de código responsável por alterar a cor de fundo possui uma função setAttribute usada para definir ou modificar atributos em elementos HTML. Ela aceita dois argumentos: o nome do atributo que você deseja definir/modificar (neste caso, 'data-contexto') e o valor que você deseja atribuir a esse atributo (representado pela variável contexto).

Já a linha de código responsável por alterar a imagem também possui a função setAttribute que altera o elemento src pelo caminho de imagem do contexto informado.

Por exemplo, ao utilizar a função passando como parâmetro o contexto "descanso-curto", a função alteraria as informações de contexto para as informações relacionadas ao "descanso-curto", de modo que o código dentro da função alterarCodigo() seria lido da seguinte maneira:

function alterarContexto(descanso-curto) {
    html.setAttribute('data-contexto', descanso-curto);
    banner.setAttribute('src', `/imagens/descanso-curto.png`);
}

Espero ter ajudado. Caso tenha dúvidas, não hesite em postar no fórum!

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Caio Tatsuya Ikena
| 177.1k xp | 30 posts

Olá, Camilla!

Além de toda a explicação que o Rodrigo passou, cada cor de fundo está definido no CSS:

[data-contexto="foco"] {
    --main-bg-color: linear-gradient(180deg, #8B1FF8 0%, #041832 48.44%, #01080E 100%);
}

[data-contexto="descanso-curto"] {
    --main-bg-color: linear-gradient(180deg, #0F725C 0%, #041832 48.44%, #01080E 100%);
}

[data-contexto="descanso-longo"] {
    --main-bg-color: linear-gradient(180deg, #1875E9 0%, #041832 48.44%, #01080E 100%);
}

E através do JavaScript, estamos trocando o valor do data-contexto de acordo com o clique de cada botão.