Skip to content
Submitted about 2 years ago

Pricing component with toggle using React and TypeScript

react, typescript, accessibility
Doston Nabotov•950
@dostonnabotov
A solution to the Pricing component with toggle challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey, there! 👋

🤖 This is my solution for the Pricing component with toggle challenge using React and TypeScript.

  • Built switch toggle only using CSS
  • Dynamically generated data using JSON
  • CSS custom properties are always here to save my day
  • Learned not to put centering styles in the <body> element, but rather in the <div id="root"> in React. It took me some time to figure that out

❓ Questions:

  • How can I improve the accessibility of the switch toggle? Because it's hard to know whether it's set to "annually" or "monthly" except for the visual representation.
  • I used the useState hook to pass down the value to the Toggle component along with its function to update its state. Is it a good idea to implement it this way?
  • Which one would have worked better to pass the data: State or Context? And, why?
  • And, I am open to other suggestions.

📈 Updates:

  • Based on received feedback and suggestions, improved the accessibility of the website.

Thanks for reading. Really appreciate any feedback and advice!

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Doston Nabotov's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord