Frontend Mentor - Tip calculator app solution

Table of contents

• Overview
  • The challenge
  • Screenshot
• My process
  • Built with
  • What I learned
  • Continued development

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

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

I learned how to use media queries along with the properties grid-template-columns and flex-wrap to ensure that the buttons occupy the same width and wrap to the next line if there is not enough space. Additionally, I used !important to override other CSS properties.

  .active{
    background-color: var(--PrimaryStrongcyan)!important;
  }
  .available{
      background-color: var(--PrimaryStrongcyan)!important;
      cursor: pointer !important;
      &:hover{
          background-color: var(--buttonHover)!important;
      }
  }

To keep the code readable and maintainable while reducing repetition, I implemented different functions for later reuse.

//function total tip
function calculateTip(percent,bill){
    return ((percent/ 100) * bill)
}
//function to calculate tip per person
function tipPerPerson(discount,people){
  //code
}

//function to calculate the total amount per person
function totalPerPerson(tip,bill,people){
  //code
}

//function to show the total
function showTotal(id, value){
  //code
}

To ensure the data is correct, I used validations to check for numbers, ensuring they are not less than 0 and not NaN.

function queryInput(id){
    const input = parseFloat(document.querySelector(`#${id}`).value);
    return isNaN(input) ? 0 : input;
}

if(people <= 0){
        showTotal("tip-amount", 0);
        showTotal("total-amount", 0);
        sectionPeople.classList.add('error');
    }else if(bill < 0){
        sectionBill.classList.add('error');
        sectionPeople.classList.remove('error');
    }

Continued development

- JavaScript Best Practices: Improving JavaScript code readability and performance by refactoring and leveraging ES6 features like template literals and destructuring.

- Integrating APIs: Fetching and displaying data from external APIs to create more dynamic and interactive web applications.

These areas will help me build more sophisticated, user-friendly, and performant web applications.