Solução do Código do desafio Alura Fone.

Fiz de um jeito diferente, que se refere a um curso anterior de html e css.

Analisando o código html abaixo temos uma section com uma classe nomeada como teclado.

 <h1> Alura Fone </h1>
 <input type="tel" placeholder="Digite seu telefone">
 <section class="teclado">
    <input type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <input type="button" value="4">
    <input type="button" value="5">
    <input type="button" value="6">
    <input type="button" value="7">
    <input type="button" value="8">
    <input type="button" value="9">
    <input type="button" value="*">
    <input type="button" value="0">
    <input type="button" value="#">
  </section>

Com isso fiz um teste com o uso de uma linha de código de css3, onde poderia pegar uma tag "filha" através desse comando .teclado > input utilizado dentro do querySelectorAll como mostrado na linha abaixo;

const teclado = document.querySelectorAll('.teclado > input')

com isso meu código ficou assim...

const campo = document.querySelector('input')

const teclado = document.querySelectorAll('.teclado > input')

for (let contador = 0; contador < teclado.length; contador++) {

    const tecla = teclado[contador]

    tecla.onclick = function () {
        campo.value += tecla.value
    }
}