/tip-calculator-app

A web app powered by Next.js + Tailwind CSS that calculates tip given the bill, tip percentage and number of people.

Primary LanguageTypeScript

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

Note: Delete this note and update the table of contents based on what sections you keep.

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

Extra features I added:

  • Input field prevents entering non-numerical characters except for "." for decimal numbers (Copy-pasting invalid string should also be negated)
  • In input fields that allow decimal numbers (Bill and Custom Tip), an entry like ".1" will automatically turn into "0.1"
  • Number of people input field accepts only positive intergers ("." is not registered)
  • An error "Can't be zero" for Number of people only appears when bill is greater than 0
  • A warning appears when tip is over 100%

Screenshot

Desktop design Desktop

Desktop

Mobile design Desktop

Links

My process

Built with

What I learned

  • How React components get re-rendered based on states
  • How to update states from one component to another (between parent/children or 2 de-coupled components) in React
  • How to fix some styling conflicts between Material UI and Tailwind
  • How to remotely debug a web app on an Android device using Chrome's remote debugging tool

Interesting things I discovered

  • onKeyPress event is not triggered by Chrome on Android devices. See more
  • How to disable :hover styles on touch screens using Tailwind. See more
// tailwind.config.js
module.exports = {
  extend: {
    screens: {
      'betterhover': {'raw': '(hover: hover)'}
    }
  }
}
.element {
  @apply
    betterhover:hover:(...);
}

Continued development

I would like to practice using Redux-Saga, React Redux and also some more React hooks from here.

I also really want to try out React Native one day.

Development

This is a Next.js project bootstrapped with create-next-app.

Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

Author

Hieu Dao Le Duc