Frontend Mentor - Interactive card details form solution

This is a solution to the Interactive card details form challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• Fill in 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, 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

Screenshot

Links

• Solution GitHub
• Live Site

My process

Built with

• Semantic HTML5 markup
• CSS3
• Flexbox
• JavaScript

What I learned

• Manipulate input with JavaScript

function formatCardNo(evt) {
	// Digit only
	if (evt.which < 48 || evt.which > 57)
	{
			evt.preventDefault();
	}

	var x = document.getElementById("number");
	var index = x.value.lastIndexOf(' ');
	var test = x.value.substr(index + 1);
	if (test.length === 4 && x.value.length < 16)
			x.value = x.value + ' ';
}

• Build Responsive layout with Media query

@media only screen and (max-width: 650px) {

Useful resources

• [stackoverflow] - This helped me when I have doubt on the code, the community provide useful solutions.
• [w3schools] - This is an amazing place for me to learn html and css.
• [freecodecamp] - freecodecamp provide free course and certificate program that improve my understanding on responsive UI.

Author

• Website - Trystan Loke
• Frontend Mentor - @trystan-loke