Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Pricing component with toggle using React, react-switch library

nikoProg 120

@nikoProg

Desktop design screenshot for the Pricing component with toggle coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


This was the first app where I could see how react can be a shortcut for development. I still had problems with mostly CSS. Some of them are more, some less visible.

  1. "learn more" button, upon clicking stays completely white and its state won't change back to normal until clicking a different element.
  2. Perfect placement of elements, I could not make the middle card larger than others, but also keep all elements perfectly aligned.
  3. I used a library "react-switch" for the toggle. So, I could not set a gradient as its color. I hope this is not too much of a problem. Their API only supports hex colors.
  4. What is the best way to put a new favicon using react?

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

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