![](https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_900/Screenshots/niqmskoquhqt871xxbzc.jpg)
Responsive card and checkout pop-up with VANILLA JAVASCRIPT/CSS
Design comparison
Solution retrospective
Hi, guys!
This is my solution to this challenge. But if you take the closest look, you'll see that it is a bit different from the one proposed.
Since I am learning Javascript I used this challenge to practice it. I know that are some challenges here that have Javascript, but using this one wasn't in my plans when I started doing it. It turns out to be something bigger than what I expected, and I still have some ideas to implement, but since I can not see the final version of it yet I decided to publish it already before it differs a lot from the website challenge. But I will keep using this template to practice some Javascript.
I know that the CSS file is too big, because of it, I will use SASS instead so it will be easier to maintain.
This is what I implemented:
- Change between dark and light mode
- Interact with the 'Change' button on the card to select the type of the plan (Annual Plan or Monthly Plan) and therefore see its price -Click on the 'Proceed to Payment' button and go to a checkout pop-up where the user could enter their details and change the Billing Cycle -Go back to the card by the 'Back' button
The dark mode was inspired by some solutions from @correlucas who makes very creatives ones
All feedback is appreciated!
Community feedback
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