primeiro exercicio | JavaScript para Web: Crie páginas dinâmicas

Selecionando elementos com JavaScript Você já sabe como usar o DevTools para inspecionar elementos HTML. Agora, está trabalhando em um projeto de site musical e precisa interagir com os botões que representam as teclas de um piano. Logo, seu desafio é: utilize o Javascript para selecionar um botão específico na sua página.

document.querySelector('.tecla_pom')

comentário: O código JavaScript acima foi digitado no console do navegador e está selecionando a class do teclado Pom do documento html.

Emitindo um alerta na tela Imagine que você está trabalhando em um projeto de site que inclui elementos interativos como botões que emitem sons, semelhante a um piano. Até o momento, você já aprendeu como emitir o som utilizando JavaScript, agora, a sua missão é emitir um alerta escrito “Fui clicado”, em um botão assim que ele receber um clique. html

<button onclick="exibirMensagem()" class="tecla tecla_pom">Pom</button>

function exibirMensagem() {
    alert("Botão 'Pom' clicado!");
}

Comentário: para exibir a mensagem é necessário colocar a junção com o comando onclick no html e depois chamar a função no js . o onclick serviu de referência pra apresentação do alert na tela. Procurei utilizar apenas o console.log mais não há possibilidade de fazer-lo.

Integrando estilo e funcionalidade em um projeto Web Neste exercício, você enfrentará um desafio comum no desenvolvimento web: garantir consistência de design entre diferentes navegadores. Trabalhando com o mesmo projeto do instrumento musical digital, você percebeu que o mini player de áudio tem aparências diferentes no Firefox e no Chrome. Seu objetivo é personalizar o estilo desse player de áudio usando CSS para que ele tenha uma aparência consistente em ambos os navegadores. Como a tag audio é difícil de estilizar diretamente, você precisará encontrar uma maneira criativa de contornar essa limitação, talvez usando elementos HTML adicionais e CSS para alcançar o design desejado.

Comentário: Não consegui estilizar pra ficar padrão no firefox. o chrome e o edge ficaram iguais.

Olá, Sergio!

Vamos abordar cada um dos seus pontos de dúvida:

Se você quer selecionar elementos com JavaScript, e você precisar selecionar mais de um elemento com a mesma classe, você pode usar document.querySelectorAll('.tecla_pom'), que retornará uma NodeList com todos os elementos correspondentes.

De fato, console.log é mais utilizado para debugging e não interage com o usuário. O método alert(), como você usou na função exibirMensagem(), é o mais adequado para mostrar uma mensagem de alerta diretamente ao usuário. Seu uso do evento onclick no HTML está correto e é uma forma prática de vincular eventos a elementos específicos.

Por fim, se você quiser garantir que o mini player de áudio tenha uma aparência consistente em diferentes navegadores, você pode considerar o uso de um wrapper HTML em torno da tag audio e estilizá-lo com CSS. Por exemplo:

<div class="custom-audio-player">
  <audio controls>
    <source src="musica.mp3" type="audio/mp3">
  </audio>
</div>

E no seu CSS, você pode adicionar estilos específicos para o .custom-audio-player para garantir que ele se pareça igual em todos os navegadores. Além disso, você pode usar prefixos específicos de navegador e propriedades de fallback para aumentar a compatibilidade.

.custom-audio-player {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Adicione mais estilos conforme necessário */
}

Lembre-se de testar em diferentes navegadores para ajustar os estilos conforme necessário.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Chegou a hora de transformar