Interactive Pricing Component Solution

I started by creating all the HTML elements and assigning them classes. Next, I started to work on the above card section, where I styled the heading, subtext, and the background image. Then, I moved onto the card itself. I started by figuring out things like the padding, border radius, and box shadow. After spending some time playing around with the values for the properties, I moved onto the top section of the card. I styled the price, span, and views, and added some margins to get the spacing right. I spent some time learning about sliders and toggle switches. I used a checkbox for the HTML, and then spent some time creating the toggle switch. Afterward, I worked on the JavaScript, where I used a loop and function to create the functionality of changing the price based on the step value of the slider. Lastly, I added the functionality of the toggle switch, where I added the ability to switch between monthly and yearly pricing. Once I finished, I tested the website on multiple browsers and used the built-in device size emulation feature to view what the website would look like on different devices.