Responsive details card form using tailwind css

Hello everyone👋👋 this my solution for the interactive card details form🚀🚀

Things that I've learned:

1. I've learned lots of dom manipulation techniques✨✨
2. I've learned a lot about how the input fields✨
3. How to insert spaces programmatically in an input field⚙⚙
4. How to make the max-length attribute work on input fields with a type of number✔✔, which doesn't work by default.
5. I learned a few things about regular expression and how we can add then into the javascript.🚀🚀

Question:

1. I am not that good at javascript as I am still learning the language and this was the first time that I've took time to make this kind of project which requires a lot of dom manipulation. So, I'm not very confident the way I wrote my Javascript code. Especially the way I manipulated elements in my javascript code. So I'm looking forward to have a review from you on my dom manipulation and How I can improve it🌝🌝.
2. Secondly I want to know if there was a better way for me to place all those texts on the images (the back and front card img).👍👍 I used position: relative on the cards and then placed the texts using position: absolute. Is there a better way to do it?

frameworks used: Tailwind CSS🚀🚀

Follow me to be a part on my journey on completing all of the free frontend mentor challenges🎉🎉✨