Gêneros Musicais / Musical Genres

Objetivos / Aims

1) Criar um formulário com os seguintes campos:

• Genêro músical (elemento <select> com pelo menos 3 <option>s);
• Música (elemento <input type="text"> com display: none);

Create a form with the following fields:

• Musical genre (element <select> with at least 3 <option>s);
• Peace of music (element <input type="text"> with display: none);

2) Exercício de fixação referente à aula de "formulários" no curso de Desenvolvimento de Software da Cubos Academy.

Consolidation exercise related to the classe on "forms" in the Software Development Course at Cubos Academy.

Problemas que consegui resolver / Problems I was able to solve

• Após consulta ao Stack Overflow, pude colocar um efeito de neon nas bordas dos itens do formulário

• After looking up a way to make my form items have a neon effect at Stack Overflow, I was able to implement it on my project

• Os resultados de pesquisa de algumas músicas não eram os desejados, então experimentei colocar a url de vídeos do Youtube no atributo "value" dos elementos <option> e deu certo.

• Some search results were not what I wanted, so I tried including the Youtube videos url in the "value" atribute of the element <option> and it worked.

• Consegui usar o método preventDefault() adicionando um event listener para a tag form no JavaScript em vez de usar o atributo requiredna tag selectdo HTML. O objetivo era evitar que o usuário fosse direcionado para uma pesquisa do Google mesmo que não selecionasse um item de pesquisa.

*I managed to use the method preventDefault() by adding an event listener to the tag form on JavaScript instead of using the atribute requiredin the tag selecton the HTML. The objective was to prevent the user from being directed to a Google search page even if they did not choose a search item from the list.

Algumas lições que aprendi / Some lessons I learned

• Um valor "submit" no typede um input funciona como um <button>;

• A value "submit"in the input type works as a <button>;

• O método preventDefault();

• The method preventDefault();

• Criar um triângulo no CSS;

• To create a triangle with CSS;

Tecnologias / Technologies

• CSS
• HTML
• JavaScript

Links

• Cubos Academy
• How to make a neon border - Stack Overflow
• How to make triangles using CSS

Autor / Author

Foto	Nome	GitHub	Likedin	E-mail
	Romulo Craveiro de Sousa Tartaruga	Romulo Craveiro	Linkedin	romulocraveiro@gmail.com