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

Community feedback

• 

  T

  Grace•31,250

  @grace-snowPosted almost 3 years ago

  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.

  Marked as helpful

  1

  ---

  

  Aakash Verma•6,710

  @skyv26Posted almost 3 years ago

  @grace-snow Thank Grace, I got your point, for next submission I will keep in mind. I am really Happy that on frontend mentor platform, I am improving myself day by day.

  0
• 

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  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

  Marked as helpful

  1

  ---

  

  Aakash Verma•6,710

  @skyv26Posted almost 3 years ago

  @anoshaahmed Thank you so much Anosha, I will update it soon.

  1
• 

  P

  Remus D. Buhaianu•3,125

  @MiculinoPosted almost 3 years ago

  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!

  Marked as helpful

  1

  ---

  

  Aakash Verma•6,710

  @skyv26Posted almost 3 years ago

  @Remus432 Hi! Remus, Thank you for your feedback. As I always said, I am learning. I have some doubts.

  1. Yes I wrote 1000+ lines in SCSS. I could write less, but how I would I assure responsiveness of design. Because It's always a been kind of confusion for me. I made solution for >=320px <=600px then target 600, 700, 830 tablets and then 1024, 1280, 1366 and 1440 screen. I did just because to make design consistent throughout all width screen.

  2. background not stretch from one to other. Ok please let me know the screen width you are using to check and I guessed why it is happening.

  3. I target the output folder to css, rather than generate output in same folder i used --watch property using SASS, i did intentionally , because I used sass for first time, i want to later add some custom properties by parsing final output to css auto prefixers.

  Please feel free to give more feedback or clear my doubts. Because I am here just because of great mentors like you. I really wanna reduce the size of css. by writing less.

  0