Frontend Mentor - Tip calculator app solution

This is a solution to the Tip calculator app challenge on Frontend Mentor.

Table of contents

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

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size.
• See hover states for all interactive elements on the page.
• Calculate the correct tip and total cost of the bill person.

Screenshot

Video

Overview.Hecho.con.Clipchamp.mp4

Links

• Solution URL: GitHub
• Live Site URL: Netlify

My process

Built with

• React JS
• Redux
• JavaScript
• Semantic HTML5 markup
• In process to add animations with Framer Motion 💕.
• SCSS custom properties

What I learned

• How to use Redux store.
• Inputs type radio behaviour.
• Link elements in SCSS

  .className0 ~ .className1 {
    ...
  }

Continued development

Pending to add @media to mobile sizes.

Author

• LinkedIn
• Frontend Mentor - @im-victor-mendez