Price component with toggle HTM, CSS and vanilla JS

Hey Mustafa,

You work is very close to the design file and the switch button works well 👏!

From the design point of view, the border-radius of the cards could be bigger, I believe it was 10px on the sketch file. The box-shadow is also lighter, box-shadow: 0px 20px 40px rgba(212, 210, 244, 50%); will looks better.

Your JS code looks nice and clean, however, you don't need to use else if since this.checked only have two values, either true or false. if and else would be good enough.

To make it even shorter

if (this.checked) {
        prices[0].textContent = annualPrices[0];
        prices[1].textContent = annualPrices[1];
        prices[2].textContent = annualPrices[2];
    } else {
        prices[0].textContent = monthlyPrices[0];
        prices[1].textContent = monthlyPrices[1];
        prices[2].textContent = monthlyPrices[2];
    }

Happy coding 🙌!