Skip to content
Submitted 9 months ago

Pricing component with toggle solution using Sass

Pretty Kunene•690
@nonoza
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Pricing component with toggle
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hey coders,

This is my solution for Pricing component with toggle.

It was an awesome but challenging project I did when it comes to toggle, hence it was my first time creating it.I used a checkbox input type and manipulated with js to show and hide the prices. I am currently unsure with the use of id attribute on sass but I have used it but I know it not allowed. It would be awesome to get some input on this.

I added some animation from AOS (animate on scroll :https://michalsnik.github.io/aos/) to the price component too.

An overall, I would like to have some feedback on an overall project.

Thanks Pretty

Community feedback

  • Manoj Kumar Singh•970
    @dev-mksinghPosted 9 months ago

    Hey @nonoza , first thing first, good work there. Congrats on your project completion. Okay so i found something that maybe you might have missed ,:

    • toggling is okay, but when you click monthly or annually still the toggling is working. For example, if you click on monthly once it the bar will come to monthly side, but again when you click monthly then the scroll is going to annually and the content is changing;
    • In my opinion the above mention thing shouldn't happen. It would be better either to write code for this, or you can simply keep it untouched and simply make scroll toggle, and then the content change automatically. That means, once you click on scroll it will move to monthly and content shown will be accordingly and again when you click on scroll then it will move to annually and again the content appears accordingly.

    I hope i made my point clear. Hope this is helpful. Happy coding

    Marked as helpful
    0
    Pretty Kunene•690
    @nonozaPosted 9 months ago

    @dev-mksingh I get what you mean and thank you for your input on a toggle fucntion. I will keep that in mind when building another project that has a toggle.

    0

Please log in to post a comment

Log in with GitHub

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