Frontend Mentor - Tip calculator app solution 💰

This is my solution to the Tip calculator app challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• 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 of my result

Links

• Live Site URL: Feel free to play around or use (any feedback would be highly appreciated!)
• My solution code: The code you see right on this page
• Original challenge: Frontend Mentor

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Tailwind CSS
• Flexbox
• CSS Grid
• JavaScript

What I learned

This challenge helped me come back to and better memorize the Tailwind CSS classes, and doing some algo was a true pleasure!

Tailwind, you can be awesome sometimes:

<div class="grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-12 bg-white p-6 sm:p-8 rounded-3xl"></div>

button.btn {
  @apply bg-primary text-dark uppercase py-3 text-xl mt-10 md:mt-32 opacity-40 cursor-not-allowed
}

Maths, I really did miss you:

function countTotal (a,b,c) {
  if (a != "" && b != "" && c != "") {
    let resultTotal = ((a+(a*(b/100)))/c).toFixed(2);
    let resultTip = (resultTotal - (a/c)).toFixed(2);
    tipAmountPerPerson.innerHTML = resultTip;
    totalPerPerson.innerHTML = resultTotal;
    btnReset.classList.add('active');
  }
}

Author

• Website - My portfolio
• Git Hub - you are already here but ok