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

Frontend Mentor - Interactive card details form

@ogabrielrodrigues

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

Community feedback

@rickyhewitt

Posted

Great work!

One thing I would note is that the desktop design seems to be incorrect, it is perhaps only using the mobile one.

The other thing I noticed is that you could avoid duplication in your javascript for eventhandlers.

For example, your existing code:

document.querySelector("#name").addEventListener("keyup", checkErrorsOnPress);
document.querySelector("#number").addEventListener("keyup", checkErrorsOnPress);
document.querySelector("#mm").addEventListener("keyup", checkErrorsOnPress);
document.querySelector("#yy").addEventListener("keyup", checkErrorsOnPress);
document.querySelector("#cvc").addEventListener("keyup", checkErrorsOnPress);

Could be replaced with either event delegation or a loop.

const elements = document.getElementsByTagName("input");
for (let i = 0; i < elements.length; i++) {
elements[i].addEventListener("keyup", checkErrorsOnPress);
}
0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord