Build a Simple Tip Calculator App with ReactJS

Creating a simple tip calculator app using ReactJS can be good for practicing React state management and components. In this tutorial, we’ll create a basic tip calculator app using React.js. The app will allow users to input the bill amount, select a tip percentage and let split the bill, providing them with the calculated tip amount and total bill.

Prerequisites:

• HTML
• CSS
• Javascript ES6
• React
• Functional Components

Approach:

Create a simple React application with the help of the below installation procedure that will calculate the Tip value based on the Total Bill value. This simple bill-splitting calculator will allow the user to enter the total bill amount and choose a tip percentage. The user can also adjust the number of splits. The split total is automatically calculated and displayed. The code uses React hooks (useState and useEffect) to manage the state and perform calculations based on user input.

Steps to create React Application

Step 1: Create a React application using the following command:

npx create-react-app tip-calculator

Step 2: After creating your project folder i.e. react-app, move to it using the following command:

cd tip-calculator

Project Structure

project structure

Example: Write the following code in App.js and App.css file

Javascript

// App.js

import "./App.css";
import { useEffect, useState } from "react";

function App() {

    // State for storing bill total
    const [bill, setBill] = useState("");

    // State for storing tip percentage
    const [tip, setTip] = useState("10%");

    // State for storing number of splits
    const [split, setSplit] = useState(1);

    // State for storing split total
    const [splitTotal, setSplitTotal] = useState(0);

    // Function to handle changes in the tip input
    function handleTipChange(e) {
        let value = e.target.value.replace("%", "");
        if (value.indexOf("%") === -1) {
            value = value + "%";
        }
        setTip(value);
    }

    // Function to handle changes in the
    // bill total input
    function handleBillChange(e) {
        setBill(e.target.value);
    }

    // Function to decrease the number of splits by 1
    function splitMinus() {
        setSplit((oldValue) => Math.max(oldValue - 1, 1));
    }

    // Function to increase the number of splits by 1
    function splitPlus() {
        setSplit((oldValue) => oldValue + 1);
    }

    // Function to calculate the split total
    // based on bill, tip, and number of splits
    function calculate() {
        const percentage = 1 + parseInt(tip.replace("%", "")) / 100;
        const result = ((bill * percentage) / split).toFixed(2);
        setSplitTotal(result);
    }

    // useEffect hook to calculate the split total
    // whenever bill, tip, or split changes
    useEffect(() => {
        calculate();
    }, [bill, tip, split]);

    return (
        <main>
            {/* Bill total input */}
            <label>Bill total</label>
            <input
                type="text"
                placeholder={"0.00"}
                value={bill}
                onChange={handleBillChange}
            />

            {/* Tip input */}
            <label>Tip</label>
            <input
                type="text"
                placeholder={"0.00"}
                value={tip}
                onChange={handleTipChange}
            />

            <div className="summary">

                {/* Split section */}
                <div className="split">
                    <label>Split</label>
                    <div className="split-control">
                        <button onClick={splitMinus}>-</button>
                        <span>{split}</span>
                        <button onClick={splitPlus}>+</button>
                    </div>
                </div>

                {/* Result section */}
                <div className="result">
                    <label>Split total</label>
                    <span>{splitTotal}</span>
                </div>
            </div>
        </main>
    );
}

export default App;

CSS

/* App.css */

body {
    background: #f2f2f2;
    color: #333;
    padding: 20px;
}

label {
    display: block;
    text-transform: uppercase;
    font-size: 0.8rem;
    line-height: 0.5rem;
    padding-left: 1px;
    color: rgba(0, 0, 0, 0.7);
}

input[type="text"] {
    background: transparent;
    border: 0;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #555;
    font-size: 1.4rem;
}

.summary {
    background: #ffcc00;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    font-size: 1.7rem;
}

.summary label {
    line-height: 0.8rem;
}

.split-control {
    display: flex;
    align-items: center;
    justify-items: center;
}

.split-control span {
    display: block;
    padding: 0 3px;
}

.split button {
    border-radius: 99999999px;
    border: 0;
    width: 20px;
    height: 20px;
    background: #4caf50;
    color: #fff;
    cursor: pointer;
}

.result {
    text-align: right;
}

main {
    width: 200px;
    margin: 20px auto;
}

Steps to Run Application:

Step 1: Run the application using the following command from the root directory of the project:

npm start

Step 2: Type the following link in your browser

http://localhost:3000/

Output:

tip calculator