Boa noite, segue minha resolução para o desafio:
const tecladoFone = document.querySelectorAll(".tecla");
for (let i=0;i<tecladoFone.length-1;i+=1){
tecladoFone[i].addEventListener("click", function(e){
e.target.classList.toggle("ativa");
});
}
Olá Ewerton, tudo bem?
Gostei bastante da sua solução para o desafio proposto! É uma ótima maneira de adicionar a classe "ativa" ao clicar em cada tecla do teclado do telefone.
A única sugestão que eu teria é que você poderia adicionar um evento de "keydown" para que a classe "ativa" também seja adicionada quando a tecla correspondente no teclado do computador for pressionada.
Por exemplo:
document.addEventListener("keydown", function(e) {
if (e.key === "1") {
document.querySelector(".tecla-1").classList.toggle("ativa");
}
// adicione aqui as outras teclas correspondentes
});Espero ter ajudado e bons estudos!