This is a solution to the Pricing Component with Toggle Challenge on Frontend Mentor.
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
- Live Site URL: https://kens-visuals.github.io/pricing-component-with-toggle/
- Solution URL: https://www.frontendmentor.io/solutions/pricing-component-with-toggle-with-vanilla-js-scss-and-bem-ylbwbfjvO
- Semantic HTML5 markup
- SCSS custom properties
- CSS Flexbox
- CSS Grid
- CSS Animations
- Vanilla JS
- Mobile-first workflow
Another simple project to practice some other skills other than layout. I've been putting a lot of work towards practicing animations. And this project was not an exception. I could finish the project with the bonus challenge and build it with HTML and CSS. However, I really wanted to make it more interactive. Every developer knows that when you want to make something interactive, JS is the ultimate tool for that. And adding these animations might have been possible with the checkbox hack, but I wanted something more professional.
- The “Checkbox Hack” - In case if you were wondering what you can do with the checkbox hack.
- Frontend Mentor - @kens-visuals
- Codewars - @kens_visuals
- CodePen - @kens-visuals