@jordanlewis9
Posted
Hello!
I'm building this project right now, and I came to the solutions for a little bit of inspiration. Yours looks great! I like the checkbox method for toggling the mini-slider, and how much smoother your slider feels than mine right now!
As for your question, one thing I'm considering regarding the back and forth in the yearly prices is to have a "state" variable outside of the event listener. Basically, it's default state is monthly, and when checkbox is clicked, update that to yearly, and so on and so forth.
One thing you could do is, as was done with the monthly costs, have an object that contains each of the yearly prices. So when the user changes from monthly to yearly, you could toggle the change from one object to another, and call the function that renders the price on screen, passing both the current value and the current pricing object being used. IE
const monthlyCost = {...}
const yearlyCost = {...}
if (checkbox.checked) {
updateText(value, yearlyCost)
else {
updateText(value, monthlyCost)
}
Or, if you want to automatically re-calculate yearly to monthly, it'd be (4/3 * yearlyCost) / 12, but there may be some decimal issues with that.
@chrisbailey85
Posted
@jordanlewis9 thank you that's a good idea. I might revisit it once I've finished the current challenge I'm doing.
To be honest I found the slider coloured background difficult to do, my first few ideas didn't work. My initial plan was to use the before pseudo-element, then set the width to the range value, but after a bit of Googling I found out you can't access pseudo-element using JS.
