In this article, we will learn how to create a simple tip calculator app using React.js. For this, we will start by setting up a new React app and then proceed to build the app’s user interface and implement its functionality that will calculate the tip amount based on the bill and the desired tip percentage. The final project will look like the below image:
Prerequisites: The pre-requisites for this project are:
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.
Creating the 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
After following the above steps, it will look like the following:
project structure
Example: This example illustrates the simple Tip Calculator App with React.js that will be utilized to calculate the Tip value based on the Total bill value. Here, in app.js file contains the input for bill total, tip%, split b/w, and generates split totally. To style it, the app.css files will contain the different styling properties for the application.
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
