Legal a ideia do tutorial, bem explicado. Como passo dois, eu sugeriria refatorar o codigo para tornar menos repetitivo, por exemplo:
- No css você repete o
transition: 0.5s
em todas as classes de hover dos botões, pode ficar apenas dentro da classe.btn
- Da mesma forma você atribui o transition para todas as cores no
trocarCor()
, pode atribuir via css para o id#quadrado
- Pode tornar o codigo menos repetitivo e mais customizavel (sem ter que mexer em js a cada cor nova) atribuindo um atributo
data-color
e lendo seu valor sempre que houver um clique. para não ter que repetir o onclick, faça um eventlistener em todas as classesbtnColor
por exemplo.