Build a Simple Next.js Interactive Tip Calculator App

Written by

FixTechToday

in

In today’s digital world, web applications are everywhere, simplifying everyday tasks. One common need is a tip calculator. Whether you’re a restaurant-goer splitting a bill or a freelancer calculating service fees, a tip calculator is a handy tool. This article will guide you through building a simple, yet functional, interactive tip calculator app using Next.js, a powerful React framework known for its server-side rendering and static site generation capabilities. We’ll break down the process step-by-step, making it easy for beginners to grasp the concepts and build their own web applications.

Why Build a Tip Calculator?

Creating a tip calculator app offers several benefits:

  • Practical Skill Development: It’s a great project for learning the fundamentals of web development, including HTML, CSS, JavaScript, and React.
  • Real-World Application: It solves a common problem, making it a useful tool for everyday use.
  • Foundation for More Complex Apps: This project will help you understand the basics of state management, event handling, and user interface design, which are crucial for building more complex applications.
  • Portfolio Piece: It’s a simple yet impressive project to showcase your skills to potential employers or clients.

By the end of this tutorial, you’ll have a fully functional tip calculator app, and you’ll have gained valuable experience in Next.js development.

Prerequisites

Before we begin, ensure you have the following prerequisites in place:

  • Node.js and npm (or yarn): Make sure you have Node.js and npm (Node Package Manager) or yarn installed on your system. You can download them from nodejs.org.
  • Text Editor or IDE: You’ll need a text editor or an Integrated Development Environment (IDE) like VS Code, Sublime Text, or Atom to write your code.
  • Basic HTML, CSS, and JavaScript Knowledge: A basic understanding of HTML, CSS, and JavaScript will be helpful, but even if you’re a beginner, you should be able to follow along.

Setting Up Your Next.js Project

Let’s get started by setting up our Next.js project. Open your terminal and run the following command:

npx create-next-app tip-calculator-app

This command will create a new Next.js project named “tip-calculator-app”. Navigate into your project directory:

cd tip-calculator-app

Now, start the development server:

npm run dev

This will start the development server, and you can access your app at http://localhost:3000.

Project Structure Overview

Before we dive into the code, let’s understand the basic structure of a Next.js project. The key directories and files we’ll be working with are:

  • pages/: This directory contains your pages. Each file in this directory represents a route in your application. For example, `pages/index.js` corresponds to the `/` route.
  • styles/: This directory is where you’ll keep your CSS files.
  • public/: This directory is used for static assets like images and fonts.
  • package.json: This file contains information about your project, including dependencies and scripts.

Building the User Interface (UI)

Let’s design the UI of our tip calculator. We’ll start by modifying the `pages/index.js` file. Open this file in your text editor and replace its content with the following HTML:

import React, { useState } from 'react';

export default function Home() {
  const [billAmount, setBillAmount] = useState('');
  const [tipPercentage, setTipPercentage] = useState(15);
  const [numberOfPeople, setNumberOfPeople] = useState(1);
  const [tipAmount, setTipAmount] = useState(0);
  const [totalPerPerson, setTotalPerPerson] = useState(0);

  const calculateTip = () => {
    if (!billAmount || isNaN(billAmount) || parseFloat(billAmount)  0 ? total / numberOfPeople : total;

    setTipAmount(tip);
    setTotalPerPerson(perPerson);
  };

  return (
    <div>
      <h1>Tip Calculator</h1>
      <div>
        <label>Bill Amount:</label>
         setBillAmount(e.target.value)}
        />
      </div>
      <div>
        <label>Tip Percentage:</label>
         setTipPercentage(parseInt(e.target.value))}
        >
          10%
          15%
          20%
          25%
        
      </div>
      <div>
        <label>Number of People:</label>
         setNumberOfPeople(parseInt(e.target.value))}
        />
      </div>
      <button>Calculate</button>
      <div>
        <p>Tip Amount: ${tipAmount.toFixed(2)}</p>
        <p>Total per person: ${totalPerPerson.toFixed(2)}</p>
      </div>
      {`
        .container {
          width: 100%;
          max-width: 400px;
          margin: 0 auto;
          padding: 20px;
          border: 1px solid #ccc;
          border-radius: 5px;
        }

        h1 {
          text-align: center;
        }

        .input-group {
          margin-bottom: 15px;
        }

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

        input[type="number"], select {
          width: 100%;
          padding: 8px;
          border: 1px solid #ccc;
          border-radius: 4px;
          box-sizing: border-box;
          margin-bottom: 10px;
        }

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

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

        .results {
          margin-top: 20px;
          border-top: 1px solid #ccc;
          padding-top: 15px;
        }
      `}
    </div>
  );
}

Let’s break down this code:

  • Import React and useState: We import the `useState` hook from React to manage the state of our component.
  • State Variables: We declare several state variables using `useState`:
    • `billAmount`: Stores the bill amount entered by the user.
    • `tipPercentage`: Stores the selected tip percentage (default is 15%).
    • `numberOfPeople`: Stores the number of people splitting the bill (default is 1).
    • `tipAmount`: Stores the calculated tip amount.
    • `totalPerPerson`: Stores the calculated total amount per person.
  • calculateTip Function: This function is responsible for calculating the tip amount and the total per person. It is triggered when the “Calculate” button is clicked.
  • UI Elements: We have input fields for the bill amount and the number of people, and a select dropdown for the tip percentage. We also have a “Calculate” button and display the results (tip amount and total per person).
  • Inline Styling: We use the `style jsx` tag to add some basic styling to our component.

Save the file and check your browser. You should see a basic tip calculator UI with input fields, a dropdown, a button, and the results section.

Adding Functionality: Calculating the Tip

Now, let’s add the logic to calculate the tip. We’ll modify the `calculateTip` function to perform the calculations based on the user’s input. The `calculateTip` function is already included in the code above, but let’s review it:

const calculateTip = () => {
  if (!billAmount || isNaN(billAmount) || parseFloat(billAmount)  0 ? total / numberOfPeople : total;

  setTipAmount(tip);
  setTotalPerPerson(perPerson);
};

Here’s a breakdown of the `calculateTip` function:

  1. Input Validation: The code checks if `billAmount` is empty, not a number, or less than or equal to zero. If any of these conditions are true, it resets `tipAmount` and `totalPerPerson` to 0 and returns, preventing invalid calculations.
  2. Parsing Input: It converts `billAmount` to a floating-point number using `parseFloat`.
  3. Tip Calculation: The tip is calculated by multiplying the bill amount by the tip percentage (divided by 100).
  4. Total Calculation: The total is calculated by adding the bill amount and the tip amount.
  5. Per Person Calculation: The amount per person is calculated by dividing the total by the number of people. If the number of people is zero or negative, it defaults to the total amount.
  6. Updating State: The calculated `tipAmount` and `totalPerPerson` are set using the `setTipAmount` and `setTotalPerPerson` state update functions.

Make sure this function is present in your `index.js` file, and that it’s correctly linked to the button’s `onClick` event. Now, when you enter the bill amount, select a tip percentage, and click the “Calculate” button, the tip amount and total per person should be displayed.

Handling User Input

The next step is to handle user input. We’ve already set up the input fields in the UI. Now, let’s make sure that the values entered by the user are correctly captured and used in the calculations. We’ll focus on the following input fields:

  • Bill Amount: An input field for the bill amount.
  • Tip Percentage: A select dropdown for the tip percentage.
  • Number of People: An input field for the number of people splitting the bill.

Here’s how we handle each input field:

  • Bill Amount:
 setBillAmount(e.target.value)}
/>

The `onChange` event is triggered whenever the user types something into the input field. The `setBillAmount(e.target.value)` updates the `billAmount` state variable with the new value from the input field. This ensures that the value is always up-to-date and reflects what the user has typed.

  • Tip Percentage:
 setTipPercentage(parseInt(e.target.value))}
>
  10%
  15%
  20%
  25%

The `onChange` event is triggered when the user selects a different option from the dropdown. The `setTipPercentage(parseInt(e.target.value))` updates the `tipPercentage` state variable with the selected value. The `parseInt()` function converts the selected value (which is a string) to an integer. This ensures that the tip percentage is correctly stored and used in the calculations.

  • Number of People:
 setNumberOfPeople(parseInt(e.target.value))}
/>

Similar to the bill amount, the `onChange` event is triggered whenever the user types something into the input field. The `setNumberOfPeople(parseInt(e.target.value))` updates the `numberOfPeople` state variable with the new value from the input field. The `parseInt()` function converts the input value (which is a string) to an integer. This ensures that the number of people is correctly stored and used in the calculations.

By using the `onChange` event and updating the state variables, we ensure that the values entered by the user are always reflected in the UI and used in the calculations.

Styling Your Application

While the basic UI is functional, let’s enhance its appearance by adding some CSS styling. We’ll use the `style jsx` tag to add some basic styling to our component. You can customize the styling according to your preferences. Here’s a more detailed example of the styling:


 {
  `.container {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  h1 {
    text-align: center;
  }

  .input-group {
    margin-bottom: 15px;
  }

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

  input[type="number"], select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 10px;
  }

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

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

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

Here’s what the CSS does:

  • .container: Sets the width, maximum width, margin, padding, border, and border-radius for the main container.
  • h1: Centers the text of the heading.
  • .input-group: Adds margin to the bottom of each input group.
  • label: Displays labels as block elements, adds margin to the bottom, and makes the text bold.
  • input[type=”number”], select: Sets the width, padding, border, border-radius, box-sizing, and margin for the input fields and select dropdown.
  • button: Styles the button with a background color, text color, padding, border, border-radius, cursor, width, and font size.
  • button:hover: Changes the background color of the button on hover.
  • .results: Adds margin to the top, border-top, and padding to the results section.

You can modify these styles to match your design preferences. For example, you can change the colors, fonts, and layout to create a more visually appealing UI. Save your changes and refresh your browser to see the updated styling.

Common Mistakes and Troubleshooting

When building a Next.js tip calculator, you might encounter some common mistakes. Here’s how to avoid them and troubleshoot issues:

  • Incorrect State Updates: Make sure you’re correctly using the `useState` hook to update your component’s state. Incorrect state updates can lead to unexpected behavior and errors.
  • Missing or Incorrect Event Handlers: Ensure that your input fields have the correct `onChange` event handlers to capture user input. Without these event handlers, the application won’t respond to user actions.
  • Incorrect Data Types: Be mindful of data types. For example, if you’re working with numbers, make sure to parse the input values correctly using `parseFloat()` or `parseInt()`.
  • Incorrect Calculations: Double-check your calculation logic to ensure that the tip and total amounts are calculated correctly.
  • Styling Issues: If your styling isn’t working as expected, check for CSS syntax errors and ensure that your CSS selectors are correctly targeting the elements you want to style.
  • Console Errors: Open your browser’s developer console (usually by pressing F12) to check for any error messages. These messages can provide valuable clues about what’s going wrong.
  • Incorrect Imports: Ensure that you’re importing all necessary modules and components correctly.
  • Incorrect File Paths: Double-check the file paths, especially if you have issues with images or other assets.

Troubleshooting Tips:

  • Use the Console: Use `console.log()` to debug your code. Print the values of variables to see if they are what you expect.
  • Check Your Code: Carefully review your code for any syntax errors or logical mistakes.
  • Read Error Messages: Pay attention to error messages in the console. They often provide helpful information about the cause of the problem.
  • Ask for Help: If you’re stuck, don’t hesitate to ask for help from online communities like Stack Overflow or Next.js forums.

By being aware of these common mistakes and troubleshooting tips, you can efficiently debug and resolve any issues you encounter while building your tip calculator app.

Enhancements and Next Steps

Now that you’ve built a basic tip calculator, you can enhance it further. Here are some ideas:

  • Add Custom Tip Percentages: Allow users to enter a custom tip percentage.
  • Implement Currency Formatting: Format the output values as currency.
  • Add Dark Mode: Implement a dark mode for a better user experience.
  • Improve UI/UX: Enhance the UI/UX with more styling, animations, and user-friendly features.
  • Add Error Handling: Implement more robust error handling to handle invalid input and other potential issues.
  • Deploy Your App: Deploy your app to a platform like Vercel or Netlify to share it with the world.
  • Add a Reset Button: Implement a reset button to clear all input fields and results.
  • Use a Slider for Tip Percentage: Replace the select dropdown with a slider for a more interactive user experience.
  • Add Tooltips: Add tooltips to explain each input field.

By exploring these enhancements, you can further develop your Next.js skills and create a more polished and feature-rich tip calculator app.

Key Takeaways

This tutorial has provided a comprehensive guide to building a simple tip calculator app using Next.js. We covered the basics of setting up a Next.js project, designing the UI, handling user input, calculating the tip, and adding styling. You’ve learned how to use React’s `useState` hook to manage component state, handle events, and create an interactive user interface. You’ve also learned how to implement basic input validation, which is crucial for building robust applications. This project is an excellent starting point for learning Next.js and web development in general. It provides a solid foundation for building more complex web applications. By understanding the concepts and techniques demonstrated in this tutorial, you can apply them to your future projects and continue to grow your skills as a web developer. With practice and experimentation, you can create even more sophisticated and useful web applications.

More posts