Overengineered Card

Since I go to college🏫, I only get little time to code 🧑‍💻 (also, I've got laziness 😴 :D). So, I completed this project 🤏little by little. So, it took me a while🕚 to complete this even though it doesn't look that big apparently.

I wanted to make this page a bit realistic🤖. So, I considered this page as a website's order summary page(obviously).

• So, when you click the 'proceed to payment' button, it'll redirect you to a Stripe payment interface/page 💳. (yep, there's in fact a backend to this page. Though, this is my first time using Stripe. So, expect rookie mistakes. Also, I'm pretty new to backend stuff as well).

• When clicking on the button that says 'change', it'll open a dropdown 📃 and subscription plan can be changed by using that.

• Since the redirection takes a bit of time, I added a conventional loading spinner ⭕ inside the button.

• Furthermore, to give a more refined user experience, I disabled all the buttons until they are usable(i.e. until the js is loaded). Also, while the page is waiting to redirect, I disabled both the 'proceed to payment' and 'change' button, to avoid multiple redirect requests and to disable the ability to change the subscription plan after clicking the 'proceed to payment' button, respectively.

• If the redirect request is failed⛔, don't worry, a snackbar will let you know that 😇.

• I've always wanted to recreate the 'ripple effect' that you can see on a material design based button when clicking on it. So, I did that. Though I'm not completely happy with the end result, I guess my version is fine🤮. Maybe I'll update it in the future ⚰️.

• Also, added the 'Blur-up image loading' feature. Which is basically showing a blurred version of the actual image until the image is loaded. You can see this in whatsapp, facebook, and medium, etc.

• To see the blur-up image loading clearly/slowly🐌, set the throttling to slow 3G. In chrome - DevTools > Network Tab > change from 'No throttling' to 'Slow 3G'. If it is still not working, try disabling cache as well. Network Tab > Disable cache ✅

• This site is compatible with IE10 and IE11. Thank god that IE is retired👿. If there was an award for the worst DX, I would give it to making sites for IE. Oh, such a nightmare! I feel like a masochist (then y did u do this? idk ¯_(ツ)_/¯ for 'fun' I guess).

• I've tried to give attention👀 to accessibility as much as I could. Though, I'm not confident💪 if I did everything correctly✅ (cus I know that there are a lot of things I've got to learn(and unlearn) when it comes to accessibilty).

• The Stripe payment interface will not process any payments because it's in the test mode. Because I don't have all the documents that are required to be eligible to make actual payments on Stripe. Also, the payment currency 💵 is not in dollars as in the design file, because, there's restriction🚫 for that as well.

• I've learned 📚😵‍💫 a lot of stuff while doing this project. It's all in the README.md file. So, I highly recommend you to check it out.

The css and js definitely need some refactoring 🗑️. Because, I think I overcomplicated🤓 it in some places. Also, I didn't really consider performance as a factor in the Blur-up image feature. i.e. assets aren't optimized.

🔊 Shout-out

Thanks to @tediko profile for sharing that there is JSDoc like the Python docstring. Even though I haven't used it in this project, I'll certainly be using it on the upcoming vanilla js/ts projects. Also, thanks to @grace-snow profile and @AlexKMarshall profile for helping me out on Slack. I really appreciate you guys' help :)

---

TL; DR

✨ features:

• Blur-up image loading
• Button ripple effect
• Stripe payment
• Fluidly responsive
• Conventional loading spinner on button
• IE10, IE11 compatible
• Change subscription plan dropdown
• Error snackbar on request failure
• disable buttons until javascript is loaded
• Fully keyboard accessible

If you are interested to know more about this project, check out the README.md file.

If you could give any feedback on my project, I would really appreciate it 🤗.