Entrar Ainda não tem acesso?
1
resposta

Fiz de uma forma um pouco diferente da aula, poderia ser desta maneira a resolução, mantendo as boas práticas de programação ?

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 eder paulo minotti
| 28.9k xp | 2 posts
const html = document.querySelector("html");
const imagem = document.querySelector(".app__image");
const UlBotoes = document.querySelector(".app__card-list");

UlBotoes.querySelectorAll("button").forEach(botao => {
    botao.addEventListener("click", (evento)=> {
        let nomeBotao = evento.target.textContent;
        if (nomeBotao == "Foco") {
            trocarLayout("foco", "/imagens/foco.png")
        }

        if (nomeBotao == "Descanso curto") {
            trocarLayout("descanso-curto", "/imagens/descanso-curto.png")
        }

        if (nomeBotao =="Descanso longo") {
            trocarLayout("descanso-longo", "/imagens/descanso-longo.png")
        }
    })
})

function trocarLayout (nome,caminhoImagem) {
    html.setAttribute("data-contexto", nome)
    imagem.src = caminhoImagem;
}
1 resposta
por Rafaela Petelin Silvério
| 1079.9k xp | 2440 posts
Alura Scuba Team

Oi, Eder! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Seu código ficou bem estruturado e legível, e a forma como você organizou a função trocarLayout está clara e direta. A separação da lógica em uma função externa ajuda bastante na reutilização e manutenção do código.

Uma dica interessante para o futuro é usar um objeto para mapear os valores de texto e os caminhos das imagens, facilitando a escalabilidade. Veja este exemplo:



const opcoes = {
    "Foco": "foco",
    "Descanso curto": "descanso-curto",
    "Descanso longo": "descanso-longo"
};

botao.addEventListener("click", (evento) => {
    const nome = opcoes[evento.target.textContent];
    if (nome) trocarLayout(nome, `/imagens/${nome}.png`);
});

Esse código usa um objeto para associar os nomes dos botões aos caminhos das imagens, o que reduz a repetição de if.

Alura

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