Skip to content
Submitted almost 3 years ago

Responsive Pricing component- Flexbox, Vanilla JavaScript, Sass

Rudolph•130
@rudyjm3
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive pricing component
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hey all, Feed back welcomed. Bug fixes I could use help with:

  • When the page first loads and user clicks toggle to apply discount it does not apply discount until the slider has to be moved. Then discount function will work when clicked.
  • If toggle is left on yearly billing and I move the slider to another amount it displays the regular price. User has to click the toggle back to monthly then back to yearly to get the discounted rate.

Community feedback

  • Abhik•4,840
    @abhik-bPosted almost 3 years ago

    👋 Hello Rudolph , Your solution is great & the gradient slider is top-notch 🤩🤩🤩 Well Done !

    About the bug fixes you ask I think if you move the toggle change event listener out of moneySliderUpdate function then things might work as expected. Though I saw you have it commented there not sure why . Right now what happens is your toggle event is listened only when moneySliderUpdate .

    Other than that your site looks cool but it's responsiveness is not the same as asked in the challenge , so if you try looking into that then this amazing website can look even better . I also liked your attribution styles. Well done & Please keep up with this solutions 👍

    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