Entrar Ainda não tem acesso?
1
resposta

[Sugestão] meu código: function alterarContexto(contexto, obj)

Referente ao curso JavaScript: manipulando elementos no DOM, no capítulo Aplicando áudio e estilos e atividade Adicionando e removendo classes

por Luis Carlos Jr
| 56.5k xp | 94 posts
const html = document.querySelector("html");
const bt_foco = document.querySelector(".app__card-button--foco");
const bt_descansoCurto = document.querySelector(".app__card-button--curto");
const bt_descansoLongo = document.querySelector(".app__card-button--longo");

const botoes = document.querySelectorAll(".app__card-button");

const imagem = document.querySelector(".app__image");
const titulo = document.querySelector(".app__title");

function alterarContexto(contexto, obj) {
  botoes.forEach((bt) => {
    bt.classList.remove("active");
  });
  obj.classList.add("active");
  html.setAttribute("data-contexto", contexto);
  imagem.setAttribute("src", `/imagens/${contexto}.png`);
  switch (contexto) {
    case "foco":
      titulo.innerHTML = `Otimize sua produtividade,<br />
      <strong class="app__title-strong">mergulhe no que importa.</strong>`;
      break;
    case "descanso-curto":
      titulo.innerHTML = `Que tal dar uma respirada?<br />
      <strong class="app__title-strong">Faça uma pausa curta!</strong>`;
      break;
    case "descanso-longo":
      titulo.innerHTML = `Hora de voltar à superfície.<br />
      <strong class="app__title-strong">Faça uma pausa longa.</strong>`;
      break;
  }
}

bt_foco.addEventListener("click", () => {
  alterarContexto("foco", bt_foco);
});

bt_descansoCurto.addEventListener("click", () => {
  alterarContexto("descanso-curto", bt_descansoCurto);
});

bt_descansoLongo.addEventListener("click", () => {
  alterarContexto("descanso-longo", bt_descansoLongo);
});
1 resposta
por Daniel Nogueira
| 2742.6k xp | 5882 posts
Alura Scuba Team Analista de Suporte Educacional

Olá, Luis! Como vai?

Parabéns pela resolução da atividade!

Observei que você explorou o uso de JavaScript para manipular o DOM e alterar o contexto da aplicação, utilizou muito bem o addEventListener para capturar eventos de clique e ainda compreendeu a importância do setAttribute para atualizar dinamicamente elementos como imagem e título.

Uma dica interessante para o futuro é utilizar textContent em vez de innerHTML quando não houver necessidade de inserir tags HTML, pois isso aumenta a segurança e evita problemas de injeção. Assim: 

titulo.textContent = "Otimize sua produtividade, mergulhe no que importa.";

Isso faz com que o texto seja atualizado de forma simples e segura.

Sugestão de conteúdo para você mergulhar ainda mais no tema:

Alguns materiais podem estar em inglês, mas é possível compreendê-los usando o recurso de tradução de páginas do próprio navegador.

Fico à disposição! E se precisar, conte sempre com o apoio do fórum.

Abraço e bons estudos!

AluraConte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA