O que seria o contexto no código abaixo??? Uma variável?? apelido?? a explicação do instrutor não deixa claro oque é!
function alterarContexto() {
html.setAttribute('data-contexto',contexto)
banner.setAttribute('src',`/imagens/${contexto}.png`);
}
Fala, Sandro! Tudo bom com você?
Então, esse data-contexto é nada verdade uma ferramenta do HTML chamada 'data-attribute'. No caso, você pode dar o nome que quiser, contando que tenha 'data-' antes, e nesse caso, o nome dado foi o data-contexto. Ele é uma atributo que você consegue personalizar pra armazenar algumas informações adicionais.
Nesse caso do projeto, ele está sendo usado para fazer as alterações na página. No CSS, por exemplo, temos o seguinte código:
[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%);
}
Quanto o data-contexto é alterado, o estilo também irá mudar, assim como as demais configurações que são feitas no JS.
Espero ter ajudado, meu amigo, e caso minha resposta foi útil, agradeceria muito se marcasse como dúvida relacionada! Um grande abraço e bons estudos!