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

Interactive card details form (Tailwind + Vanilla JS)

@hammichalkovic

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

Solution retrospective


What are you most proud of, and what would you do differently next time?

  1. I've learned how to use pseudo-elements (::after) effectively for error text notifications.
  2. I've started to use CSS custom properties with setProperty() JS method for styling forms when error focus events fire.
  3. I've found a includes() JS classList method and used it for writing event conditions

What challenges did you encounter, and how did you overcome them?

While I've deployed the project on GitHub, it wasn't showing the background images inserted into index.html with bg class with an arbitrary value (kinda, bg-[url('./images/bg-cover.jpg')].

So I've finally solved it through writing vanilla css rules/media queries for the elements ;)

What specific areas of your project would you like help with?

It would be great, if someone help me to optimize the error notification algorithms of the main form.

Community feedback

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