This is a solution to the Interactive Card Details fform
Never giving up and keep pushing further like before, nothing changed.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Javascript
- and with bunch of Love.
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
- 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
-
textContent represents the text inside an HTML element
-
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.
- Website - Giorgi Chiaberashvili