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

Note: Delete this note and update the table of contents based on what sections you keep.

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: Add solution URL here
• Live Site URL: view the site live

My process

Built with

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

What I learned

I learned a great deal about javascript event handlers and eventlistners on this project

.container-one-item.second.error input {
  border: 2px solid red;
}

.container-one-item.second.error small {
  visibility: visible;
}

const calculate = (tip, total) => {
  screenOne.innerText = tip.toFixed(2);
  screenTwo.innerText = total.toFixed(2);
};

percentage.forEach((percent) => {
  percent.addEventListener('click', (e) => {
    const buttonValue = e.target.innerText;
    const inputValue = eval(bill.value / people.value);
    if (buttonValue === '5%') {
      expression = 5 / 100;
    } else if (buttonValue === '10%') {
      expression = 10 / 100;
    } else if (buttonValue === '15%') {
      expression = 15 / 100;
    } else if (buttonValue === '25%') {
      expression = 25 / 100;
    } else if (buttonValue === '50%') {
      expression = 50 / 100;
    } else {
      expression = custom.value / 100;
    }
    const tip = expression * inputValue;
    const total = tip + inputValue;
    calculate(tip, total);
  });
});

Continued development

I want to keep focusing on improving my javascript skills and bulding more advanced projects.

Useful resources

• Example resource 1 - This helped me in making my input fields read number and decimal point only. No text is allowed.

Author

• Frontend Mentor - @mallow12