https://github.com/kjabeen/interactive-card-details

Interactive-Card-details
https://github.com/kjabeen/interactive-card-details

background-clip background-origin code focus foreach form html-css-javascript ifelse innerhtml input linear-gradient match preventdefault replace test which

Last synced: about 1 month ago
JSON representation

Interactive-Card-details

• Host: GitHub
• URL: https://github.com/kjabeen/interactive-card-details
• Owner: KJabeen
• Created: 2023-09-29T20:17:08.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-09-29T21:47:51.000Z (over 1 year ago)
• Last Synced: 2023-09-30T01:28:15.502Z (over 1 year ago)
• Topics: background-clip, background-origin, code, focus, foreach, form, html-css-javascript, ifelse, innerhtml, input, linear-gradient, match, preventdefault, replace, test, which
• Language: CSS
• Homepage: https://kjabeen.github.io/Interactive-Card-details/
• Size: 140 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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 improve coding skills by building realistic projects. 

## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Screenshot](#screenshot)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

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

#### Desktop

![image](https://github.com/KJabeen/Interactive-Card-details/assets/126177876/ad099946-ebfe-4f9d-abb1-929fe77b9d86)

##### Error

![image](https://github.com/KJabeen/Interactive-Card-details/assets/126177876/e407b8f3-9c1d-4ce4-a71d-be73a01b61ca)

![image](https://github.com/KJabeen/Interactive-Card-details/assets/126177876/015b9755-c119-45fe-add9-ae1d1f23e950)

##### Success

![image](https://github.com/KJabeen/Interactive-Card-details/assets/126177876/676007e7-11ca-412b-86a1-6bfdd7b8b55e)

#### Mobile

![image](https://github.com/KJabeen/Interactive-Card-details/assets/126177876/ce49f67d-04c7-4d37-9995-152b58d3538f)

#### Error

![image](https://github.com/KJabeen/Interactive-Card-details/assets/126177876/ce64eacd-fa65-4969-a67c-b13d17cfb330)

##### Success 

![image](https://github.com/KJabeen/Interactive-Card-details/assets/126177876/50a60b7b-99a3-44bb-ad79-76d170c405fb)

### Links

- Solution URL: [(https://your-solution-url.com)](https://github.com/KJabeen/Interactive-Card-details))

- Live Site URL: [(https://your-live-site-url.com)](https://kjabeen.github.io/Interactive-Card-details/)

## My process

### Built with

- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- CSS Grid

- Linear-gradient and border radius for input focus

- Mobile-responsive workflow

- Javascript

- preventdefault

- replace

- match

- test

- addeEventListener

- IfElse

- Foreach

- which

-