https://github.com/ompreetham/interactive-card-details-form
"Interactive Card Details Form" challenge on Frontend Mentor.
https://github.com/ompreetham/interactive-card-details-form
bem card component css front-end front-end-development frontend frontend-mentor frontendmentor-challenge html interactive javascript js junior react reacthooks render scss vite website
Last synced: 3 months ago
JSON representation
"Interactive Card Details Form" challenge on Frontend Mentor.
- Host: GitHub
- URL: https://github.com/ompreetham/interactive-card-details-form
- Owner: OmPreetham
- License: mit
- Created: 2024-04-06T21:02:42.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-17T02:30:09.000Z (about 2 years ago)
- Last Synced: 2025-02-28T23:47:18.335Z (over 1 year ago)
- Topics: bem, card, component, css, front-end, front-end-development, frontend, frontend-mentor, frontendmentor-challenge, html, interactive, javascript, js, junior, react, reacthooks, render, scss, vite, website
- Language: JavaScript
- Homepage: https://ompreetham.github.io/interactive-card-details-form/
- Size: 6.44 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Interactive Card Details Form Challenge
This project is a solution to the "Interactive Card Details Form" challenge on Frontend Mentor. The challenge involves building an interactive card details form using HTML, SCSS, and JavaScript.
## Overview
The interactive card details form allows users to enter their credit card information in a visually appealing and user-friendly manner. It includes form validation, dynamic card number formatting, and interactive animations to enhance the user experience.
## Features
- Responsive design for various screen sizes.
- Form validation to ensure the correctness of entered information.
- Dynamic formatting of the credit card number input.
- Interactive animations to provide feedback to the user.
- BEM (Block Element Modifier) naming convention for CSS classes.
- Built with React for dynamic UI rendering.
- Utilizes SCSS for styling.
## Technologies Used
- React
- SCSS (Sass)
- Vite (Frontend build tool)
- HTML
- JavaScript
### Previews
Desktop
Mobile
## Getting Started
Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.
### Prerequisites
Make sure you have Node.js and npm (or yarn) installed on your machine.
### Installation
1. Clone this repository to your local machine using the following command:
```
git clone https://github.com/OmPreetham/interactive-card-details-form.git
```
1. Navigate into the project directory:
```
cd interactive-card-details-form
```
1. Install dependencies using npm:
```
npm install
```
## Usage
To run the project, use the following command:
```
npm run dev
```
This will start a development server and open the project in your default web browser. Any changes you make to the source code will be hot-reloaded, meaning you can see the updates in real-time.
## Build
To build the project for production, use the following command:
```
npm run build
```
This will start a development server and open the project in your default web browser. Any changes you make to the source code will be hot-reloaded, meaning you can see the updates in real-time.
## Build
To build the project for production, use the following command:
This will create an optimized build of the project in the `dist` directory.
## Additional Information
- This project was scaffolded using Vite, a blazing fast frontend build tool.
- It uses React for building the user interface.
- Feel free to customize the project according to your needs.
## License
This project is licensed under the [MIT License](LICENSE).