Aqui está a resolução comentada do exercício proposto:
const aluraFone = { //Cria um objeto que contém o input de telefone e os inputs de botão.
numero: document.querySelector('input[type="tel"]'), //Item "numero" que recebe o input onde o usuário irá pôr o seu telefone.
teclas: document.querySelectorAll('input[type="button"]') //Item "teclas" que recebe todos os inputs de botão.
};
for (let c = 0; c < aluraFone.teclas.length; c++){ // Laço de repetição que irá repetir enquanto o let "c" for menor do que o length do item "teclas" do objeto "aluraFone".
aluraFone.teclas[c].addEventListener("click", function (){ //Adiciona um "escuta-evento" (addEventListener) que tem uma propriedade semelhante a de um "onclick". Após isso, abre-se uma função vazia.
aluraFone.numero.value += aluraFone.teclas[c].value; //Adiciona o "value" do botão pressionado ao "value" do espaço para o número de telefone.
})
aluraFone.teclas[c].onkeydown = function (evento){ //Função ativa após alguma tecla ser pressionada para baixo. Adicionamos o parâmetro "evento" apenas para podermos ter alguma referência à página para pegar o keyCode — código esse que é gerado após apertarmos alguma tela e, dependendo de qual seja ela, nos retornará um código diferente — do usuário.
if (evento.keyCode == "13" || evento.keyCode == "32"){ //O código do enter e do espaço são 13 e 32, respectivamente. Dessa forma, os botões apenas irão receber a classe "ativa" caso o código retornado seja um desses dois.
aluraFone.teclas[c].classList.add("ativa"); //Adiciona a classe "ativa" a todos os elementos do item "teclas" através da repetição.
}
}
aluraFone.teclas[c].onkeyup = function (){ //Funciona exatamente igual ao último, mas, dessa vez, não temos necessidade de passar um keycode, pois o usuário estará soltando a tecla, e não apertando-a.
aluraFone.teclas[c].classList.remove("ativa"); //Remove a classe "ativa" do elemento após o usuário soltar a tecla antes pressionada.
}
}
Espero ter ajudado. :)