Frontend Mentor - Tip calculator app solution

This is a solution to the Tip calculator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Tip Calculator explained
• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

The Tip Calculator calculates tip amount for various percentages of the cost of the service, and also provides a total amount that includes the tip. In the U.S., a tip of 15% of the before tax meal price is typically expected. To know more about the tip calculator and how it works please visit (https://www.calculator.net/tip-calculator.html)

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

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Bootstrap
• jQuery

What I learned

I learned more DOM manipulations. I also tried to refactor my stylesheets. I also learned the difference between parseInt() and parseFloat(). I believe I struggled with trying to replicate the mobile design, but I couldn't get the layout, so I did my thing. I think next time I'll try to build mobile before the system layout.

Author

• Frontend Mentor - @Loo_cee
• Twitter - @adaezeudele1
• LinkedIn - Favour Ebere