Interactive pricing component

Hi, Mahdi - Firstly, this interactive scroll you created is quite impressive. That's a lot of logic to figure out! I'm certain that building it this way was not a waste of time because you probably learned a ton.

One way to shorten your code (and make your app more accessible) is to leverage functionality that the browser gives you for free. In this case, instead of using a <div>, I might consider using the native <input type='range'> as your interactive scroll.

Your HTML would look something like this:

<label for='scroll'>
     // 'min' and 'max' set because you have 5 possible values
     // 'step' will cause the scroll to snap from value to value
     <input type='range' id='scroll' min='0' max='4' step='1'>
</label>

And then in your JS:

// you can create an array that holds all your pricing options
const PRICING = [
{ pricePerMonth: 8, pricePerYear: 72, pageviews: '10K' },
{ pricePerMonth: 12, pricePerYear: 108, pageviews: '50K' },
 ...etcetera
];

// select your range input and listen for changes
const scroll = document.querySelector('input[type=range]');
scroll.addEventListener('change', () => {

// set your various innerTexts using your
// PRICING array and range input values
     PRICING[scroll.value].pricePerMonth
     PRICING[scroll.value].pricePerYear
     PRICING[scroll.value].pageviews

});

// you could also add an event listener to your checkbox,
// and update your pricing each time that value changes

I hope this makes sense! I see you're already using a checkbox and a button, so you're no stranger to using native browser inputs. Please feel free to reply back if anything I wrote is unclear. Have fun!