Interactive card details form using React

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

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

Installation Guide

1. Clone the repository in your local IDE using this code in your terminal :

git clone https://github.com/TheRedBandiCoot/Interactive-card-details-form.git

2. After successfully get the files in your local IDE go to the new directory Interactive-card-details-form

• cd Interactive-card-details-form

3. Now run this code for install dependencies and running the app at the same time.

• npm install && npm run dev
• In case if you got some error for installation or run it, you can run npm install and npm run dev separately

4. Now click the link which is provided in your terminal or you can write the url manually in your browser

• LocalHost-(url)
• You can also press o in your in the terminal for open the url automatically in your browser.

5. Press ctrl + c or q in your terminal to close the server.

6. You can also change the server port configuration

• Open vite-config.js
• Right after the plugin, add another obj called server
• Create a property called port in your server & add value for your port.

Here is the code

// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
port: 5000,
},
});

• Make sure to restart the server by pressing r in your terminal for new changes.

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

Interactive-card-details-form

Links

• Solution URL: check here🔗
• Live Site URL: check here🔗

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• React - JS library
• vite
• Vite.js is a development tool that comes with a dev server and is used for modern web applications.
• It offers a faster and smoother workflow in terms of development.

What I learned

• Tried to create a input box for credit card entering feature. How hard that can be if you know regex (honestly it took some minutes with regex) but with normal JS to create that feature you have to put way more logic than you thought. Yes there so many react provided library also there to help you out for solving the issue.
• Using “min” “max” in Input box in html.
• Use the onFocus and onBlur events in React to handle focus and blur events on elements.
• Also learned that these events are equivalent to the native focusin and focusout events, but they are normalized to bubble in React.
• A ternary operator inside the style prop of an element to conditionally apply inline styles.
• Learned that an empty object in the style prop means no inline styles are applied to the element.
• How to style the placeholder text in an input box using CSS.
• Learned that I can use the ::placeholder pseudo-element selector to apply different styles to the placeholder text than the input text.
• Also learned how to create a floating label effect for my input box, where the placeholder text moves above the input field on focus.
• How to use an input box followed by a label element, and use the adjacent element selector (+) to style the label based on the input state.
• Responsiveness design.

Useful resources

• Regular expressions - JavaScript | MDN
• HTML input min-max Attribute
• React hook - onFocus and onBlur
• Bing AI ChatBot
• Custom-Hooks
• React-Spring
• React 18 Tutorials By Codding Addict

Author

• Github - TheRedBandiCoot
• Frontend Mentor - @TheRedBandiCoot
• Twitter - @subho19996