Boa tarde pessoal, encontrei um bug no código, caso vc segure a tecla de "Espaçao" e apertar o "Tab", a tecla fica com a cor vermelha pra sempre, mas de resto o código ta funcionando igual o da professora. Alguém sabe como corrigir isso?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Boa tarde pessoal, encontrei um bug no código, caso vc segure a tecla de "Espaçao" e apertar o "Tab", a tecla fica com a cor vermelha pra sempre, mas de resto o código ta funcionando igual o da professora. Alguém sabe como corrigir isso?
Boa noite, chará! Meu primeiro post aqui. Foi ótima sua pergunta, pq verifiquei que isso realmente acontece com o código ao final do curso, e isso me encorajou a procurar a solução! Quando damos Tab com a tecla Espaço ou Enter pressionada, mudamos o foco do botão antes mesmo do nosso código detectar o evento "onkeyup".
A solução que encontrei foi detectar também o evento 'onblur' para também remover a classe "ativa". O evento 'onblur' detecta quando o foco saiu daquele elemento (oposto do evento 'onfocus'). Dessa forma, quando apertarmos Tab e o foco mudar para a proxima tecla, a classe 'ativa' é removida. adicione esse trecho de código à sua rotina "for".
Com certeza tem outras maneiras de economizar a linha 'classList.remove', mas estou iniciando em JS ainda kkkkk não aprendi a "juntar" eventos.
for (let contador = 0; contador < listaDeTeclas.length; contador++) {
//extrai o #id de cada uma das teclas
const tecla = listaDeTeclas[contador];
const instrumento = tecla.classList[1];
const idAudio = `#som_${instrumento}`; //template string
//verifica SE o botão foi clicado
tecla.onclick = function () {
tocaSom(idAudio);
}
//verifica SE as teclas de ativação Enter ou Space foram pressionadas
tecla.onkeydown = function (evento) {
if (evento.code == "Enter" || evento.code == "Space"){
tecla.classList.add('ativa'); //deixa a tecla vermelha
tocaSom(idAudio);
console.log(evento);
}
}
//volta para o estilo normal quando a tecla não está mais pressionada
tecla.onkeyup = function () {
tecla.classList.remove('ativa'); //tecla volta ao normal
}
//volta para o estilo normal quando o foco saiu do botão
tecla.onblur = function (evento) {
tecla.classList.remove('ativa');
}
}
muito legal esta dica! adicionei uma coisa legal tbm, adicionei a classe active
perceberam que quando clicamos com o mouse tem uma sombra vermelha mais escura? ,então estava na classe active
coloquei desta forma e deu certo:
if(evento.code === 'Space' || evento.code === 'Enter'){
tecla.classList.add('ativa','active');
}
}
tecla.onkeyup = function (){
tecla.classList.remove('ativa','active');
}
tecla.onblur = function (evento) {
tecla.classList.remove('ativa','active');
}coloquei nas três funções
espero que ajude!
Nossa essas dicas ajudou bastante. Valeu pessoal por compartilhar
Boa noite, gostei das dicas! adicionei também no if que faz a verificação das teclas o Enter Numérico.
tecla.onkeydown = function (evento){ if(evento.code === 'Enter' || evento.code === 'Space' || evento.code === 'NumpadEnter') { tecla.classList.add('ativa', 'active'); } }
Existe uma diferença também entre manter pressionado o Espaço e o Enter, manter pressionado o Espaço ele não toca até você soltar, porém com o Enter ele fica tocando por diversas vezes. Alguém identificou e conseguiu solucionar isso?