All solutions

My second attempt at a React-Tailwind project, so still playing around and finding my feet!

I didn't really enjoy this challenge tbh... The figma file has loads of uneven sizings / spacings / changes between breakpoints, so the Tailwind part of this challenge took ages longer than it should have done for such a small component.

I'm not happy with how I'm looping through the different styles for each category at the moment and will likely revisit that, maybe with css modules or leveraging cslx instead. The rest will do for now

NOTE: I intentionally deviated from the design in places to improve the accessibility.

I've added some To-dos to the Readme, including:

• Splitting form inputs into their own components
• Improving the form validation, especially on the password field
• Creating some reusable lists of tailwind classes
• Making all text content content managed

I'd particularly like suggestions on how to validate the password field against the individual regex patterns with React-Hook-Form (i.e. show only the failing criteria).

What are you most proud of, and what would you do differently next time?

Glad to have added notes to hopefully help others.

What challenges did you encounter, and how did you overcome them?

No challenges.

What specific areas of your project would you like help with?

Happy to explain my choices.

No specific questions, but as always feel free to suggest improvements or question why I've done things the way I have.

I would usually create spacer variables for use on things like font-sizes and paddings, but didn't for this one as it's so small and as I don't have the original design files. This means I am just guessing on sizes - hence random 'magic numbers' in the scss

For this challenge I used:

• Screenreader only text
• Pseudo-elements for background images and borders
• The zwnj; method to make the stats list keep it's semantics even using Voiceover in Safari
• Scss and BEM naming

Using accessible component from: https://github.com/scottaohara/a11y_styled_form_controls

This repo should provide explanatory notes on how and why the toggle was built like that.

Includes:

• fully accessible toggle switch
• javascript to toggle a class to show/hide the correct prices
• responsive (clamped) font sizes
• mobile first design

Ideally, this sort of component should read dynamic data and insert the prices in rather than hard-coding in HTML. But I don't have time for all that today!

Let me know if anything's broken :)

This is designed to be a guide for one way to do this challenge mobile-first, using scss variables and some more advanced css techniques like nth-child.

I used a VS Code extension to compile the scss.

Note: In a real project I would work with the designer to fix the accessibility issues or color contrast and font sizes.

Any questions or suggestions are welcome.