Alura - Codificação do JavaScript do Projeto Alura Midi

Codificação da parte do JavaScript de um projeto disponibilizado durante o curso de Front-end da Alura.

Indíce

Visão Geral

Desafio | Screenshot | Links

Meu Processo

Construído com | O que eu aprendi | Recursos úteis

Considerações Finais

Autor | Agradecimentos

Visão Geral

Desafio

O desafio foi construir um código JavaScript limpo e acessível do Alura Midi, que é um instrumento musical de interface digital, onde a cada botão será reproduzido o som de um instrumento. Os usuários devem ser capazes de:

• Interagir com os botões, em que cada um sai seu respectivo som;
• Conseguir navegar entre os botões utilizando o teclado ('Tab', 'Enter', 'Space').

Screenshot

Links

• URL da solução: JavaScript
• URL do site: Site

Meu processo

Construído com

• Funções JavaScript;
• Lista de elementoS JS;
• Referências (constante);
• Estrutura de repetição for;
• Eventos no teclado;
• Condições com if e else.

O que eu aprendi

• Identificar os papéis de cada tecnologia da Web para construção de páginas;
• Associar o JavaScript com HTML através do DOM;
• Implementar funções com JavaScript;
• Investigar possibilidades de resolução de problemas de código;
• Selecionar operadores lógicos adequados para diferentes situações;
• Produzir soluções simples para páginas dinâmicas.

function tocaSom (idElementoAudio) {
    document.querySelector(idElementoAudio).play();
}

const listaDeTeclas = document.querySelectorAll('.tecla');

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

        const tecla = listaDeTeclas[contador];
        const instrumento = tecla.classList[1];
        const idAudio = `#som_${instrumento}`;

        tecla.onclick = function () {
            tocaSom(idAudio);
        }
}

Recursos úteis

• JavaScript Tutorial - Este é um m site educacional que me ajudou a entender melhor quais são as propriedades do JavaScript.

Considerações Finais

Autor

• Interação com JS - Beatriz Slan | Alura
• Linkedin - in/beatriz-slan

Agradecimentos

Gostaria de agradecer a toda equipe envolvida da Instituição Alura, pela excelente didática, plataforma de ensino e por disponibilizar projetos reais e profissionais que me ajudam muito a praticar e aprimorar todo meu conhecimento deste mundo incrível do Front-end.