Build a Simple React JavaScript Interactive Tip Calculator: A Beginner’s Guide

Written by

learnmodernjavascript

in

In this tutorial, we’re going to build a simple, yet practical, Tip Calculator application using ReactJS. This project is perfect for beginners and intermediate developers looking to solidify their understanding of React concepts such as state management, event handling, and component composition. We’ll break down the process step-by-step, making it easy to follow along and build your own functional tip calculator. By the end, you’ll have a working application that you can use daily and a solid foundation for more complex React projects.

Why Build a Tip Calculator?

The tip calculator is more than just a simple project; it’s a fantastic learning tool. It allows you to grasp fundamental React concepts in a tangible and relatable way. You’ll work with user input, perform calculations, and update the UI dynamically based on those calculations. This hands-on approach is crucial for understanding how React components interact and how data flows within your application. Furthermore, it’s a project you can easily expand upon, adding features like custom tip percentages, bill splitting, and more, making it a great springboard for future learning.

Prerequisites

Before we dive in, ensure you have the following:

  • A basic understanding of HTML, CSS, and JavaScript.
  • Node.js and npm (Node Package Manager) installed on your system.
  • A code editor like Visual Studio Code, Sublime Text, or Atom.

Setting Up Your React Project

First, let’s create a new React project using Create React App. This tool sets up a development environment with everything you need to start building React applications without any complex configuration.

Open your terminal or command prompt and run the following command:

npx create-react-app tip-calculator

This command creates a new directory called tip-calculator and installs all the necessary dependencies. Once the installation is complete, navigate into the project directory:

cd tip-calculator

Project Structure

Before we start coding, let’s take a quick look at the project structure created by Create React App:

  • src/: This directory contains the main source code of your application.
  • src/App.js: The main component of your application, where we’ll write most of our code.
  • src/App.css: The stylesheet for your application.
  • src/index.js: The entry point of your application.
  • public/: Contains static assets like index.html.

Building the Tip Calculator Components

Now, let’s start building the components of our tip calculator. We’ll break it down into smaller, manageable parts:

1. The Input Fields

We need input fields for the bill amount, the tip percentage, and the number of people splitting the bill. Create a new component called BillInput.js in the src directory:

// src/BillInput.js
import React from 'react';

function BillInput({ bill, onBillChange }) {
  return (
    <div>
      <label>Bill Amount:</label>
       onBillChange(parseFloat(e.target.value) || 0)}
      />
    </div>
  );
}

export default BillInput;

In this component, we have an input field of type number. We use the value prop to display the current bill amount and the onChange prop to update the bill amount when the user types in the input. The parseFloat() function converts the input string to a number, and the || 0 handles the case where the input is not a valid number, defaulting to 0.

Next, let’s create a TipPercentageInput.js component:

// src/TipPercentageInput.js
import React from 'react';

function TipPercentageInput({ tipPercentage, onTipPercentageChange }) {
  return (
    <div>
      <label>Tip Percentage:</label>
       onTipPercentageChange(parseFloat(e.target.value) || 0)}
      />
    </div>
  );
}

export default TipPercentageInput;

This component is similar to BillInput but handles the tip percentage input. We’ll also need a field for the number of people. Create a NumberOfPeopleInput.js component:

// src/NumberOfPeopleInput.js
import React from 'react';

function NumberOfPeopleInput({ numberOfPeople, onNumberOfPeopleChange }) {
  return (
    <div>
      <label>Number of People:</label>
       onNumberOfPeopleChange(parseInt(e.target.value) || 1)}
      />
    </div>
  );
}

export default NumberOfPeopleInput;

Note that we use parseInt() here, as the number of people should be a whole number. We also default to 1 person if the input is invalid.

2. The Calculation Logic

Now, let’s create a function to calculate the tip amount and the total amount. This function can be placed in a separate file, like utils.js, for better code organization. Create a file called utils.js in the src directory:

// src/utils.js
export function calculateTip(bill, tipPercentage, numberOfPeople) {
  if (bill <= 0 || tipPercentage < 0 || numberOfPeople <= 0) {
    return { tipAmount: 0, totalAmount: 0, amountPerPerson: 0 };
  }

  const tipAmount = (bill * tipPercentage) / 100;
  const totalAmount = bill + tipAmount;
  const amountPerPerson = totalAmount / numberOfPeople;
  return { tipAmount, totalAmount, amountPerPerson };
}

This function takes the bill amount, tip percentage, and the number of people as input, and returns an object containing the tip amount, the total amount, and the amount per person. It also handles edge cases where the input values are invalid.

3. Displaying the Results

Next, we need a component to display the calculated tip amount and total amount. Create a component called TipResult.js:

// src/TipResult.js
import React from 'react';

function TipResult({ tipAmount, totalAmount, amountPerPerson }) {
  return (
    <div>
      <p>Tip Amount: ${tipAmount.toFixed(2)}</p>
      <p>Total Amount: ${totalAmount.toFixed(2)}</p>
      <p>Amount Per Person: ${amountPerPerson.toFixed(2)}</p>
    </div>
  );
}

export default TipResult;

This component simply displays the calculated values, formatted to two decimal places using toFixed(2).

4. The Main App Component

Now, let’s put it all together in the App.js file. This is where we’ll manage the state and handle the interactions between the components.

// src/App.js
import React, { useState } from 'react';
import BillInput from './BillInput';
import TipPercentageInput from './TipPercentageInput';
import NumberOfPeopleInput from './NumberOfPeopleInput';
import TipResult from './TipResult';
import { calculateTip } from './utils';

function App() {
  const [bill, setBill] = useState(0);
  const [tipPercentage, setTipPercentage] = useState(15);
  const [numberOfPeople, setNumberOfPeople] = useState(1);

  const { tipAmount, totalAmount, amountPerPerson } = calculateTip(bill, tipPercentage, numberOfPeople);

  return (
    <div>
      <h1>Tip Calculator</h1>
      
      
      
      
    </div>
  );
}

export default App;

Here’s a breakdown of the App.js component:

  • We import all the components we created earlier.
  • We use the useState hook to manage the state of the bill amount, tip percentage, and the number of people.
  • We call the calculateTip function from utils.js, passing the state values as arguments.
  • We render the input components (BillInput, TipPercentageInput, and NumberOfPeopleInput), passing the appropriate props.
  • We render the TipResult component, passing the calculated tip amount and total amount as props.

Styling Your Application

To make your tip calculator look more appealing, let’s add some basic styling. Open src/App.css and add the following CSS:

/* src/App.css */
body {
  font-family: sans-serif;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.app {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 300px;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

p {
  margin-bottom: 10px;
}

Import this CSS file into your App.js file by adding this line at the top:

import './App.css';

Also, wrap the content inside the App function with a div with the class “app”:


function App() {
  // ... (previous code)
  return (
    <div>
      <h1>Tip Calculator</h1>
      {/* ... (rest of the content) */}
    </div>
  );
}

Running Your Application

Now, start the development server by running the following command in your terminal:

npm start

This command will open your tip calculator in your browser at http://localhost:3000. You should be able to enter the bill amount, tip percentage, and number of people and see the calculated tip amount and total amount.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect State Updates: Make sure you’re using the correct state update functions (e.g., setBill, setTipPercentage, setNumberOfPeople) to update the state. Incorrectly updating the state can lead to unexpected behavior.
  • Incorrect Data Types: Ensure you are converting the input values to the correct data types. Use parseFloat() for the bill and tip percentage, and parseInt() for the number of people.
  • Missing Event Handlers: Always include the onChange event handler in your input fields to capture user input. Without this, the application won’t update the state when the user types.
  • Incorrect Component Imports: Double-check that you’ve imported all the components correctly. Typos in import statements can cause errors.
  • Incorrect Prop Passing: Ensure that you’re passing the correct props to the child components. Incorrectly passed props can lead to unexpected results or errors.

Expanding Your Tip Calculator

Once you’ve built the basic tip calculator, you can add more features to make it more useful. Here are some ideas:

  • Custom Tip Percentages: Add buttons or a dropdown for common tip percentages (e.g., 10%, 15%, 20%) to make it easier for users to select a tip.
  • Bill Splitting: Allow users to split the bill among multiple people.
  • Currency Formatting: Format the output to include currency symbols (e.g., $).
  • Error Handling: Add error handling to handle invalid input and display appropriate messages to the user.
  • Dark Mode: Implement a dark mode toggle for a better user experience.

Key Takeaways

  • Component-Based Architecture: React applications are built using components. Each component is a self-contained piece of the user interface.
  • State Management: The useState hook allows you to manage the state of your components. When the state changes, React re-renders the component and its children.
  • Event Handling: Event handlers (e.g., onChange) allow you to respond to user interactions, such as typing in an input field.
  • Data Flow: Data flows from parent components to child components through props.

FAQ

1. How do I handle negative values for bill amount or tip percentage?

In the calculateTip function, add checks to ensure that the bill amount and tip percentage are not negative. You can return 0 for the tip amount and total amount if they are negative.

2. How can I add a reset button to clear the input fields?

You can add a button that, when clicked, resets the state values (bill, tipPercentage, and numberOfPeople) to their default values. Create a function to handle the reset and call it when the button is clicked.

3. How do I deploy my React app?

You can deploy your React app to platforms like Netlify, Vercel, or GitHub Pages. First, you need to build your app using the command npm run build. This generates a production-ready build in the build directory. Then, follow the deployment instructions for your chosen platform.

4. How can I improve the user interface?

You can improve the user interface by adding more styling using CSS, using a CSS framework like Bootstrap or Material-UI, and by adding visual feedback to user interactions.

5. What are some of the most common React Hooks?

The most common React Hooks are useState, useEffect, useContext, useReducer, useCallback, useMemo, and useRef. These hooks allow you to manage state, handle side effects, and optimize your React components.

Building this tip calculator is a great way to put your React knowledge to the test, and it’s a solid stepping stone for more complex projects. As you continue to build and experiment, you’ll gain a deeper understanding of React’s core concepts. Remember that practice is key, and the more you build, the more confident you’ll become in your abilities. With each project, you’ll learn new techniques and approaches, solidifying your understanding and enabling you to tackle even more challenging tasks. Keep exploring, keep building, and enjoy the journey of becoming a proficient React developer. The world of front-end development is dynamic and ever-evolving, and your willingness to learn and adapt will be your greatest asset.

More posts