Entrar Ainda não tem acesso?
1
resposta

[Projeto] Exercicios

Referente ao curso JavaScript para Web: Crie páginas dinâmicas, no capítulo Eventos e lógicas e atividade Lista de exercícios

por KEVIN SILVA LOPES
| 22.2k xp | 36 posts
<!DOCTYPE html>
<html>
<head>
    <title>Teclado Virtual</title>
    <style>
        .tecla {
            padding: 20px;
            margin: 5px;
            border: 1px solid black;
        }
        .ativa {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <button class="tecla tecla_do">Dó</button>
    <button class="tecla tecla_re">Ré</button>
    <button class="tecla tecla_mi">Mi</button>

    <script src="script.js"></script>
</body>
</html>





const teclas = document.querySelectorAll('.tecla');

teclas.forEach(tecla => {
    tecla.addEventListener('click', () => {
        tecla.classList.add('ativa');
    });
});
1 resposta
por Renan Lima
| 3960.3k xp | 8426 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Kevin. Tudo bem?

Muito obrigado por compartilhar o seu código aqui com a gente. Parabéns pelo trabalho. Continue com essa dedicação.

Ótimo como você usou o querySelectorAll para selecionar todas as teclas e adicionar um evento de clique a cada uma. Isso torna o código mais escalável, permitindo adicionar mais teclas facilmente.

Uma melhoria interessante seria remover a classe ativa após um tempo, para que a tecla volte ao estado original. Veja este exemplo: 


teclas.forEach(tecla => {
    tecla.addEventListener('click', () => {
        tecla.classList.add('ativa');
        setTimeout(() => tecla.classList.remove('ativa'), 500);
    });
});

Isso faz com que a classe ativa seja removida após 500ms, criando um efeito visual de pressionar e soltar a tecla.

Conte com o apoio do Fórum. Abraços e bons estudos.