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

Flexbox and vanilla JS

@cvargas31

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


This is my solution, i will said im 85% done with the challenge im only missing the logic in how change the price of the current value of my slider, because once you click in the toggler it will change to the annualy fare but with the initial value of 8$

Community feedback

hardy 3,660

@hardy333

Posted

Hey nice solution , good job.

Few suggestions.

  • try to add box-shadow on range slider thumb, as in design files.

  • bottom section, features list on desktop view needs to be align left side.

  • call to action button needs hover effect.

Other then those design issues everything looks super good and clean.

One suggestions about logic is that .

When switching to yearly billing you are increasing the price instead of decreasing it by 25% ... try to change it .

Marked as helpful

3

@cvargas31

Posted

@hardy333 Thanks bro, didnt notice about the box-shadow and the CTA hover. will implement that

0
Cường 845

@docuong0912

Posted

Wow, what a clean code, how do you make the range input's progress bar like that, and the automatic adjust the range input, mine is so glitchy, can you check-out my code and give me some advice :)

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