1
resposta

Resultado exercicio de eventos e logicas

/*
Um JavaScript que percorra a lista de teclas do AluraFone, e ao clicar na tecla Enter ou Espaço, adicione a classe ativa no elemento e também resolva o momento de retirar a classe ativa do elemento.
*/
const telaResultado = document.querySelector('input[type=tel]');
const buttons = document.querySelectorAll('input[type=button]');

for (let i = 0 ; i < buttons.length ; i++){
  const buttonPress = buttons[i];

  // quando clicamos com o mouse adiciona a classe ativa por 100 milisegundos depois remove
  buttonPress.onclick = function(){
    buttonPress.classList.add('ativa')
    telaResultado.value += buttonPress.value

    // define um tempo de 100 milisegundos para executar a funcao de remover classe
    setTimeout(function() {buttonPress.classList.remove('ativa')},100);
  };

  // ao descer tecla enter ou space, adiciona cor, qualquer outra tecla remove a cor
   buttonPress.onkeydown = function (e){
    if( e.code === 'Space' || e.code === 'Enter'){
      buttonPress.classList.add('ativa')

    } else {buttonPress.classList.remove('ativa')}
  };

  // quando a tecla subir remove a cor
  buttonPress.onkeyup = function (){
    buttonPress.classList.remove('ativa')
  }
};
1 resposta

Olá Kelvin, tudo bem?

Muito obrigada por compartilhar com a gente o seu exercício! Ficou muito bom :D

Continue praticando que assim o assunto fixa bem!

Um abraço e bons estudos.