interactive-card-details-form using html/css/scss/js
Design comparison
Solution retrospective
Hey, I have some questions about my solution,
I couldn't make it so that when I press continue and all the inputs are filled to make the thank you screen appear.
also I don't know why the background images are not loading while the page is being hosted, it loads normally locally (I have the images loading from css with "background-image").
Thank you for checking my answer.
Community feedback
- @abdullah43577Posted almost 2 years ago
Hello there,
It's really great you took on this challenge, I must say this is probably the toughest challenge I've embarked upon ever since I started taking frontendmentor challenges.
After testing your live result, I found some weird things happening. The first one was, in the card input ( where I input the numbers you want to space out into 4 chunks)
I found something really buggy there, If I type random numbers fast in the input, it formats the inputs wrongly. but if I type it slowly it formats it just as expected. I don't know if this has to do with the code you wrote but if you can fix that please do.
Also, you're using the
input addEventListener()
which isn't bad. But it seems you forgot to change the DOM when you click that continue button to render the Thank you message (taking into consideration that all the inputs are valid and filled)Finally, it seems you also forgot the purple background where those cards are just floating above to the right and to the left. ( I hope you understand what I mean here)
After doing all this, you should be fully done with the project. Good luck. Just in case my result could help inspire some changes in your code, please take a look here:
https://github.com/abdullah43577/interactive-card-details
Mine isn't perfect as well. but I hope it helps you one way or the other.
0@YousefKhalid-iqPosted almost 2 years ago@abdullah43577 Thank you for responding, yeah i asked all those questions in my feedback box before submitting but somehow they didn't get sent with my answer, I'll start with the 4 number error and see how it goes from there.
0
Please log in to post a comment
Log in with GitHubJoin 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