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

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• 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

Screenshot

Links

• Solution URL: https://github.com/NDOY3M4N/tip-calculator-app
• Live Site URL: https://ndoy3m4n.github.io/tip-calculator-app/

My process

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first workflow
• Vue - JS library
• Vite - Build Tool
• Tailwind CSS - "THE" CSS Framework

What I learned

I learned that in Vue, the v-model directive is a shorthand for @input & :value

<input v-model="someState" />

does the same thing as:

<input :value="someState" @input="someState = $event.target.value" />

When used on a component, v-model instead does this:

<custom-input
  :model-value="someState"
  @update:model-value="someState = $event"
></custom-input>

Continued development

• Animate the Tip Amount & Total Amount result
• Switch to typescript
• Add PWA

Useful resources

• Hide arrows from input number - This helped me for hiding the default styles (the arrows) in the input number field.
• Use ref on component - This is stackoverflow post helped me targeting the reset button. I needed this part to disable, blur or focus the button component.

Author

• Frontend Mentor - @NDOY3M4N
• Twitter - @NDOY3M4N