interactive-card-details-form

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
  • Continued development
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

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 URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

I began by carefully reviewing the project requirements and planning my approach. I decided to use HTML,CSS and JavaScript to build the interactive card details form. Next, I designed the layout and visual styling using CSS, ensuring a responsive and user-friendly interface. I then implemented the form’s functionality using JavaScript, adding real-time validation and formatting for the card number, expiration date, and CVC.

Throughout the project, I tested and debugged my code to ensure compatibility and smooth functionality across different browsers and devices.

One notable challenge was balancing the form’s interactivity with user input validation. To overcome this, I employed a combination of HTML5 validation attributes and JavaScript checks, ensuring a seamless user experience while maintaining data accuracy.

Overall, this project helped me refine my skills in building interactive, user-friendly interfaces and managing complex form validation logic

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

I learnt how to add spaces to use inputs in real time

<label for="number">Card Number</label><br>
        <input type="text" id="number" placeholder="  e.g. 1234 5678 9123 0000" maxlength="19" onkeypress="cardSpace()" required/>

.container .right input::-webkit-inner-spin-button,
.container .right input::-webkit-inner-spin-button
{
    appearance: none;
}
.container .right input{
    width: 100%;
    margin-bottom: 1.5rem;
    height: 45px;
    max-width: 400px;
    border-radius: 8px;
    margin-top: 0.3rem;
    outline: none;
    border: 1px solid var(--light-grayish-violet);
    padding-left: 1.5rem;
    font-size: 18px;
}
.container .right input:focus{
    /* padding: 0.5rem; */
    border: solid 1.5px transparent;
    border-radius: 8px;
    background-image: linear-gradient(white, white), 
                      linear-gradient(to right, var(--active-border1), var(--active-border2));
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
.container .right input::placeholder{
    font-size: 17px;
    color: var(--light-grayish-violet);
    font-weight:300;
}

function cardSpace() {
    var cardno = document.getElementById("number").value;
    if (cardno.length == 4 || cardno.length == 9 || cardno.length == 14) {
        document.getElementById("number").value = cardno + " ";
        document.getElementById("number").max = 1;
    }
    card_number.innerText = cardno

};

Continued development

1. Learn to create custom patterns for validating complex inputs like passwords, emails, and phone numbers
2. Stay up-to-date with the latest best practices and guidelines for form validation, ensuring a smooth and secure user experience

Useful resources

-Stack

Author

• Website - David Kwame Annor
• Frontend Mentor - @yourusername
• Twitter - @annordavid911

Acknowledgments

My roomates - Keven and Kingsley,they kept pushing to continue even though I had problems with fixing the bugs