PT-BR: Neste formulário interativo de cartão de crédito os usuários devem ser capazes de:
- Preencher o formulário e ver a atualização dos detalhes do cartão em tempo real
- Receba mensagens de erro quando o formulário for enviado se:
- Qualquer campo de entrada está vazio
- O número do cartão, a data de validade ou os campos CVC estão no formato errado
- Veja o layout ideal, dependendo do tamanho da tela do dispositivo
- Veja os estados de foco, ativo e de foco para elementos interativos na página
EN-US: In this interactive credit card form, users should be able to:
- Fill out the form and see the card details update in real time.
- Receive error messages when the form is submitted if:
- Any input field is empty.
- The card number, expiration date, or CVC fields are in the wrong format.
- View the ideal layout depending on the screen size of the device.
- See focus, active, and hover states for interactive elements on the page.
- Layout mobile - Página inicial | Mobile layout - Home page;
- Layout desktop - Página inicial | Desktop layout - Home page;
- Preencher o nome do usuário no cartão a medida que é escrito no formulário | Fill in the user's name on the card as written on the form;
- Preencher o número do cartão a medida que é escrito no formulário | Fill in the card number as written on the form;
- Preencher a validade do cartão a medida que é escrita no formulário | Fill in the validity of the card as written on the form;
- Preencher cvc do cartão a medida que é preenchido no formulário | Fill out the card's cvc as it is filled out on the form;
- Validação do campos do formulário ao enviar | Validation of form fields when submitting;
- Redefinir o formulário quando o usuário clica em "Confirmar" no estado preenchido | Reset form when user clicks "Confirm" in filled state;
- Criar layout responsivo da página concluído | Create responsive page layout completed;
- Se não houver erros, exiba a página concluído | If there are no errors, display the completed page;
PT-BR: Neste projeto tive que passar uma noite virado por conta do prazo, mas foi muito satisfatório de fazer e entregar. Pude utilizar funcionalidade como "z-index" no CSS, assim como mexer na position do elemento com "relative" e "absolute". Nele o Javascript não foi tão difícil como no último, já estou mais acostumado com o JS. Também pude usar laços de repetição forEach para uma validação do formulário(coisa que eu fazia na mão todas as validações), e também no "addEventListiner" a função "keyup" que é uma grande novidade para mim. Foram 7 dias de projeto, uma semana longa e bem desafiadora, mas ao mesmo tempo extremamente gratificante de estar melhor que no projeto da semana passada. Espero que gostem!!
EN-US: In this project, I had to stay up all night due to the deadline, but it was very satisfying to create and deliver. I was able to use functionalities like 'z-index' in CSS, as well as manipulate the element's position with 'relative' and 'absolute'. JavaScript wasn't as difficult as in the last project; I’m getting more comfortable with JS. I also used forEach loops for form validation (something I used to handle manually for all validations), and I utilized the 'keyup' function with 'addEventListener,' which is a big novelty for me. It was a 7-day project—long and challenging, but at the same time extremely rewarding to feel I improved compared to last week’s project. I hope you enjoy it!
 Felipe Pereira de Lima |
|---|