GiorgiChiaberashvili / Interactive-form-with-details-j

Frontend Mentor - Interactive-card-details-form

This is a solution to the Interactive Card Details fform

Table of contents

• Screenshot
• My process
• Built with
• What I learned
• Author

Screenshot

My process

Never giving up and keep pushing further like before, nothing changed.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Javascript
• and with bunch of Love.

What I learned

HTML: Input has ability to limit numbers or letters by chosing (maxlength)

(Inputmode) is element for giving browsers a hint that certain element can be indicated in the input

CSS: Size of the images can be controled via (background-size) element by using %

Javascript: Most code that I have ever written but learned tons in this project

1. number = number.replace(/\s?/g, '').replace(/(\d{4})/g, '$1 ').trim();

Removing white spaces where necessary and formatting string by inserting a space after every four digits

2. textContent represents the text inside an HTML element

3. padStart is a string method that ensures the string has a certain length by adding a specified character to the start if it's shorter.

Author

• Website - Giorgi Chiaberashvili