Frontend Mentor - Interactive card details form solution

As always, my solution isn't suposed to look exactly as the challenge. This is a solution to the Interactive card details form challenge on Frontend Mentor.

Como sempre, minha solução não é pra ficar exatamente igual ao desafio proposto. Essa é uma solução ao desafio do FrontendMentor.

Table of contents

• Overview
  • The challenge
• My process
  • Built with
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• Receive error messages when the form is submitted if:
  • input field is empty
  • The card number, expiry date, or CVC fields are in the wrong format
• View the optimal layout depending on their device's screen size
• See hover, active, and focus states for interactive elements on the page

My process

I started using HTML, structuring all the parts, div and images. Then I did the CSS part, it was challenging because I had to put the card images in different places, and the info inside the card and it should move accordingly to the screen size. The JavaScript part was the most difficult, because I had to read a lot of documentation about DOM, form validations, understand how to use in the best way and had to test every single part along the writing.

Eu comecei usando o HTML, estruturando todas as partes, encaixando as divs, imagens, id, classes e form, para facilitar o trabalho quando passasse para o CSS, que foi desafiador na parte do cartão, onde um tinha que ficar um pouco mais afastado que o outro e tinha que ter as imagens na frente e isso tudo deveria mudar de acordo com as imagens, mas acabou dando certo. A parte mais difícil do projeto foi a validação do formulário, tive que testar várias vezes, ler documentações, ver vídeos explicativos e entender qual a melhor forma de usar no projeto.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• JavaScript

Useful resources

• [Introdução ao DOM] (https://developer.mozilla.org/pt-BR/docs/Web/API/Document_Object_Model/Introduction) - This helped me understand DOM form object | Introdução ao DOM
• [Form ] (https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/form) - This helped learn and understand forms | Esse site me fez aprender e entender formulários.

Author

• Frontend Mentor - @andressablima
• LinkedIn - @andressablima