Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Simey Credit Card Details

#vue
Simon Goellnerβ€’ 20

@simeydotme

Desktop design screenshot for the Interactive card details form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View Challenge

Design Comparison

SolutionDesign

Reports

Accessibility report (4)
warning

id attribute value must be unique

<div id="app" data-v-app="">
Learn more
error

Images must have alternate text

<img class="icon" data-v-5d206127="" data-v-562398f8="" style="opacity: 1;" src="https://res.cloudinary.com/simey/image/upload/v1660404010/Dev/credit-card/card-logo.svg">
Learn more
warning

Ensures landmarks are unique

<aside class="card-front" data-v-562398f8="" data-v-61bf4339="">
Learn more
warning

Page should contain a level-one heading

<html lang="en">
Learn more

Simon Goellner’s questions for the community

I didn't follow the design completely as the card display was a little un-ideal for my liking (un-realistic aspect ratio).

I'm quite happy with the Mobile view especially!

I also wanted to incorporate some extra features such as animation and card disaply changing when using a Mastercard / Visa / Amex card. (try entering a card begining with 4/5).

Vue really made the reactivity simple.

Community Feedback

P
Elaineβ€’ 11,440

@elaineleung

Posted

Hi Simon, just wanted to say this is amazing, and what a great job 😊

I don't have any feedback or suggestions, but I did notice the issues in your report, so I just wanted to make sure you take a look at them, and most of them are fairly straightforward to fix.

Awesome work, looking forward to more!

Marked as helpful

1


Simon Goellnerβ€’ 20

@simeydotme

Posted

@elaineleung thank you Elaine! Appreciate the feedback!

Yes I noticed all the issues, looks like some things introduced when bundled from Vue related to props being passed into custom elements πŸ€” not sure how to approach that!

Can easily resolve the alt attributes 😊

1

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 160,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!