Project

Interactive Credit Card Component

Elevating the user experience of an interactive credit card component with HTML, CSS and JavaScript.

About the project

Frontend Mentor Interactive Credit Card Component

Skills + languages

HTML, CSS, JavaScript

Overview

See it on Github

Challenges

The implementation of advanced JavaScript functionality to dynamically reflect the added content (such as credit card number, name, and CVC) on the card image itself, while not allowing the user to input too many numbers or the wrong characters.

Approach

I employed the use of placeholders to ensure that the card image displayed relevant content when no actual value was provided. I also developed a custom function that restricted user input to numbers only and enforced character limits, enhancing the overall user experience and data integrity.

Interactive credit card component that shows the component on mobile
Interactive credit card component that shows the name reflected on the card on desktop

projects

See projects
Interactive credit card component that shows the name reflected on the card

Frontend Mentor

Interactive Credit Card Component

Creating an interactive credit card component using HTML, CSS and JavaScript.

See Project
The social proof page on desktop, showing testimonials of buyers and 5-star reviews

Frontend Mentor

Social Proof Page

A challenge that involved building a social proof page with Flexbox and Grid.

See Project

contact

I’m always open to having a chat and discussing new opportunities. Send me an email at kerry.fedev@gmail.com.