Frontend Mentor - Tip calculator app

This is a solution to the Tip calculator app.

Table of contents

• Frontend Mentor - Tip calculator app
  • Table of contents
  • Overview
    • The challenge
    • 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 per person

Links

• Solution URL: Here!
• Live Site URL: Here!

My process

Built with

• Semantic HTML5 markup
• Less
• React
• styled-components
• Jest
• React-testing-library

What I learned

Hi! I learned how to use styled-components and improve my skills testing, testing a React component and using react-testing-library.

Continued development

I want to improve my skills in testing and learn more about styled-components. I'll try to improve this project in the future, adding more theme properties and refactoring the code.

Author

• Website - Danilo Alves
• Frontend Mentor - @mizek1