I found Frontend Mentor where you can improve your front-end coding skills by building real projects. You can pick a challenge that appeals to you. Then, download the design documents, images and other assets that you need.

Pricing Component With Toggle

The challenge I chose was the pricing component with toggle. It has three options: Basic, Professional and Master. You have to use a toggle switch to show the prices for Annually or Monthly.

How I Built It

I built it using HTML, Bootstrap and JavaScript. With Bootstrap, I had to override some of its styles to get rid of the column margin and create custom styles for the button.

I wrote JavaScript that watches for when the toggle is selected. When you open the page, it defaults to monthly pricing. If you select Annually, you see the Annual prices. When you select Monthly, it switches back to Monthly prices.

What I Learned

The style guide defined colors in HSL and included a linear gradient. The linear-gradient is a CSS function that allows you to create a transition between two or more colors along a straight line. You can choose the direction or angle of the transition. For two of the buttons and toggle, the gradient moves from left to right. The professional plan card moves from top to bottom.

I used two structural pseudo-classes in CSS to create the design. The :first-of-type and :last-of-type selectors allow you to target the first and last occurrence of an element in a container.

Bootstrap has a toggle switch available. It was not customizable with CSS. You have to compile custom Bootstrap in order to change how it looks. I found CSS toggle solution that works like the design. I modified it to work with my CSS.

Frontend Mentor asks developers to post their solutions to their site. If you get stuck on a project, you can look at their solution to see how they approached it.

You can see my version of the pricing plan with toggle.