[Sugestão] AluraFone

É possível fazer o telefone com laços e repetições de tal maneira que poder-se-á usar o mouse ou teclado para digitar, como foi pedido. Usando JS tal qual aprendemos, o uso de event listeners é ótimo. Vejam aqui o código completo: https://github.com/PurpleKaz81/alura.git. Entre na pasta aluramidi e, na sequência, na desafio3. Busque o histórico de commits da main.js e clique no "Finished desafio3". Ali está uma maneira, junto ao HTML, de carregar a página dando foco ao input do telefone e subsequentemente permitindo-se o navegar com tab e shift+tab. Também achei no ChatGPT uma maneira de ir da tecla 1 de volta para o input usando preventDefault() de tal maneira que o shift+tab não me levasse da tecla um para minha barra de favoritos no Chrome.

Falando em ChatGPT, estudem com ele. É incrível. Após terminar o telefone, fiquei o refatorando. Descobri um sem-fim de novidades. Eis o código final em JS:

const buttonList = document.querySelectorAll('input[type=button]');
const telInput = document.querySelector('input[type=tel]');
telInput.tabIndex = -1;
telInput.focus();

const addEventListeners = (element, events) => {
    events.forEach(({event, action}) => {
        element.addEventListener(event, action);
    });
};

const buttonEvents = [
  {event: "mousedown", action: e => e.target.classList.add("ativa")},
  {event: "mouseup", action: e => e.target.classList.remove("ativa")},
  {event: "keydown", action: e => {
      if (e.key === " " || e.key === "Enter") e.target.classList.add("ativa")
  }},
  {event: "keyup", action: e => e.target.classList.remove("ativa")},
  {event: "click", action: e => telInput.value += e.target.value},
];

const telEvents = [
    {event: "keydown", action: e => {
        if (e.key === " " || e.key === "Enter") telInput.classList.add("ativa")
    }},
    {event: "keyup", action: e => telInput.classList.remove("ativa")},
];

buttonList.forEach((button, index) => {
    button.tabIndex = index + 1;
    addEventListeners(button, buttonEvents);
});

Eu entendi tudo que postei acima? Óbvio que não, boiei. Mas é um excelente ponto para se começar e faz mais sentido sintático. Dá para se ter uma ideia de arrow functions, forEach, o uso de arrays, events e actions e a possibilidade de fazer código mais legível e compreensível sem usar for loops.

Abs!