Submitted about 2 years ago

Responsive card and checkout pop-up with VANILLA JAVASCRIPT/CSS

Cristina Kelly• 140

@cristinakellyt

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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

Adriano• 34,090

@AdrianoEscarabote

Posted about 2 years ago

HI Cristina Kelly, how are you?

You did an excellent job in this challenge, the dark mode was very good! The idea you had to customize the button to interact with the plan type was very creative!

I have a tip:

I noticed that the page has a scrollbar to remove, we can do it this way:

body {
    /* padding: 2rem; */
}

As the main tag has a height of 100vh putting a padding on the body would leave a scrollbar on the page!

The rest is really good!

Hope it helps...👍

Marked as helpful

Cristina Kelly• 140

@cristinakellyt

Posted about 2 years ago

@AdrianoEscarabote Oi Adriano, obrigada pelo feedback!

Verdade! Nao tinha percebido isso, muito obrigada 🇧🇷

Adriano• 34,090

@AdrianoEscarabote

Posted about 2 years ago

@cristinakellyt Sem problemas ahahah não sabia que você era brasileira, desculpa

Atif Iqbal• 3,200

@atif-dev

Posted almost 2 years ago

Hi, your creativity is really NICE🥰. You really did a fantastic job by introducing new features. Everything is AWESOME, just remove error about href that is generated by frontendmentor report.

Buddyyy• 40

@semi26

Posted about 2 years ago

Hello Cristina, Your amazing you took this challenge and made it your own. That is brave and so awesome. The design is really good, great work and you took it another step up by adding some cool new features. I am very inspired by your work. I would love to learn how you crafted your skills and what are some of your learning habits. I am also learning JavaScript. I am at the beginning stage I don't have a strong knowledge any advice? I have a stronger knowledge of HTML and CSS. Thank you for your time. best of luck with your coding journey.

Cristina Kelly• 140

@cristinakellyt

Posted about 1 year ago

Hi, @semi26! Sorry about the long time to answer you, I hope that you are still on this journey! Thank you a lot for your comment! Everything I know about Javascript is from an online course that I did in Udemy. If you have interest, I can send the link! My advice would be to keep constancy in studies, doesn't matter if things are difficult, just keep going. Also, the challenges that frontendmentor.io provide are really good to learn and practice!

Azeem Saifi• 370

@saifion33

Posted about 2 years ago

Hi cristina.

Your solution is awesome, you done something new. That's appreciable.

But i don't understand why you use href attribute with buttton.

<button id=`btn-change` href=`#`>Change</button> that's not allowed in HTML.

Happy Coding 😊

Cristina Kelly• 140

@cristinakellyt

Posted about 2 years ago

@saifion33 Hi, Azeem!

Thank you so much for your feedback!

Yes, actually it was because I was using it as an <a></a> when I started to code this, but I forgot to delete it when I changed for <button>

Please log in to post a comment

Join 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