Hey @buneeIsSlo good work on your first challenge! 🙌 And not an easy one at that! I found this one very fiddly and it took me a while to sort things out.
I wanted to give you some feedback as I know I felt quite nervous about submitting my first few challenges - and still do! Heres some comments for you to consider:
-
A few HTML/CSS things - firstly, great use on semantic HTML elements for the toggle and input. I think the relative positioning on your
section.toggle
is forcing the whole section over, and it should ideally be centered. Adding somemargin-left
andmargin-right
with the valueauto
should fix this. -
Regarding the input the colored bar is not updating when the slider moves, and I'm afraid the figures/plans get all confused when I try changing things, and the slider isn't really working properly.
There may be better solutions, but to create a custom scale I created an array in my JS like this:
const plans = [
{ views: "10K", price: 8, discount: 6 },
{ views: "50K", price: 12, discount: 9 },
{ views: "100K", price: 16, discount: 12 },
{ views: "500K", price: 24, discount: 18 },
{ views: "1M", price: 36, discount: 27 },
]
Then used the input attributes to set the number of steps to the length of the array using something like this: min="0", max="4", step="1" on the input. This enabled my to step up the values in line with the requirements. This then provided the basis for all the JS functionality.
I feel like I've explained this poorly, but if you have a Google you'll find some good examples. It's a lovely elegant solution when you see it working well. My solution may also help a little: https://github.com/dwhenson/frontend-mentor/tree/master/22.%20interactive-pricing-component
- Lastly, on CSS I couldn't see any outline or tab styles when I tab through the document, this is a small point but makes the page much more usable. I just add something like this to all my projects which goes a long way to fixing this:
:focus-visible {
outline: 3px dotted currentColor;
outline-offset: 0.25rem;
}
:focus:not(:focus-visible) {
outline: transparent;
}
Please just give me a shout here or on Slack if any of the points above are not clearly explained. I've done a few of these challenges now and have really seen myself improve over the last few months so I would encourage you to keep up the good work!! 👍
Cheers 👋