Interactive pricing component using Html, Css and Js

Community feedback

• 

  Davide•1,725

  @Da-vi-dePosted over 3 years ago

  Hi Pranav, even though it seems an easy challenge it was a bit tricky one! The card doesn't look very good on desktop, it's not proportioned. There's something about JS code i don't like, too many switch staments.

  • One switch it's all you need to get the job done but first thing first i would change the min, max, value and step attributes. min=0 max=100 value=50 and step=25, we need to change content 5 times, value 50 let the bar position right in the center, the step is 25 so you can move perfectly the bar five times.

  • Then in the switch statement the case is the value like so: case 0 case 25 case 50 case 75 case 100 in each case the content can be changed, especially the price, all we need is a global let variable with the price and a function to calculate the discount, in each case the function is called and it just needs the argument which is the price you want the discount applied.

  • It's strange that happens in Chrome browser, you can try to select the entire input like so: input[type="range"] rather than the class and see if you can solve this way.

  Hope it helps, feel free to take a look at my solution, i didn't explain everything very well. Happy coding :-)

  Marked as helpful

  1

  ---

  

  Pranav•500

  @pranav1597Posted over 3 years ago

  @Da-vi-de thank you very much for the feedback, yeah I agree js code is kinda messy with switch statements. I will fix it. Happy coding :)

  1

  

  Pranav•500

  @pranav1597Posted over 3 years ago

  @Da-vi-de Hey, I used some of your javascript code to fix it and also fixed the background color of the range slider. Thanks again for the help. How does it look now?

  1

  

  Davide•1,725

  @Da-vi-dePosted over 3 years ago

  @pranav1597 It looks good, the functionality is perfect, in Chrome as well.

  I'm glad it helped, happy coding :-)

  1

  

  Pranav•500

  @pranav1597Posted over 3 years ago

  @Da-vi-de Thanks, Davide. Happy coding :)

  0