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
  • Useful resources
• Author
• Acknowledgments

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

Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it.

Alternatively, you can use a tool like FireShot to take the screenshot. FireShot has a free option, so you don't need to purchase it.

Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above.

Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.

Links

• Solution URL: https://www.frontendmentor.io/solutions/interactive-card-details-form-with-htmlcssjsjquery-88GbDoEapJ
• Live Site URL: https://interactive-card-details-form-o11aueklm-tegarsetyo6.vercel.app/?cardholder-name=Tegar+Setyo+Wicaksono&card-number=tega&month=13&date=wt&cvc=123

My process

I built this website using Vanilla HTML, CSS, and Javascript to improve my skill on these skills. The web is currently not mobile-responsive yet.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Javascript

What I learned

In creating an interactive card details form with HTML, CSS, JS, and JQuery, I have learned several things. Firstly, I learned that HTML is used to create the structure of the form and to define its elements. CSS is used to style the form and make it look visually appealing to the user. JQuery is a powerful library that makes it easy to manipulate the elements of the form using JavaScript. I also learned that by using event listeners, I could capture user input and use it to validate the form data. This helped me ensure that users entered accurate and complete information. Additionally, I learned that by using regular expressions, I could validate the user's input to ensure it met specific criteria, such as valid credit card numbers. Overall, I learned that creating an interactive card details form requires a combination of HTML, CSS, JS, and JQuery, along with attention to detail and careful validation of user input.

Continued development

Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect.

Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.

Author

• Website - Add your name here
• Frontend Mentor - @yourusername

Acknowledgments

I want to thank simon goelner for giving me feedback for the submission.