Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

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


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 desktop

Screenshot mobile


My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Mobile-first workflow
  • Vue.js - JS framework
  • Font awesome - Icon library

What I learned

In this project I leared to use Vue.js 3 and their new composition API.
Also I estimate 15 hours for this project but in the end I did it in 13.

I like to put special attention to details, like hover, focus and focus-visible effects.

Useful resources

  • Vue.js 3 documentation - This helped me for understand the new composition API and examples in Single File Components.