https://github.com/cosmoart/interactive-card-details-form

💳 Web solution to a frontend mentor challenge, made with JS and CSS in React
https://github.com/cosmoart/interactive-card-details-form

css frontend-mentor javascript js-form reactjs

Last synced: 17 days ago
JSON representation

💳 Web solution to a frontend mentor challenge, made with JS and CSS in React

• Host: GitHub
• URL: https://github.com/cosmoart/interactive-card-details-form
• Owner: cosmoart
• License: mit
• Created: 2022-08-06T00:22:44.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-02-27T03:01:11.000Z (9 months ago)
• Last Synced: 2024-10-12T04:23:15.284Z (about 1 month ago)
• Topics: css, frontend-mentor, javascript, js-form, reactjs
• Language: JavaScript
• Homepage: https://interactive-card-details-form.vercel.app
• Size: 392 KB
• Stars: 13
• Watchers: 2
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        






		

	

# Frontend Mentor - Interactive card details form solution

This is a solution to the [Interactive card details form challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/interactive-card-details-form-XpS8cKZDWw). Frontend Mentor challenges help you improve your coding skills by building realistic projects.

[Solution][solution-url] . [Live Page][live-page]



Table of contents

-   [Overview](#overview)

    -   [The challenge](#the-challenge)

    -   [Screenshots](#screenshots)

    -   [Links](#links)

-   [My process](#my-process)

    -   [Built with](#built-with)

    -   [What I learned](#what-i-learned)

-   [Author](#author)

## 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

#### Expected behaviour

-   Update the details on the card as the user fills in the fields

-   Validate the form fields when the form is submitted

-   If there are no errors, display the completed state

-   Reset the form when the user clicks "Continue" on the completed state

### Screenshots

        

		    

                

            

			            

                

            

            

                

            

        

### Links

-   [Solution][solution-url]

-   [Live Page][live-page]

## My process

### Built with

-   Semantic HTML5 markup

-   CSS custom properties

-   Flexbox

-   Desktop-first workflow

-   [React](https://reactjs.org/) - JS library

-   [Vite](https://interactive-card-details-form.vercel.app/)

(back to top)


### What I learned

This challenge was a great learning opportunity, it was also very useful to reinforce previous knowledge, and face problems that had not been presented to me before.

(back to top)


## Author

-   Instagram - [@cosmo_art0](https://www.instagram.com/cosmo_art0/)

-   Frontend Mentor - [@CosmoArt](https://www.frontendmentor.io/profile/cosmoart)

-   Twitter - [@CosmoArt0](https://twitter.com/cosmoart0)

-   My personal page - [https://cosmoart.vercel.app](https://cosmoart.vercel.app)

(back to top)


[live-page]: https://interactive-card-details-form.vercel.app

[solution-url]: https://www.frontendmentor.io/solutions/interactive-card-details-form-solution-tKY7SrfIs_