SONOPLASTA

Status do Projeto: ✔️ concluído

Deploy: https://natsmarinho.github.io/sonoplasta/

Table of contents

• Overview
  • The challenge is to build out this interactive sound design's page component.
• My process: It took me 5 days to build this.
  • Built with: HTML5, CSS3 and JAVASCRIPT.
  • What I learned: I've learned how to use display grid and how to manipulate DOM. And also I've learned more how to built a responsive page.
  • Continued development: I have to continue practice how to use the responsive page and javascript.
• Author: Natali Marinho.
• Acknowledgments: javascript, css and html.

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size;
• Select a button and it has to make a sound;

Screenshot

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Grid
• Mobile-first workflow
• Javascript

What I learned

 tecla.onkeydown = function(evento){
        if(evento.code === 'Enter' || evento.code === 'Space'){
            tecla.classList.add('ativa');
        };
    };

    tecla.onkeyup = function(evento){
        tecla.classList.remove('ativa');
    };

Useful resources

• File with the sounds - This helped me for the sounds of the website.

Author

• Frontend Mentor - @natsmarinho
• Twitter - @natsmarinho
• Instagram - @natsmarinho
• Linkedin - @natsmarinho

Acknowledgments

I would like to thank to syphazk on youtube for making a file with the sounds avaliable.

Nome do meu projeto

Rápida descrição do objetivo de fazer esse projeto

🪧 Vitrine.Dev
✨ Nome	Quem quer ser o sonoplasta?
🏷️ Tecnologias	javascript, html, css
🚀 URL	https://natsmarinho.github.io/sonoplasta/

Detalhes do projeto

Projeto inspirado no aluraMid com os áudios do programa 'Vai dar namoro'.