Evento exclusivo e gratuito, promovido pela Rocketseat para ensino de tecnologias WEB.
Tecnologias | Projeto | Layout | Licença
Esse projeto foi desenvolvido com as seguintes tecnologias:
- HTML e CSS
- JavaScript e JSON
- Node e NPM
- Vite
- iMask
O Rocketpay é um componente que simula o formulário de preenchimento de cartão de crédito, onde é possível adicionar máscara aos inputs e atualizar elementos HTML via DOM.
Você pode visualizar o layout do projeto através DESSE LINK. É necessário ter conta no Figma para acessá-lo.
Eu aprendi o que são os eventos em JS, basicamente seria qualquer interação do usuário com algum elemento da página, e também como executar uma função de acordo com um evento.
const expirationDateMasked = IMask(inputExpirationDate, expirationDatePattern)
expirationDateMasked.on("accept", () => {
updateExpirationDate(expirationDateMasked.value)
})
function updateExpirationDate(date) {
const ccExpiration = document.querySelector(".cc-expiration .value")
ccExpiration.innerText = date.length === 0 ? "02/32" : date
}
O expirationDateMasked é uma variável que contem a função IMask(que que recebe como argumento o valor do input e da mascara), e o "accept" é o nome do evento, e significa que quando o usuário preencher o campo, e esse valor for válido, o evento vai executar a função updateExpirationDate() que recebe como argumento "expirationDateMasked.value" o valor que o usuário digitou.
A função updateExpirationDate() basicamente vai atualizar o elemento html, onde irá trocar o valor padrão pelo valor digitado pelo usuário.
Esse projeto está sob a licença MIT.
Feito com ♥ by Rocketseat 👋 Participe da nossa comunidade!