Build a React JS Interactive Simple Interactive Component: A Basic Tip Calculator

Written by

javascriptfundamentals

in

Ever been in a restaurant with friends, trying to figure out how much each person owes, including the tip? It’s a common scenario, and manually calculating tips can be a hassle, especially when dealing with split bills. Wouldn’t it be great to have a simple tool that does the math for you, quickly and accurately? That’s where a tip calculator comes in handy. In this tutorial, we’ll build a basic, yet functional, tip calculator using React JS. This project is perfect for beginners and intermediate developers looking to solidify their understanding of React’s core concepts: state management, event handling, and rendering components.

Why Build a Tip Calculator?

Creating a tip calculator offers several benefits:

  • Practical Application: It’s a real-world problem with a simple solution, making it an ideal project for learning.
  • Core React Concepts: It allows you to practice essential React skills such as state updates, handling user input, and conditional rendering.
  • Component-Based Architecture: You’ll learn how to break down a problem into smaller, manageable components.
  • User Interface (UI) Design: You can experiment with basic UI elements and styling to create a user-friendly application.

Prerequisites

Before we dive in, make sure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing your project’s dependencies.
  • A basic understanding of HTML, CSS, and JavaScript: Familiarity with these languages will help you understand the code.
  • A code editor: Visual Studio Code, Sublime Text, or any editor of your choice.

Setting Up Your React Project

Let’s start by creating a new React project using Create React App. Open your terminal or command prompt and run the following command:

npx create-react-app tip-calculator
cd tip-calculator

This command creates a new React application named “tip-calculator”. Navigate into the project directory using the `cd` command.

Project Structure

Your project directory will look something like this:


tip-calculator/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   └── ...
├── package.json
└── README.md

The main files we’ll be working with are:

  • src/App.js: This is where we’ll write our React component logic.
  • src/App.css: This is where we’ll add our CSS styles.
  • src/index.js: This is the entry point of our application.

Building the Tip Calculator Component

Let’s create the `TipCalculator` component. Open `src/App.js` and replace the existing content with the following:

import React, { useState } from 'react';
import './App.css';

function App() {
  const [billAmount, setBillAmount] = useState('');
  const [tipPercentage, setTipPercentage] = useState(15);
  const [numberOfPeople, setNumberOfPeople] = useState(1);
  const [tipAmount, setTipAmount] = useState(0);
  const [totalAmount, setTotalAmount] = useState(0);
  const [perPersonAmount, setPerPersonAmount] = useState(0);

  const calculateTip = () => {
    const bill = parseFloat(billAmount);
    const tip = parseFloat(tipPercentage);
    const people = parseFloat(numberOfPeople);

    if (isNaN(bill) || bill  0 ? totalAmountCalculated / people : totalAmountCalculated;

    setTipAmount(tipAmountCalculated);
    setTotalAmount(totalAmountCalculated);
    setPerPersonAmount(perPersonAmountCalculated);
  };

  return (
    <div>
      <h1>Tip Calculator</h1>
      <div>
        <label>Bill Amount:</label>
         setBillAmount(e.target.value)}
        />
      </div>
      <div>
        <label>Tip Percentage:</label>
         setTipPercentage(e.target.value)}
        >
          5%
          10%
          15%
          20%
          25%
        
      </div>
      <div>
        <label>Number of People:</label>
         setNumberOfPeople(e.target.value)}
        />
      </div>
      <button>Calculate Tip</button>
      <div>
        <p>Tip Amount: ${tipAmount.toFixed(2)}</p>
        <p>Total Amount: ${totalAmount.toFixed(2)}</p>
        <p>Amount per Person: ${perPersonAmount.toFixed(2)}</p>
      </div>
    </div>
  );
}

export default App;

Let’s break down this code:

  • Import Statements: We import `useState` from React to manage the component’s state and the `App.css` file to style our component.
  • State Variables: We use the `useState` hook to declare the state variables:
  • billAmount: Stores the bill amount entered by the user. Initialized as an empty string.
  • tipPercentage: Stores the tip percentage selected by the user. Initialized to 15%.
  • numberOfPeople: Stores the number of people splitting the bill. Initialized to 1.
  • tipAmount: Stores the calculated tip amount. Initialized to 0.
  • totalAmount: Stores the calculated total amount (bill + tip). Initialized to 0.
  • perPersonAmount: Stores the calculated amount per person. Initialized to 0.
  • calculateTip Function: This function is called when the “Calculate Tip” button is clicked. It performs the following steps:
  • Parses the `billAmount`, `tipPercentage`, and `numberOfPeople` values to numbers using `parseFloat()`.
  • Handles invalid input: If the bill amount is not a number or is less than or equal to 0, it resets the result amounts to 0 and returns.
  • Calculates the tip amount, total amount, and amount per person.
  • Updates the state variables using the `set…` functions.
  • JSX Structure: This is the user interface of our tip calculator.
  • A heading “Tip Calculator”.
  • Input fields for “Bill Amount” and “Number of People”.
  • A select dropdown for “Tip Percentage”.
  • A button labeled “Calculate Tip”. When clicked, it calls the `calculateTip` function.
  • Displays the calculated “Tip Amount”, “Total Amount”, and “Amount per Person”.

Styling the Component (App.css)

To make the tip calculator look better, let’s add some CSS styles. Open `src/App.css` and add the following code:


.App {
  font-family: sans-serif;
  text-align: center;
  padding: 20px;
}

h1 {
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

label {
  font-weight: bold;
  margin-right: 10px;
  width: 150px;
  text-align: left;
}

input[type="number"],
select {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  width: 150px;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #3e8e41;
}

.results {
  margin-top: 20px;
  border-top: 1px solid #ccc;
  padding-top: 20px;
}

This CSS code styles the overall layout, headings, input fields, and the button. It also adds some spacing and visual separation for better readability.

Running the Application

To run your application, open your terminal and navigate to your project directory. Then, run the following command:

npm start

This will start the development server, and your tip calculator will be accessible in your web browser, typically at http://localhost:3000. You should see the tip calculator interface, where you can enter the bill amount, select the tip percentage, specify the number of people, and calculate the tip.

Step-by-Step Instructions

Let’s break down the creation process step-by-step:

  1. Create React App: Use `create-react-app` to set up the basic project structure.
  2. Import useState: Import the `useState` hook from React in `App.js`.
  3. Define State Variables: Declare state variables to store the bill amount, tip percentage, number of people, tip amount, total amount, and amount per person.
  4. Create the calculateTip Function: This function is the core of our calculator. It takes the bill amount, tip percentage, and number of people as input, calculates the tip and total amount, and updates the state.
  5. Build the JSX Structure: Create the user interface using JSX. Include input fields for the bill amount and number of people, a select dropdown for the tip percentage, a button to trigger the calculation, and display the results.
  6. Add Event Handlers: Attach `onChange` event handlers to the input fields and select dropdown to update the state as the user types or selects values. Attach an `onClick` event handler to the button to trigger the calculation.
  7. Style the Component: Add CSS styles to make the component visually appealing.
  8. Test the Application: Run the application and test it with different inputs to ensure it works correctly.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect Data Types: Make sure to convert user input (which is initially a string) to numbers using `parseFloat()` before performing calculations.
  • Uninitialized State: Always initialize your state variables with appropriate default values (e.g., `0` for numbers, `”` for strings).
  • Incorrect Event Handling: When using `onChange` events, make sure to update the state correctly using `e.target.value`.
  • Missing Dependencies: Ensure that you have installed all necessary dependencies. If you encounter errors, check your `package.json` file for missing or incorrect dependencies.
  • Incorrect Calculation Logic: Double-check your formulas to ensure you’re calculating the tip and total amount correctly.
  • Forgetting to Handle Edge Cases: Consider edge cases like a bill amount of 0 or a negative number of people.

Enhancements and Further Development

Here are some enhancements you can consider to improve your tip calculator:

  • Tip Customization: Allow users to enter a custom tip percentage.
  • Error Handling: Display error messages for invalid input (e.g., non-numeric values).
  • Accessibility: Improve accessibility by adding ARIA attributes to the HTML elements.
  • Currency Formatting: Format the output amounts with currency symbols (e.g., $).
  • Responsive Design: Make the calculator responsive so it looks good on different screen sizes.
  • Dark Mode: Add a dark mode toggle for a better user experience.
  • Local Storage: Save user preferences (e.g., tip percentages) using local storage.
  • Unit Tests: Write unit tests to ensure your component works as expected.

Summary / Key Takeaways

In this tutorial, we’ve built a functional tip calculator using React. We’ve covered the basics of React, including:

  • State Management: Using the `useState` hook to manage component state.
  • Event Handling: Responding to user input with `onChange` and `onClick` events.
  • Conditional Rendering: Displaying results based on user input.
  • Component Structure: Breaking down the problem into a reusable component.

This project is a fantastic starting point for understanding React and building more complex applications. By practicing with this simple project, you’ve gained practical experience with essential React concepts, and you are well on your way to building more complex and interactive applications. Remember to experiment with the code, try out different features, and keep learning!

FAQ

  1. How do I handle invalid input?

    You can use `isNaN()` to check if the input is a number. If it’s not a number, you can display an error message or reset the input field.

  2. How can I add a custom tip percentage?

    You can add an input field for the user to enter a custom tip percentage. Then, update the `tipPercentage` state based on the input from this field. Make sure to validate the input to ensure it’s a valid number.

  3. How can I format the output with a currency symbol?

    You can use the `toLocaleString()` method to format numbers with currency symbols. For example, `amount.toLocaleString(‘en-US’, { style: ‘currency’, currency: ‘USD’ })`.

  4. How can I make the calculator responsive?

    You can use CSS media queries to adjust the layout and styling of the calculator based on the screen size. This will make the calculator look good on different devices.

  5. Where can I deploy this application?

    You can deploy your React application to platforms such as Netlify, Vercel, or GitHub Pages. These platforms provide free hosting for static websites and React applications.

Building this tip calculator is more than just creating a functional tool; it’s a gateway to understanding the core principles of React. The process of managing state, handling user interactions, and presenting dynamic content is foundational to all React projects. As you continue to build and experiment, remember that the most important aspect of learning is the hands-on experience and the willingness to explore and refine your code. Embrace the challenges, learn from your mistakes, and keep creating. The skills you gain from this simple project will serve as a solid foundation for more complex and exciting React applications.

More posts