Como criar um botão de like com CSS e JS

Vamos começar com o HTML e CSS, já deixei pronto para você, como o componente é muito simples, acho que podemos avançar essa parte.

A única coisa que você precisa ficar atento neste tutorial é fazer a instalação do fontawesome sem seu projeto.

Agora vamos para o CSS:

Já deixei as cores em variáveis, caso você queira mudar elas no futuro, fica muito mais fácil.

JavaScript variáveis

Uma variável do JavaScript é como se fosse um tipo de caixa onde podemos guardar informações nele, seja números, textos, objetos e entre outros. Com isso deixa muito mais fácil utilizá-los mais tarde em nossa aplicação.

Precisamos agora guardar nosso botão em uma variável:

Selecionamos o botão que tenha a classe .btn (<button class=”btn”></button>) e guardamos ele na variável button. A palavra document está referenciando o D.O.M, que basicamente é a nossa página HTML.

Agora vamos adicionar classes ao nosso botão quando clicarmos nele, tudo isso via JavaScript.

JavaScript Function

Uma function guardar instruções e funções que iremos reutilizar em nosso código, evitando assim ficar repetindo muita coisa.

Vou mostrar como declarar e usar uma function:

Agora precisamos aprender a criar um evento.

JavaScript Events

Para nossa missão, precisamos criar um eventListener, que fica escutando e esperando algo acontecer para ele entrar em ação.

Os eventos podem ser click, mouseover e muitos outros. O parâmetro 1 é qual evento nós queremos que ele fique ouvindo, o segundo é qual function ele vai realizar ao ser chamado.Agora que sabemos o que é events e que queremos o evento de click, vamos montar nosso listener.

Todas as vezes que nosso button for clicado ele irá realizar a function que colocar e tirar a classe de curtido. Assim realizando as animações e estilos que definimos no CSS.

Conclusão

Aprendemos alguns conceitos importantes montando esse componente de botão bem simples, essa é uma maneira muito boa de estudar JavaScript, pequenos projetos com muitos conceitos.

Agora você consegue montar outros tipos de botões, basta colocar em prática tudo que sabe.

Gostou? Quer aprender mais de angular? Então veja aqui nosso Curso de Angular.

Aprenda mais de Angular em nossas postagens ou no Youtube.

Share This