Mobile First Interactive Pricing Component Using Vanilla JS/CSS
Design comparison
Solution retrospective
Hi, just completed this challenge let me know what you think, i think it hits pretty close to the mark, would love to hear a better way to make the JS part of the code, i feel like a repeated myself a little too much (against the DRY rule what a sacrilege) i'm sure somebody will tell me a better way but it does the job, changes the price for every plan it applies the discount if clicked, anyway have a good day.
Community feedback
- @steppan26Posted over 3 years ago
Hi Luis, great job on the project. I have just completed this project myself too.
The layout and responsiveness of your project looks good to me, I just think it needs a little more love on the little details for the styling (i.e. the colour of the price should be the same blue as the heading, instead of black).
Although there's not really anything on the project sheet about it, which I guess means it's a stylistic choice, I would look at adjusting the slider to have only the 5 values provided (as opposed to a range from 1-100). This can be easily changed on the HTML sheet within the <input> tag, which would then allow you to use an array within javascript to be able to create some cleaner code.
It's great to see how other people solve the same problem, feel free to take at my solution and see if you get inspired :-) I'm no expert and I'm in the process of learning web development myself, so I am open to being corrected if anyone feels that my feedback could be better.
1@Comet466Posted over 3 years ago@steppan26 thank you for the feeedback steppan, yeah i miss the color of the price just put black and its suppose to be blue, about the slider i think that you're right in my slider you go way too fast through the first 3 price tags i will refactor the code as soon as i can, i saw your solution too and i looks amazing good job right there
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