🧮 Frontend Mentor - Tip calculator app

📣 The challenge

Check the challenge on Frontend Mentor:

🎉 App Link

🚀 Tip calculator app

💡 My Solution

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

🍀 Front-end Style Guide

Colors

Primary

• Strong cyan: hsl(172, 67%, 45%)

Neutral

• Very dark cyan: hsl(183, 100%, 15%)
• Dark grayish cyan: hsl(186, 14%, 43%)
• Dark grayish cyan: hsl(184, 14%, 56%)
• Light grayish cyan: hsl(185, 41%, 84%)
• Light grayish cyan: hsl(189, 41%, 97%)
• White: hsl(0, 0%, 100%)

Font

• Family: Space Mono
• Weights: 400, 500, 700

🛠 Build Setup

# install dependencies
yarn install

# serve with hot reload at localhost:8080
yarn run serve

# build for production with minification
yarn run build