Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

mobile first pricing component, vanilla CSS, JS

Jurijus 300

@juryous

Desktop design screenshot for the Interactive pricing component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


feedback appreciated

Community feedback

Bonrey 1,130

@Bonrey

Posted

Hello, Jurijus! Your component looks great! 👏 However, there're a few little bugs that I noticed:

  • When I toggle the switch from "monthly" to "yearly" billing, the text / month doesn't change to / year;
  • Also, the price should be calculated for the yearly billing the following way: monthly billing * 12 * 0.75 = monthly billing * 9. (I'm taking the discount into account here.) Now, it works somewhat strangely.
  • Just a minor suggestion: change your toggle switch background color when it's activated (set on yearly billing) rather than on hover.

Good luck with your coding! You're doing great! 🌟

1

Jurijus 300

@juryous

Posted

Hello, @Bonrey ! I haven't found anything that specific in the readme file, it only says that 25% discount should be applied to all prices. Your solution is great, thank you for the feedback!

0
Bonrey 1,130

@Bonrey

Posted

@juryous yeah, it's just pure logic. Normally you would pay 12 times more for one year than for one month 😅

0

Please log in to post a comment

Log in with GitHub
Discord logo

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