Codigo do AluraFone

Assim está ficando o meu código do AluraFone, com a funcionalidade de aparecer os números e também de alterar a cor da tecla.

const listaDeTeclas = document.querySelectorAll('input[type="button"]');
const inputTel = document.querySelector('input[type="tel"]');


//repeticao;
for (i = 0; i < listaDeTeclas.length; i++) {
  const tecla = listaDeTeclas [i];

  //quando clicar a tecla execute a funcao enviando o valor da tecla como parametro;
  tecla.onclick = function () {
    imprimeTel (tecla.value);
  }

  //envia o evento como parametro, se o evento for   igual a enter ou space, execute a funcao; 
  tecla.onkeydown = function (evento) {
     if (evento.code === "Enter" || evento.code ==="Space") {
    tecla.classList.add('ativa');   
    }
  }

  //quando soltar a tecla remova a classe
  tecla.onkeyup = function () {
    tecla.classList.remove('ativa');
    }
}

// recebe o valor da tecla como parametro e incrementa no valor do input tel;
function imprimeTel (valorDaTecla) {
  inputTel.value += valorDaTecla;
}

No CSS também adicionei o botao junto ao estilo da .ativa, para fazer o mesmo quando clicasse com o mouse.

.ativa, input[type="button"]:active  {
  background-color: yellow;
}