Fazer Seção 13 do Curso WebDev da Udemy

[AndreBuitoni]

Seção 13 - Advanced Javascript and DOM Manipulation (The Complete 2022 Web Development Bootcamp)

• [x] 160 - What we'll make: Drum Kit
• [x] 161 - Download the Starting Files
• [x] 162 - Adding Event Listeners to a Button
• [x] 163 - Higher Order Functions and Passing Functions as Arguments
• [x] 164 - Higher Order Function Challenge Solution
• [x] 165 - How to Play Sounds on a Website
• [x] 166 - A Deeper Understanding of Javascript Objects
• [x] 167 - How to Use Switch Statements in Javascript
• [x] 168 - Objects, Their Methods and the Dot Notation
• [x] 169 - A Quick Note abou the Next Lesson
• [x] 170 - Using Keyboard Event Listeners to check for Key Presses
• [x] 171 - Understanding Callbacks and How to Respond to Events
• [x] 172 - Adding Animation to Websites
• [x] 173 - Download the Completed Website
• [x] 174 - Tip From Angela - Dealing With Lack of Progress
• [x] Postar resultado prático, se houver.

[AndreBuitoni]

Link para o site que fizemos nesse capítulo (Drum-kit): https://andrebuitoni.github.io/Web-Development/drum-kit/index.html

Aqui estão os arquivos no github: https://github.com/AndreBuitoni/Web-Development/tree/main/drum-kit

Detectando o clique do mouse na imagem e chamando as funções de fazer som e animar o botão:

Detectando o aperto das teclas no teclado e ativando o som e a animação:

Criando a função da animação dos botões:

HTML:

Os CSS podem ser vistos aqui, mas não era o foco do capítulo: https://github.com/AndreBuitoni/Web-Development/blob/main/drum-kit/styles.css

[piantino]

Muito bacana o projeto @AndreBuitoni !