pricing-component-with-toggle

Pricing component with toggle

Solution : Live Site URL

This is a solution to the Pricing component with toggle challenge on Frontend Mentor.

The challenge

Your challenge is to build out this pricing component and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Your users should be able to:

• View the optimal layout for the component depending on their device's screen size
• Control the toggle with both their mouse/trackpad and their keyboard
• Bonus: Complete the challenge with just HTML and CSS

Built with

• HTML
• CSS
• CSS Grid
• CSS Flexbox
• JavaScript

Experience, Challenges and Learning

Challenge was extremely enjoyable. The challenge specs says in the bonus to complete the challenge with just HTML and CSS but I couldn't figure out how to change or switch classes when the toggle switch is pressed. At first I thought by adding a checkbox, I could change the state of some classes when input checkbox is either checked or unchecked but couldn't figure a way to do that. So I ended up doing it with simple but minimal JavaScript.

---

Pending tasks

• Bug : Activate Toggle > Switch to annual > refresh page. The toggle stays on annual but the prices have updated to default (monthly)
• Live solution screenshot(s)
• Submit to frontendmentor and add Solution submitted at Frontend Mentor - Submission link