How I Built the Frontend Mentor Tip Calculator Application

One of the best platforms to practice your Frontend skills is Frontend Mentor. It is a website/platform that provides various front-end development challenges, both free and premium, for developers to practice and improve their skills. One of my favourite aspects of Frontend mentor is that it provides web and mobile designs.

In the quest to improve and practice my skills, I hopped on Frontend Mentor to look for a project that would allow me to practice my HTML, CSS, and JavaScript skills. The Tip Calculator Challenge was my perfect project.

After successfully downloading the start-up files, I reviewed the project design in detail to create a plan for the project, that is the required HTML, CSS and JavaScript files.

The HTML body consists of:

Form input to enter the total bill in USD (United States Dollars)

5 buttons with the various tip percentages i.e. 5%, 10%, 15%, 25% and 50% and a custom input form to enter a custom tip percentage

Form input to enter the number of people at the party.

Tip Amount payable per person,

total amount payable per person and the

reset button to reset all the form values to zero

I created the variables that I required from the HTML file which are:

The values:

the totalBill variable represents the input value of the total bill

the tipPercent variable represents the buttons and input form with the class of tips

the numOfPeople variable represents the input value of the total number of people who will be paying the bill

the amountPerPerson variable will allow us to display the output of the total tip amount due per person

the totalPerPerson variable will allow us to display the output of the total bill amount due per person

the reset variable represents the button that resets all input and output values to 0

I created a function named getTotalCost that calculates the total amount payable per person and the total tip payable per person.

The function above calculates the total bill due per person and sets it to 2 decimal places from the .toFixed(2) method. I used an if statement to check if the input value for the total amount is a number. If the input value is not a number, the function will return a value of 0. If it is a number, I made use of .innerHTML to display the total amount due per person and the tip amount due per person.

I made use of eventlisteners to “listen” when the total bill amount is changed and when the total number of people at the party is changed.

I created a function getTip() that gets the value of the tip value/percentage i.e. 5%, 10% or a custom tip value.

The getTip() function is then called in the HTML file where the tip amount buttons and the custom tip input form are. When any of the buttons is clicked or a tip percent is entered into the form, the function getTip() gets called and the tip amount is divided by 100 and the function getTotalCost() is called.

I created a function named resetApp() that resets all the input and output values to 0 when it is clicked. This function is called in the RESET button.

I had so much fun and learnt some new concepts when creating this project. I hope you also get to do it and submit it to Frontend Mentor for review by other developers.

Here is the link to the Frontend Mentor Challenge: [Tip Calculator Challenge on Frontend Mentor (frontendmentor.io/challenges/tip-calculator..)

If you find this tutorial helpful in any way, kindly leave a comment below. I would love to hear from you.

You can also look at some of the DOM resources below if you are looking to improve your understanding.

Some Document Object Manipulation (DOM) resources:

Getting Started with the DOM by Edidiong Asikpo

What exactly is the dom