1
resposta

Resolução do exercício comentada

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. :)

1 resposta

Oi Romel, tudo bem?

Parabéns por aceitar e completar o desafio! E foi muito legal da sua parte trazer o código comentado para ajudar mais pessoas. Com certeza vai ajudar muita gente por aqui. :D

Sua iniciativa foi incrível! Estudantes como você são fundamentais para que o fórum seja um local incrível de troca conhecimento.

Parabéns mais uma vez!

Bons estudos.

Abraço.