Chris• 740
@chrisbailey85
Submitted
I've never been very good at maths, so I did have a bit of an issue with the yearly switchover. I couldn't figure any other way to change it back to the monthly fees. Any feedback would be greatly appreciated.
Jordan Lewis
@jordanlewis9
All comments
- Jordan Lewis• 100
@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.
2
