Interactive Pricing Component. Made with HTML-SCSS-JAVASCRIPT + MFA

Hi

How do you expect screenreader users to understand which price is active on this? A checkbox implies an on/off state. It’s ideal for yes/no answers or on/off toggles. It’s not really ideal for a switch like this that has has two distinct and labelled states - how would I know whether checked means monthly or annual? It’s very unclear. In these cases it is always better to use radio inputs.

The other issues I see with this are

• again screenreader content order and content change announcement. I think some aria-live attributes are needed, or even a screenreader specific message
• header always goes outside of main, not within it. It is it’s own landmark
• similar this should not have an article within it, or sections. It’s all one related piece of content
• if using a button to submit the chosen options this should all be a form.

This looks good Aakash great job. One thing I can recommend is adding a space between "Sign-up for our 30-day trial." and "No credit card required." lol

Hey @skyv26 , always nice seeing more of your projects here on Frontend Mentor!

I appreciate how you always try to make your solution as pixel-perfect as possible! ;)

Here are my suggestions / observations based on your design:

• There shouldn't be a 0 value on the slider as far as I know. The first value on the slider should be 10k page views at 8$ (I might be wrong about this, please do double check to make sure)

• On laptop resolution, the background image doesn't fully stretch horizontally from one end to another of the body's width

• Try to reduce the card's box shadow a bit - reduce the shadow opacity and maybe also tweak the blur amount too

• The folder structure was a bit confusing because you have a sass folder and a css folder but the main sass file is actually inside the CSS folder

I have to ask you something: Did you actually write over 1000 lines of raw SCSS code?? That's incredible!

As developers, we all should strive to write clean, efficient, maintainable, and reusable code with the least amount of lines of code that's realistically possible. An educated guess from me would be that the design for this project can be completed in less than 500 lines of SCSS code.

I like the way you write and structure your code. You're quite a competent developer, no doubt. But you shouldn't do two things at once while working on such projects: coding and writing novels because that's how long your lines of code can get to the point that it feels like reading a page from a novel :))

I'm looking forward to seeing more of your solutions here on Frontend Mentor. Keep up the amazing work!