All solutions

• Added simple Intro transition animation
• Shows a snackbar on request failure
• Shows a simple loader while loading for advices
• Fluidly responsive text
• Keyboard accessible
• Screen reader accessible
• Progressively enhanced

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.

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 :)

✨ 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 🤗.

I know the tab switching state change and tablet version of the site is kinda odd, but I figured if I don't publish this now, I would try to make it "perfect" and in the end what will happen is that after a lot of days the only thing that'll change would be some pixel values and some other tiny unimportant stuff.

• This was my first time using an experimental feature of Vue, the ref sugar. Which is, if you know the Composition API in Vue, it helps us use the ref like reactive. i.e. the .value can be omitted by changing ref into $ref and additionally, it doesn't need to be imported.

• I learned the trade-offs of using experimental features because a lot of the time the site deployment failed because of some package's patch or version updated.

• Instead of using the Composition API setup function in the script, I used script setup which will drastically reduce the boilerplate code and gives clear distinction between Options api and Composition api code.

• One additional thing I added is, the tab's active state will be stored in localStorage. So, even after refresh, it'll have the same active state. Also, I tried to make it responsive to smaller devices.

• Most of the time when I use Vue cli, my laptop gets laggy, but since I used Vite to scaffold the project, it was a smoother and 'non-laggy' experience. I'll certainly use it in the future projects.

• Things I've learned while doing this challenge are in the README.md btw.

I'd love to hear your feedbacks and criticisms on my take 😀

It was a new finding to me that there was a <progress> bar element in html. But it was very hard to customize it. Had to deal with a lot of vendor-prefixes.

• If you are opening this webpage on firefox you can see the progress bar animation. On chrome or any other browsers though, it won't work.
• This is the first time I used the browser header background color meta tag (which basically changes the background color of the browser's header bar on mobile devices).

<meta name="theme-color" content="#0c122c" />
<meta name="apple-mobile-web-app-status-bar-style" content="#0c122c" /> //👈 for safari

A Dumb Mistake

If you open the repo of this webpage, you can see that there are some npm package files and procfiles and stuff. Why do you need that? well... I wanted to make the progress bar actually show how much storage left on their computer when someone visits that page. So I installed some node modules that do that (at least I thought it would do that), and hosted it on Heroku. I thought it was possible to do this. But, turned out, I was just being stupid.😐 However, you can do that if the backend code is running on your computer. If you want to see it happening, you can clone the repo and install the node modules (npm install). And type node node. and then if you open this webpage, you can see that it is working. Hoo...

I thought I could finish this in a few hours, so I thought then why not make it IE10 and IE11 compatible and why not not use flexbox and grid. I know it's kinda stupid. But, that's what I did. But it took me more than a day to complete it. So um... there's that. And oh Now I know that I need to be more grateful to flexbox and other modern css thingies. Gosh, without them things would be so damn hard. You have no idea how many hours I spent thinking about how to make the card both horizontally and vertically centered. No joke. However, I learned a lot in the process that I'm glad about. Like:

• How to use tabindex to make unfocusable elements focusable.
• The slightly disappointing fact that you can't use ::pseudo classes (::before and ::after etc.) on elements like <img>, <br> and <hr>
• The astounding discovery that there is in fact a background-position property in css. Thanks @Atharva-Shandilya for that. Hope it's okay that I snooped around your Github repo and profile without permission.
• Reminding that I can use multiple box-shadows by separating them by commas.
• And finally I learned How the top:50% left:50% transform: translate(-50%, -50%) trick works.

I don't have a specific question to ask but, any feedback on the project or code would be greatly appreciated 😊.

And yeah there are some animations too!

I took my Liberty and:

• Added some animations
• Added some hover effects
• Made it compatible with IE11

Finding the right filter color for the image was hard. Anyone knows a better way to do it?

Any feedback on the code would be helpful.