moitadev/pricing-component-with-toggle

Frontend Mentor - Pricing component with toggle solution

This is a solution to the Pricing component with toggle challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

Screenshot

Links

• Solution URL: Live
• Live Site URL: pricing-component-with-toggle

My process

Built with

• Typescript
• CSS custom properties
• Flexbox
• React - JS library

What I learned

Good way to learn new ways of doing the "same thing", using useState to change prices of plans was something pretty cool to do.

Althoug I could achive the same results using only html and css, I chose this specific challenge to practice react, and ended up pretty happy with the results.

const [price, setPrice] = useState(false);
  const handleChange = () => { 
    
    setPrice(!price); 
    
  };

Creating a single card component for all of the presented plans was also something I was looking forward to do when I first saw the challenge.

<Card className="card-secondary left" plan="Basic" price={price ? 19.99 : 199.99} storage="500 GB Storage" users="2 Users Allowed" sendable="Send up to 3 GB" />

Continued development

I not completely satisfied with the results, I really think I can do a few tweaks here and there for all screens size.

Author

• Website - moita.me
• Frontend Mentor - @moitadev